:root {
  --ink: #161a17; --ink2: #4d554f; --ink3: #7c847e; --line: #e3e6e2; --surf: #f5f6f4; --card: #ffffff; --side: #0f1511;
  --green: #1f8a3b; --green-d: #176a2e; --green-t: #e6f3e9; --green-b: #2fa84f; --amber: #c98500; --amber-t: #fbf1dc; --red: #c9403f; --red-t: #fbeaea;
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; --s6: #008300;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
html { overflow-x: hidden; -webkit-text-size-adjust: 100%; }
body { font-family: Manrope, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; color: var(--ink); background: var(--surf); -webkit-font-smoothing: antialiased; font-feature-settings: 'tnum'; font-size: 16px; overflow-x: hidden; overscroll-behavior-x: none; }
button { font: inherit; cursor: pointer; }
a { color: var(--green); text-decoration: none; }
img, svg { max-width: 100%; }
.loading { padding: 40px; color: var(--ink3); font-weight: 600; }

.app { display: flex; min-height: 100vh; min-height: 100dvh; max-width: 100vw; }
.side { width: 496px; flex-shrink: 0; background: var(--side); color: #fff; padding: 22px 16px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; }
.side nav { display: flex; flex-direction: column; gap: 2px; }
.nav { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 8px; font-size: 14px; font-weight: 600; color: #b8c0ba; background: none; border: 0; text-align: left; width: 100%; }
.nav:hover { background: rgba(255,255,255,0.05); color: #fff; }
.nav.active { background: rgba(47,168,79,0.16); color: #fff; }
.nav svg { color: #8a938d; } .nav.active svg { color: var(--green-b); }
.nav .badge { margin-left: auto; font-size: 11px; font-weight: 700; background: var(--red); color: #fff; border-radius: 10px; padding: 1px 7px; }
.switcher { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 10px 12px; margin: 22px 0 18px; width: 100%; color: #fff; text-align: left; }
.switcher .av { width: 30px; height: 30px; border-radius: 8px; background: var(--green-b); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; flex-shrink: 0; }
.switcher .t { display: flex; flex-direction: column; min-width: 0; } .switcher .t b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .switcher .t span { font-size: 11px; color: #8a938d; }
.seg { position: relative; display: flex; flex-direction: column; min-width: 0; }
.seg.grow { flex: 1 1 0; }
.seg > .card { flex: 1; }
.seg-btn { position: absolute; top: 10px; right: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--surf); color: var(--ink2); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; }
.seg-btn:hover { color: var(--ink); border-color: var(--ink2); }
.seg-hidden > .card { opacity: .45; }
.seg-hidden .seg-btn { background: #fff4e0; border-color: var(--amber); color: #8a5a00; opacity: 1; }
.seg > .card > .card-h { padding-right: 130px; }
@media (max-width: 900px) { .seg > .card { width: auto !important; max-width: 100% !important; } }
.picker-bd { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px 16px; }
.picker-bd[hidden] { display: none; }
.picker { background: #1a221c; color: #fff; width: min(440px, 100%); max-height: 78vh; max-height: 78dvh; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.45); display: flex; flex-direction: column; overflow: hidden; }
.picker input { margin: 12px; height: 40px; border-radius: 9px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.07); color: #fff; padding: 0 12px; font: inherit; font-size: 14px; outline: none; }
.picker input:focus { border-color: var(--green-b); }
.picker .list { overflow-y: auto; padding: 0 8px 10px; display: flex; flex-direction: column; gap: 2px; -webkit-overflow-scrolling: touch; }
.picker .list .nav { width: 100%; }
.side .bottom { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.08); }
.side .user { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-top: 6px; }
.side .user .av { width: 28px; height: 28px; border-radius: 50%; background: #2a3a2e; display: flex; align-items: center; justify-content: center; }
.side .user b { font-size: 12px; display: block; } .side .user span { font-size: 11px; color: #8a938d; }
.section-label { font-size: 11px; font-weight: 700; color: #6f7872; text-transform: uppercase; letter-spacing: 0.8px; padding: 14px 14px 6px; }
.menu-btn { display: none; }

main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; max-width: 100%; }
.hdr { display: flex; align-items: center; gap: 16px; padding: 22px 32px 0; flex-wrap: wrap; }
.hdr h1 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -0.4px; }
.hdr .sub { font-size: 16px; color: var(--ink3); overflow-wrap: anywhere; }
.hdr .controls { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.presets { display: inline-flex; gap: 2px; padding: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 9px; max-width: 100%; overflow-x: auto; }
.presets button { padding: 0 10px; height: 30px; border-radius: 7px; font-size: 12px; font-weight: 700; color: var(--ink2); background: transparent; border: 0; white-space: nowrap; }
.presets button.on { background: var(--green); color: #fff; }
.btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 9px; font-size: 13px; font-weight: 700; background: var(--card); color: var(--ink); border: 1px solid var(--line); white-space: nowrap; }
.btn.primary { background: var(--green); color: #fff; border-color: var(--green); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink2); }
.content { display: flex; flex-direction: column; gap: 18px; padding: 22px 32px 40px; }
.row { display: flex; gap: 18px; align-items: stretch; } .row > * { min-width: 0; }
.grow { flex: 1 1 0; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.kpi { container-type: inline-size; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.kpi .l { font-size: 12px; font-weight: 700; color: var(--ink3); text-transform: uppercase; letter-spacing: 0.6px; }
.kpi .v { font-size: min(60px, 23cqi); font-weight: 800; letter-spacing: -0.8px; line-height: 1; white-space: nowrap; }
.kpi .n { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink3); flex-wrap: wrap; }
.delta { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 700; padding: 2px 8px 2px 4px; border-radius: 999px; }
.delta.up { color: var(--green); background: var(--green-t); } .delta.down { color: var(--red); background: var(--red-t); } .delta.flat { color: var(--ink2); background: var(--surf); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; max-width: 100%; min-width: 0; }
.card-h { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; } .card-h .t { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .card-h .t b { font-size: 19px; font-weight: 800; letter-spacing: -0.2px; } .card-h .t span { font-size: 15px; color: var(--ink3); font-weight: 600; overflow-wrap: anywhere; }
.card-h .r { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.ok { color: var(--green); background: var(--green-t); } .pill.warn { color: var(--amber); background: var(--amber-t); } .pill.bad { color: var(--red); background: var(--red-t); } .pill.mute { color: var(--ink2); background: var(--surf); }
.pill.c1 { color: var(--s1); background: #e8f0fb; } .pill.c2 { color: var(--s2); background: #fdeee7; } .pill.c3 { color: var(--s3); background: #e9f5ec; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 14px; font-weight: 700; color: var(--ink3); text-transform: uppercase; letter-spacing: 0.5px; padding: 10px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { font-size: 17px; font-weight: 600; padding: 13px 10px; border-bottom: 1px solid var(--line); color: var(--ink2); white-space: nowrap; }
td:first-child { font-weight: 700; color: var(--ink); white-space: normal; } th.num, td.num { text-align: right; }
tr.click { cursor: pointer; } tr.click:hover td { background: #fafbf9; }
.tablewrap { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
/* the agency-HQ "Client workspaces" table: client names and every metric column at roughly double the normal table size,
   since this is the main list Mike reads client-by-client at a glance */
.table-lg th { font-size: 22px; padding: 12px 12px; }
.table-lg td { font-size: 26px; padding: 16px 12px; }
.table-lg .avatar { width: 38px; height: 38px; font-size: 15px; border-radius: 9px; }
.table-lg .pill { font-size: 16px; padding: 4px 12px; }
/* Creative thumbnails. Sized so a row of ads reads as a contact sheet without the table getting tall; the placeholder
   keeps the column aligned when one ad in a set has no image on file. */
/* the whole banner, at its own proportions, never cropped — a 320×50 looks like a 320×50, a 300×250 like a square */
.creative-thumb { display: block; max-width: 220px; max-height: 96px; width: auto; height: auto; border-radius: 3px; border: 1px solid var(--line); background: #f4f5f3; cursor: zoom-in; }
.creative-thumb.empty-thumb, .creative-thumb.video-thumb { width: 96px; height: 54px; }
.video-thumb { display: flex; align-items: center; justify-content: center; color: var(--ink2); background: #eef0ee; }
.video-thumb:hover { color: var(--green); }
.creative-view { position: fixed; inset: 0; z-index: 1000; background: rgba(20, 24, 26, .82); display: flex; align-items: center; justify-content: center; padding: 24px; }
.creative-view-inner { background: #fff; border-radius: 12px; padding: 12px 14px 14px; max-width: min(96vw, 1400px); max-height: 94vh; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.creative-view-h { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 14px; }
.creative-view-h b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creative-view img, .creative-view video { display: block; max-width: 100%; max-height: calc(94vh - 70px); width: auto; height: auto; margin: 0 auto; background: #f4f5f3; border-radius: 6px; }
@media (max-width: 640px) { .creative-thumb { max-width: 140px; max-height: 72px; } .creative-view { padding: 10px; } }
.empty-thumb { border-style: dashed; }
/* Sortable columns. Every table header in a .tablewrap is clickable; the arrow marks the column currently sorted and
   which way. The arrow is reserved as a transparent glyph on every header so the row doesn't shift width when sorted. */
.tablewrap thead th { cursor: pointer; user-select: none; }
.tablewrap thead th:hover { color: var(--ink); }
.tablewrap thead th::after { content: " \25B2"; font-size: 8px; opacity: 0; }
.tablewrap thead th[data-sort="asc"]::after { content: " \25B2"; opacity: 1; }
.tablewrap thead th[data-sort="desc"]::after { content: " \25BC"; opacity: 1; }
.summary p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink2); } .summary strong { color: var(--ink); }
.tags { display: flex; gap: 8px; flex-wrap: wrap; }
.alert { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.alert .ic { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.alert .ic.bad { background: var(--red-t); color: var(--red); } .alert .ic.warn { background: var(--amber-t); color: var(--amber); } .alert .ic.ok { background: var(--green-t); color: var(--green); }
.alert b { font-size: 17px; display: block; } .alert span { font-size: 15px; color: var(--ink3); line-height: 1.45; }
.legend { display: flex; flex-direction: column; gap: 8px; } .legend div { display: flex; align-items: center; gap: 8px; font-size: 15px; } .legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } .legend span { font-weight: 600; color: var(--ink2); } .legend b { margin-left: auto; font-size: 17px; }
.src-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.src { border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.src .top { display: flex; align-items: center; gap: 10px; } .src .top b { font-size: 17px; } .src .top small { display: block; font-size: 13px; color: var(--ink3); font-weight: 600; }
.src .dot { margin-left: auto; width: 9px; height: 9px; border-radius: 50%; }
.src .st { font-size: 15px; font-weight: 600; } .src .cl { font-size: 15px; color: var(--ink3); }
.avatar { width: 34px; height: 34px; border-radius: 8px; background: var(--side); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; margin-right: 10px; vertical-align: middle; }
.note { font-size: 14px; color: var(--ink3); }
.banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; font-size: 16px; font-weight: 600; }
.banner.info { background: #e8f0fb; color: #1c5cab; } .banner.warn { background: var(--amber-t); color: #7a5200; }
.empty { padding: 30px; text-align: center; color: var(--ink3); font-weight: 600; }
.tabs { display: flex; gap: 4px; padding: 16px 32px 0; border-bottom: 1px solid var(--line); margin: 0 32px; }
.tabs button { padding: 10px 14px; font-size: 16px; font-weight: 700; color: var(--ink3); background: none; border: 0; border-bottom: 2px solid transparent; }
.tabs button.on { color: var(--ink); border-bottom-color: var(--green); }
svg text { font-family: Manrope, Arial, sans-serif; }
.tip { position: fixed; pointer-events: none; background: var(--ink); color: #fff; padding: 8px 12px; border-radius: 8px; font-size: 12px; font-weight: 700; z-index: 10; transform: translate(-50%, -110%); white-space: nowrap; display: none; }
.tip small { display: block; color: #b8c0ba; font-weight: 700; }
.chart-wrap { width: 100%; overflow: hidden; }
.chart-wrap svg { width: 100%; height: auto; display: block; }
select, input[type="date"], input[type="text"] { max-width: 100%; }


/* agency sidebar client list (favorites / recent / all) */
.side .hq-nav { margin-top: 14px; }
.cl-panel { display: flex; flex-direction: column; gap: 14px; margin: 14px 0 6px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.08); }
.cl-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cl-head b { font-size: 18px; letter-spacing: .02em; text-transform: uppercase; color: #8a938d; padding: 0 4px; }
.cl-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.06); color: #d4dad6; border-radius: 10px; flex-shrink: 0; }
.cl-toggle:hover { background: rgba(255,255,255,.12); }
.cl-toggle.on { background: rgba(47,168,79,0.22); color: #fff; border-color: rgba(47,168,79,0.4); }
.cl-body { display: flex; flex-direction: column; gap: 10px; }
.cl-tabs { display: flex; gap: 6px; background: rgba(255,255,255,0.05); border-radius: 10px; padding: 4px; }
.cl-tabs button { flex: 1; border: 0; background: none; color: #b8c0ba; font-size: 19px; font-weight: 600; padding: 8px 6px; border-radius: 8px; white-space: nowrap; }
.cl-tabs button span { color: #8a938d; font-weight: 500; }
.cl-tabs button.on { background: rgba(47,168,79,0.22); color: #fff; }
.cl-find { height: 44px; border-radius: 10px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.07); color: #fff; padding: 0 14px; font: inherit; font-size: 20px; outline: none; width: 100%; }
.cl-find:focus { border-color: var(--green-b); }
.cl-tip { font-size: 18px; color: #8a938d; padding: 0 4px; }
.cl-list { display: flex; flex-direction: column; gap: 4px; }
.cl-item[hidden], .cl-none[hidden] { display: none; }
.cl-none { font-size: 18px; color: #8a938d; padding: 6px 4px; }
.cl-row { display: flex; align-items: center; border-radius: 10px; }
.cl-row:hover { background: rgba(255,255,255,0.05); }
.cl-item.cur > .cl-row { background: rgba(47,168,79,0.16); }
.cl-go { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 14px; border: 0; background: none; color: #d4dad6; text-align: left; font-size: 20px; font-weight: 600; }
.cl-item.cur .cl-go { color: #fff; }
.cl-go .av { width: 36px; height: 36px; border-radius: 10px; background: #2a3a2e; color: #cfe8d6; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; flex-shrink: 0; }
.cl-item.cur .cl-go .av { background: var(--green-b); color: #fff; }
.cl-go .n { min-width: 0; overflow: hidden; overflow: clip; text-overflow: ellipsis; white-space: nowrap; }
.cl-star { border: 0; background: none; color: #5f6b63; font-size: 22px; line-height: 1; padding: 8px 10px; border-radius: 8px; flex-shrink: 0; }
.cl-star:hover { color: #f5c542; }
.cl-star.on { color: #f5c542; }
.cl-nav { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 12px 20px; padding-left: 12px; border-left: 1px solid rgba(255,255,255,0.1); }
.cl-nav .nav { padding: 10px 14px; font-size: 17px; }
@media (max-width: 900px) {
  .side .cl-panel { display: none; width: 100%; }
  .side.open .cl-panel { display: flex; }
}

/* ---------- tablets: keep the sidebar, tighten spacing, let side-by-side cards stack ---------- */
@media (max-width: 1180px) {
  .side { width: 216px; }
  .hdr, .content { padding-left: 20px; padding-right: 20px; }
  .row { flex-wrap: wrap; }
  .row > * { flex: 1 1 360px !important; width: auto !important; }
}

/* ---------- phones + small tablets: top bar with a menu button, everything one column, nothing wider than the screen ---------- */
@media (max-width: 900px) {
  .app { flex-direction: column; }
  .side { width: 100%; height: auto; position: sticky; top: 0; z-index: 20; padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top)); flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; overflow: visible; }
  .side .logo-tile { width: 150px; margin: 0 !important; padding: 6px 8px !important; }
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; width: 42px; height: 42px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.06); color: #fff; }
  .side .switcher, .side nav, .side .bottom, .side > .banner { display: none; width: 100%; }
  .side.open .switcher { display: flex; margin: 6px 0 8px; }
  .side.open nav, .side.open .bottom, .side.open > .banner { display: flex; }
  .side.open .bottom { margin-top: 4px; }
  .side.open { max-height: 100vh; max-height: 100dvh; overflow-y: auto; }
  main { padding-top: 0; }
  .hdr { padding: 16px 14px 0; gap: 10px; }
  .hdr h1 { font-size: 20px; }
  .hdr .controls { margin-left: 0; width: 100%; }
  .content { padding: 14px 14px 32px; gap: 14px; }
  .row { flex-direction: column; }
  .row > * { width: auto !important; max-width: 100% !important; min-width: 0 !important; flex: 1 1 auto !important; }
  /* Some cards carry an inline min-width for their desktop layout (e.g. "Top keywords" at 380px). On a 390px phone
     that pushes the card past the right edge once the page gutter is counted. The .row rule above only reaches direct
     children of a .row, so cards outside one need the same release. */
  .card { min-width: 0 !important; }
  /* Secondary captions were computing to ~10.8px, which is below comfortable reading size on a phone. */
  small { font-size: 11px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 14px 14px; }
  .kpi .v { font-size: min(48px, 23cqi); }
  .card { padding: 16px 14px; border-radius: 12px; }
  .tabs { margin: 0 14px; padding-left: 0; }
  td, th { padding: 9px 8px; }
  /* The five range presets don't fit one narrow line. They used to sit in a horizontally scrolling strip, which cut
     "Custom" in half at the right edge with no visible scrollbar to hint that it was reachable — it read as broken.
     Wrapping shows all five, and the taller button is an easier thumb target. */
  .presets { width: 100%; flex-wrap: wrap; overflow-x: visible; row-gap: 4px; }
  .presets button { flex: 1 1 auto; text-align: center; height: 34px; }
  .btn { height: 36px; }
}
@media (max-width: 420px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi .v { font-size: min(44px, 23cqi); }
  .hdr h1 { font-size: 18px; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (min-width: 600px) and (max-width: 900px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Reports (agency): the client's dashboard as one printable document ---------- */
.report { display: flex; flex-direction: column; gap: 26px; }
.report-cover { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 48px 44px 36px; display: flex; flex-direction: column; gap: 10px; }
.report-logo { width: 220px; height: auto; margin-bottom: 18px; }
.report-logo.client { width: auto; max-width: 280px; max-height: 120px; object-fit: contain; }
.report-kicker { font-size: 15px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--green); }
.report-client { margin: 0; font-size: 38px; font-weight: 800; letter-spacing: -0.6px; line-height: 1.15; }
.report-period { font-size: 18px; color: var(--ink2); font-weight: 600; }
.report-notes { margin-top: 22px; padding: 18px 20px; background: var(--green-t); border-radius: 12px; font-size: 17px; line-height: 1.55; }
.report-notes p { margin: 0 0 8px; } .report-notes p:last-child { margin-bottom: 0; }
.report-notes-h { font-size: 13px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink3); margin-bottom: 8px; }
.report-toc { margin-top: 22px; font-size: 16px; color: var(--ink2); line-height: 1.7; }
.report-foot { margin-top: auto; padding-top: 30px; font-size: 14px; color: var(--ink3); font-style: italic; }
.report-sec { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 0; overflow: hidden; }
.report-sec-h { display: flex; align-items: center; gap: 14px; padding: 18px 24px; background: var(--side); color: #fff; }
.report-sec-h h2 { margin: 0; font-size: 23px; font-weight: 800; letter-spacing: -0.3px; }
.report-sec-n { width: 34px; height: 34px; border-radius: 50%; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; flex-shrink: 0; }
.report-sec-sub { font-size: 14px; color: #b9c2bb; margin-top: 2px; overflow-wrap: anywhere; }
.report-sec-client { margin-left: auto; font-size: 14px; color: #b9c2bb; text-align: right; }
.report-content { padding: 20px 24px 26px; background: var(--surf); }
.report-content .card, .report-content .kpi { box-shadow: none; }
@media print {
  @page { size: letter; margin: 12mm 11mm; }
  html, body { background: #fff !important; height: auto; overflow: visible; }
  .app { display: block; }
  .side, .hdr, .report-tools-wrap, .menu-btn, .picker-bd, .banner { display: none !important; }
  main { display: block; }
  main > .content { padding: 0; gap: 0; }
  .report { gap: 0; }
  .report-cover, .report-sec { border: 0; border-radius: 0; break-after: page; page-break-after: always; }
  .report-cover { min-height: 90vh; padding: 30px 6px; }
  .report-sec:last-child { break-after: auto; page-break-after: auto; }
  .report-sec-h { -webkit-print-color-adjust: exact; print-color-adjust: exact; border-radius: 10px; }
  .report-sec-n, .report-notes, .pill, .kpi, .card { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .report-content { padding: 14px 0 0; background: #fff; }
  .card, .kpi { break-inside: avoid; page-break-inside: avoid; border: 1px solid #d9ddd8; }
  .row { flex-wrap: wrap; } .row > .card { flex: 1 1 300px; }
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  tr { break-inside: avoid; page-break-inside: avoid; }
  table { font-size: 14px; }
  .tablewrap { overflow: visible; }
  svg { max-width: 100%; height: auto; }
  a[href]::after { content: none; }
}
@media print {
  td, th { white-space: normal; padding: 7px 7px; font-size: 13px; overflow-wrap: break-word; }
  th { font-size: 12px; }
  /* number columns never break mid-word: a long post or campaign name in the first column was squeezing them to one letter wide */
  td.num { white-space: nowrap; overflow-wrap: normal; word-break: normal; }
  th.num { overflow-wrap: normal; word-break: normal; }
  /* post titles are one clipped line on screen (max 420px); on paper that left too little room for the number columns */
  td div[style*="max-width:420px"] { max-width: 190px !important; }
  td.num, th.num { padding-left: 5px; padding-right: 5px; }
  .creative-thumb { max-width: 150px; max-height: 72px; }
  .creative-thumb.empty-thumb, .creative-thumb.video-thumb { width: 80px; height: 45px; }
  .kpi b, .kpi .v { font-size: 44px; }
}
@media print {
  /* flex containers don't split across pages in Chrome — a tall creatives table inside one gets cut off. Print as blocks. */
  .report-content .row { display: block; }
  .report-content .row > .card { display: block; width: auto !important; margin-bottom: 12px; }
  .report-content .card { display: block; }
  .report-content .card > * + * { margin-top: 12px; }
  .report-content .card:has(tbody tr:nth-child(10)) { break-inside: auto; page-break-inside: auto; }
  .report-content thead { display: table-header-group; }
  .report-content .creative-thumb { break-inside: avoid; }
}

/* co-op reports: attached PDFs print as whole pages */
.coop-att { padding: 0 !important; }
.coop-att img { width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: 8px; }
@media print {
  .coop-att img { border: 0; border-radius: 0; max-height: 250mm; width: auto; max-width: 100%; margin: 0 auto; }
}
/* the agency's Hide/Show-from-client pills never belong on a report or co-op page */
.report .seg-btn { display: none !important; }
@media print { .seg-btn { display: none !important; } }
.report-tools-wrap .seg-btn { display: none !important; }
/* Alpha SEO: the report's pages, one under another */
.alpha-pages { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.alpha-pages img { width: 100%; max-width: 1200px; height: auto; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.06); background: #fff; }

/* ---------- phones: nothing may be wider than the screen (Mike, 2026-10-06: "the screen is moving around") ----------
   A page that is even a few pixels wider than the phone lets the whole screen slide sideways under a thumb. Causes found:
   KPI numbers at 48px overflowing a half-width tile, cards with a fixed inline width (420–540px) outside a .row, and
   inline flex wrappers that don't wrap. `clip` (unlike `hidden`) doesn't turn the page into a scroll box, so the sticky
   top bar keeps working. */
@media (max-width: 900px) {
  html, body { overflow-x: clip; max-width: 100%; }
  body { overscroll-behavior-x: none; }
  main, .content { max-width: 100vw; }
  .kpi { overflow: hidden; }
  .kpi .v { font-size: clamp(20px, 6.4vw, 34px); letter-spacing: -0.4px; overflow-wrap: normal; white-space: nowrap; }
  .content [style*="width:260px"], .content [style*="width:420px"], .content [style*="width:440px"], .content [style*="width:460px"],
  .content [style*="width:520px"], .content [style*="width:540px"], .content [style*="min-width:220px"], .content [style*="min-width:240px"],
  .content [style*="min-width:260px"], .content [style*="min-width:380px"] {
    width: auto !important; min-width: 0 !important; max-width: 100% !important; flex: 1 1 100% !important;
  }
  .content div[style*="display:flex"]:not(.tablewrap) { flex-wrap: wrap; }
  .content svg { max-width: 100%; height: auto; }
  .content img { max-width: 100%; }
  .tablewrap { overscroll-behavior-x: contain; }
  .hdr .sub, .card-h .t span { overflow-wrap: anywhere; }
  .card-h { flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 420px) {
  .kpi .v { font-size: clamp(19px, 6.1vw, 26px); }
}

/* ---------- phones: the open menu must only scroll up and down ----------
   `.side.open` scrolls vertically (overflow-y: auto), and a box that scrolls one way also scrolls the other when anything
   inside is a few pixels too wide — so the open client menu could be dragged left and right. Lock it to vertical and
   let every row inside shrink to the menu width. */
@media (max-width: 900px) {
  .side { max-width: 100vw; }
  .side.open { overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y; }
  .side nav, .side .cl-panel, .side .cl-item, .side .cl-row, .side .cl-nav, .side .hq-nav, .side .bottom { min-width: 0; max-width: 100%; }
  .side .nav { min-width: 0; max-width: 100%; }
  .side .nav span { min-width: 0; overflow: hidden; overflow: clip; text-overflow: ellipsis; white-space: nowrap; }
  .side .cl-go { min-width: 0; }
}

/* client menu group labels (Mike, 2026-10-07): Advertising · Online visibility · Reports · Settings */
.nav-sec { font-size: 11px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase; color: #6f7a73; padding: 14px 14px 4px; }
.cl-nav .nav-sec:first-child { padding-top: 4px; }

/* proof-of-performance printouts from campaign and group pages (Oct 12 2026) */
.print-only { display: none; }
@media print { .print-only { display: block !important; } .no-print { display: none !important; } }

/* Agency HQ "Client workspaces" table (Oct 13 2026): the big-screen sizes above made names huge and pushed the numbers
   off the right edge on phones. Tablet and phone sizes; the client name may wrap, the numbers never do. */
html { text-size-adjust: 100%; }
@media (max-width: 1100px) {
  .table-lg th { font-size: 13px; padding: 10px 10px; }
  .table-lg td { font-size: 17px; padding: 12px 10px; }
  .table-lg .avatar { width: 30px; height: 30px; font-size: 12px; border-radius: 8px; }
  .table-lg .pill { font-size: 12px; padding: 3px 9px; }
}
@media (max-width: 640px) {
  .table-lg th { font-size: 11px; padding: 8px 8px; }
  .table-lg td { font-size: 14px; padding: 10px 8px; }
  .table-lg td:first-child { white-space: normal; min-width: 130px; max-width: 170px; }
  .table-lg td.num { white-space: nowrap; }
  .table-lg .avatar { width: 26px; height: 26px; font-size: 11px; border-radius: 7px; }
}

/* Nov 6 2026: in the report document a short card (e.g. Reviews by source) must not stretch to a long neighbour (Listings) and leave a big blank */
.report .row { align-items: flex-start; }
/* Nov 6 2026: a full-width card (Reviews by source) squeezed its neighbour (Listings) into a 46px strip off the page edge, which printed as a page of blank space. In reports, let row items wrap onto their own line instead. */
.report .row { flex-wrap: wrap; }
.report .row > * { flex: 1 1 320px; min-width: 320px; }
/* Nov 6 2026 (Mike): in reports the SEO report pages fill the same width as every other section */
.report .alpha-pages img { max-width: none; }
/* Nov 6 2026 (Mike): Facebook / Instagram post tables were wider than the printed page — the one-line post text pushed the
   number columns off the right edge. In print, fit these tables to the page and let the post text wrap (up to 3 lines). */
@media print {
  .report-content table:has(td div[style*="max-width:420px"]) { width: 100%; table-layout: fixed; }
  .report-content table:has(td div[style*="max-width:420px"]) th:first-child,
  .report-content table:has(td div[style*="max-width:420px"]) td:first-child { width: 40%; }
  .report-content td div[style*="max-width:420px"] { white-space: normal !important; max-width: none !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .report-content table:has(td div[style*="max-width:420px"]) th.num { white-space: normal; word-break: normal; overflow-wrap: normal; font-size: 11px; }
}
/* Nov 6 2026 (Mike): the cover was 90vh + padding, so with a client summary its last line ("Prepared by …") spilled onto
   page 2 alone. Size it in page units, never taller than one printed page, and never split it. */
@media print {
  .report-cover { min-height: 0 !important; height: 235mm; max-height: 235mm; box-sizing: border-box; overflow: hidden; break-inside: avoid; page-break-inside: avoid; }
}