:root {
  --paper: #f4f4f1;
  --panel: #fbfbfa;
  --ink: #23241f;
  --line: #cdccc4;
  --line-soft: #e2e1da;
  --muted: #8b8a82;
  /* --accent, --accent-soft, and --sidebar-bg are set per-request in
     base.html from BrandSettings, these are just fallbacks if that ever
     fails to render. */
  --accent: #4e5d52;
  --accent-soft: #e4e9e4;
  --sidebar-bg: var(--panel);
}

* { box-sizing: border-box; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: "effra", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  margin: 0;
}

.mono {
  font-family: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.06em;
}

/* Type scale, from the Stony Brook Medicine Typography guide (Effra).
   The guide is written for marketing landing pages (H1 at 56px), a dense
   dashboard uses the same family and proportions but leans on the smaller
   end of the scale, table cells and KPI micro-labels stay below Text sm,
   this scale is for real headings and prose, not UI chrome. */
.h1 { font-family: "effra", sans-serif; font-weight: 700; font-size: 56px; line-height: 1.1; letter-spacing: -0.01em; }
.h2 { font-family: "effra", sans-serif; font-weight: 700; font-size: 40px; line-height: 1.1; letter-spacing: -0.01em; }
.h3 { font-family: "effra", sans-serif; font-weight: 700; font-size: 32px; line-height: 1.1; }
.text-lg { font-size: 24px; line-height: 1.25; }
.text-lg.bold { font-weight: 700; }
.text-md { font-size: 20px; line-height: 1.5; }
.text-md.bold { font-weight: 700; }
.text-sm { font-size: 18px; line-height: 1.5; }
.text-sm.bold { font-weight: 700; }

/* Eyebrow: Effra Bold, 14/24, 12% tracking, uppercase, per the client's
   design system. Used for breadcrumbs and card category labels. */
.eyebrow {
  font-family: "effra", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.app-shell {
  display: grid;
  grid-template-columns: 236px 1fr;
  min-height: 100vh;
}

.sidenav {
  border-right: 1px solid var(--line);
  padding: 22px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  background: var(--sidebar-bg);
}

.sidenav .brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidenav .brand img {
  max-height: 32px;
  max-width: 100%;
  width: auto;
  height: auto;
}

.sidenav .brand .logo-fallback {
  font-weight: 700;
  font-size: 15px;
}

.sidenav .footer-logo img {
  max-height: 16px;
  max-width: 100%;
  width: auto;
  height: auto;
  opacity: 0.75;
}

.navlist {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.navlist .item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 6px;
  color: var(--ink);
  text-decoration: none;
}

.navlist .item .n {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}

.navlist .item .label {
  font-size: 13.5px;
  font-weight: 500;
}

.navlist .item .sub {
  font-size: 11px;
  color: var(--muted);
  display: block;
  margin-top: 1px;
}

.navlist .item.active {
  background: var(--accent-soft);
}

.navlist .item.active .n,
.navlist .item.active .label {
  color: var(--accent);
}

.navlist .item:not(.active):hover {
  background: var(--line-soft);
}

.navnote {
  margin-top: auto;
  font-size: 11px;
  color: var(--muted);
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.content {
  /* min-width: 0 overrides the default min-width: auto that grid items get,
     which otherwise refuses to shrink below the intrinsic content width of
     whatever's inside it (a table, a long breadcrumb, etc.), even once the
     mobile media query has already correctly collapsed .app-shell to a
     single column. Without this, narrow real devices silently render the
     whole page at its desktop-ish content width and require horizontal
     scrolling to read anything, a screenshot-based check at a scaled-down
     viewport doesn't reveal it since the whole overflowing page just gets
     shrunk into the image (found 2026-07-23, reported on a real iPhone
     simulator, not caught by any screenshot taken this build). */
  min-width: 0;
  padding: 28px 34px 30px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.crumb {
  font-family: "effra", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.pagehead h2 {
  font-family: "effra", sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.1;
  margin: 6px 0 4px;
  text-wrap: balance;
}

.pagehead p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.quarter-picker select {
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 10px;
}

.flash {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13.5px;
  border: 1px solid var(--line);
}

.flash.warning { background: #f6ecd9; border-color: #e2cf9d; }
.flash.danger { background: #f6dede; border-color: #e2a3a3; }
.flash.success { background: #e4ede4; border-color: #a9c9a9; }

.pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.pill-success { background: #e4ede4; color: #3f7a4f; }
.pill-warning { background: #f6ecd9; color: #9a6b1f; }
.pill-danger { background: #f6dede; color: #b04a3f; }

.benchmark-notes {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.6;
  margin: 10px 2px 0;
}

.card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px 20px;
  background: var(--panel);
}

.empty-state {
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13.5px;
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.kpirow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.kpirow.funnelrow {
  grid-template-columns: repeat(4, 1fr);
}

/* Generic 50/50 split used by Full-Funnel Investment sections (pie chart
   in one half, page-specific content — creative gallery or Service Line
   Mix — in the other). */
.split-half-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

@media (max-width: 900px) {
  .split-half-row { grid-template-columns: 1fr; }
}

.kpi {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px 16px 14px;
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kpi .kpilabel {
  font-size: 12.5px;
  font-weight: 600;
  text-wrap: balance;
}

.kpi .kpivalue {
  font-size: 22px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.kpi .kpidelta {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.kpi .kpidelta.up { color: #3f7a4f; }
.kpi .kpidelta.down { color: #b04a3f; }
.kpi .kpidelta.none { color: var(--muted); }

.sectionhead {
  /* Client feedback (2026-07-24): hint text sitting in the right-hand
     column of the header row read as a disconnected "second column,"
     not a subhead for the title next to it (Marjorie's example:
     "I don't know if the eye is going to go to the right column").
     Stacked and flush-left instead, like a title + subtitle. The one
     exception is a real secondary control (e.g. Paid Media's Service
     line mix metric toggle), which keeps the old side-by-side row via
     .sectionhead.with-toggle below. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.sectionhead.with-toggle {
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.sectionhead h3 {
  font-family: "effra", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  margin: 0;
}

.sectionhead .hint {
  /* Client feedback (2026-07-24): stacking it flush-left under the title
     wasn't enough on its own, it still read as a low-contrast caption
     easy to skip past. Scoped to .sectionhead specifically (not the
     bare .hint class, which is also used for unrelated admin form
     helper text elsewhere) so only these section subheads get bolder. */
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.hint {
  font-size: 12px;
  color: var(--muted);
}

.tag {
  font-family: "effra", sans-serif;
  font-weight: 700;
  font-size: 11px;
  line-height: 20px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.cardlabel {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.section-intro {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 14px;
  max-width: 640px;
}

.metric-toggle {
  display: flex;
  gap: 4px;
  background: var(--line-soft);
  border-radius: 6px;
  padding: 3px;
}

.toggle-btn {
  font-family: "effra", sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 12px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.toggle-btn.active {
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.barlist {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.barrow {
  display: grid;
  grid-template-columns: 170px 1fr 150px;
  align-items: center;
  gap: 12px;
}

.barlabel {
  font-size: 12.5px;
  font-weight: 600;
}

.bartrack {
  background: var(--line-soft);
  border-radius: 5px;
  height: 14px;
  overflow: hidden;
}

.barfill {
  height: 100%;
  background: var(--accent);
  border-radius: 5px;
  transition: width 0.25s ease;
}

.barvalue {
  font-size: 11.5px;
  color: var(--muted);
  text-align: right;
}

.kpisource {
  font-size: 11px;
  color: var(--muted);
  overflow-wrap: break-word;
}

.info-tip {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  margin-left: 5px;
}

.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--muted);
  color: var(--muted);
  font-size: 10px;
  font-style: italic;
  font-weight: 600;
  cursor: help;
  line-height: 1;
}

.info-tip-content {
  /* Client feedback (2026-07-28): a header-cell tooltip (e.g. Impressions
     on Paid Media) rendered its whole body text in caps, not just the
     intentionally-uppercase label. Root cause: .card table thead th sets
     text-transform: uppercase, an inherited property, and nothing here
     reset it, so a tooltip nested inside a <th> picked it up. Row-cell
     tooltips (channel names, funnel Goal) were never affected, only
     ones living inside a table header. text-transform: none here fixes
     the body text; the <strong> label below still renders uppercase via
     its own explicit rule, unaffected since a child's own declaration
     always wins over a parent's. */
  text-transform: none;
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 10;
  width: 190px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-size: 12px;
  font-weight: 400;
  text-align: left;
  white-space: normal;
}

.info-tip-content strong {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 6px;
}

.info-tip-content p {
  margin: 0 0 10px;
  line-height: 1.4;
}

.info-tip-content ul {
  margin: 0;
  padding-left: 16px;
}

.info-tip-content li {
  margin-bottom: 2px;
}

.info-tip:hover .info-tip-content,
.info-tip:focus .info-tip-content,
.info-tip:focus-within .info-tip-content {
  display: block;
}

.card table thead th {
  font-family: "effra", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.insight-card {
  position: relative;
  background: #efe9df;
  border-color: var(--line);
  border-left: 4px solid var(--accent);
  padding: 22px 26px 24px;
}

.insight-card .cardlabel {
  margin-bottom: 16px;
}

.insight-card .tag {
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.12em;
  color: var(--accent);
}

/* Headline/body/actions/edit-btn are scoped to .card (not .insight-card
   specifically) since the same insight_card macro renders both the tan
   "takeaway" skin (Paid Media, Social Media, About This Report) and the
   plain skin (Quarter at a Glance, Web Strategy), see card_style param
   (2026-07-20). Typography must match regardless of which background the
   content sits on. */
.card .headline {
  font-family: "effra", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.35;
  margin: 0 0 14px;
  padding-right: 60px;
}

.card .body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
  white-space: pre-line;
}

.card .actions {
  border-top: 1px solid var(--line);
  margin-top: 18px;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card .action {
  font-size: 14.5px;
  line-height: 1.5;
  display: flex;
  gap: 10px;
  margin: 0;
}

.card .action .arrow {
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
}

.card .edit-btn {
  position: absolute;
  top: 18px;
  right: 22px;
  font-size: 11px;
  color: var(--accent);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
}

.hamburger {
  display: none;
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 60;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
}

.hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background: var(--ink);
}

.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 40;
}

@media (max-width: 1024px) {
  .kpirow.funnelrow { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .app-shell { grid-template-columns: 1fr; }

  .hamburger { display: flex; }

  .sidenav {
    position: fixed;
    inset: 0 auto 0 0;
    width: 260px;
    z-index: 50;
    padding-top: 64px;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
    overflow-y: auto;
  }

  .sidenav.open { transform: translateX(0); }

  .nav-backdrop.open { display: block; }

  .content { padding-top: 68px; }

  .kpirow { grid-template-columns: 1fr; }
  .kpirow.funnelrow { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }

  .barrow {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .barvalue { text-align: left; }
}