/* InnerWarden theme for Metabase (bi.innerwarden.com).
   Injected by the iw-bi-theme nginx in front of Metabase; Metabase itself is
   untouched, so every function keeps working. Rules apply only while
   <html> carries the iw-theme class (theme.js sets it; ?iw-theme=off turns
   it off for this browser, ?iw-theme=on turns it back on).
   Palette and type follow the site: ink #0E0F11, sky #0369A1, slate text,
   Space Grotesk for text, JetBrains Mono for numbers in code. */

@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(/iw-theme/fonts/SpaceGrotesk-1.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(/iw-theme/fonts/SpaceGrotesk-2.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url(/iw-theme/fonts/JetBrainsMono-13.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url(/iw-theme/fonts/JetBrainsMono-14.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Tokens: Metabase's own variables, set to the site palette ---------- */
:root.iw-theme {
  --iw-ink: #0e0f11;
  --iw-text: #0f172a;
  --iw-text-2: #475569;
  --iw-text-3: #64748b;
  --iw-sky: #0369a1;
  --iw-sky-600: #0284c7;
  --iw-line: #e2e8f0;
  --iw-line-2: #cbd5e1;
  --iw-page: #f8fafc;
  --iw-card: #ffffff;
  --iw-green: #059669;
  --iw-red: #e11d48;
  --iw-amber: #d97706;
  --iw-violet: #7c3aed;
  --iw-radius: 14px;
  --iw-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px -20px rgba(3, 105, 161, 0.28);
  --iw-shadow-hover: 0 1px 2px rgba(15, 23, 42, 0.06), 0 18px 40px -18px rgba(3, 105, 161, 0.38);

  --mb-default-font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --mb-color-core-brand: var(--iw-sky);
  --mb-color-core-brand-hover: color-mix(in srgb, var(--iw-sky), black 14%);
  --mb-color-text-brand: var(--iw-sky);
  --mb-color-text-brand-hover: color-mix(in srgb, var(--iw-sky), black 22%);
  --mb-color-text-brand-strong: color-mix(in srgb, var(--iw-sky), black 22%);
  --mb-color-text-brand-strong-hover: color-mix(in srgb, var(--iw-sky), black 34%);
  --mb-color-text-hover: color-mix(in srgb, var(--iw-sky), black 22%);
  --mb-color-icon-brand: var(--iw-sky);
  --mb-color-border-brand: color-mix(in srgb, var(--iw-sky), white 82%);
  --mb-color-background-brand: color-mix(in srgb, var(--iw-sky), white 92%);
  --mb-color-background-hover: color-mix(in srgb, var(--iw-sky) 6%, transparent);
  --mb-color-background-highlight: color-mix(in srgb, var(--iw-sky) 6%, transparent);
  --mb-color-background-selected: color-mix(in srgb, var(--iw-sky) 14%, transparent);
  --mb-color-background_page-highlighted: color-mix(in srgb, var(--iw-sky) 6%, transparent);
  --mb-color-background_surface-hover: color-mix(in srgb, var(--iw-sky) 6%, transparent);
  --mb-color-background_surface-selected: color-mix(in srgb, var(--iw-sky) 14%, transparent);
  --mb-color-background_surface-brand-subtle: color-mix(in srgb, var(--iw-sky) 9%, transparent);
  --mb-color-background_surface-brand-subtle-pressed: color-mix(in srgb, var(--iw-sky) 40%, transparent);
  --mb-color-background_surface-brand-strong: color-mix(in srgb, var(--iw-sky), black 22%);
  --mb-color-bg-collection-browser-expand-button-hover: var(--iw-sky);
  --mb-color-focus: color-mix(in srgb, var(--iw-sky), white 75%);
  --mb-color-input-focus: color-mix(in srgb, var(--iw-sky), white 75%);

  --mb-color-text-primary: var(--iw-text);
  --mb-color-text-selected: var(--iw-text);
  --mb-color-text-secondary: var(--iw-text-2);
  --mb-color-text-secondary-opaque: var(--iw-text-2);
  --mb-color-text-tertiary: var(--iw-text-3);
  --mb-color-icon-primary: var(--iw-text);
  --mb-color-icon-secondary: var(--iw-text-2);

  --mb-color-border: var(--iw-line);
  --mb-color-border-neutral: var(--iw-line);
  --mb-color-border-strong: var(--iw-line-2);
  --mb-color-border-neutral-strong: var(--iw-line-2);
  --mb-color-table-border: var(--iw-line);

  --mb-color-background-secondary: var(--iw-page);
  --mb-color-background_page-secondary: var(--iw-page);
  --mb-color-accent-gray-light: var(--iw-page);
  --mb-color-bg-dashboard: var(--iw-page);
  --mb-color-bg-dashboard-card: var(--iw-card);

  --mb-color-feedback-positive: var(--iw-green);
  --mb-color-feedback-positive-strong: color-mix(in srgb, var(--iw-green), black 18%);
  --mb-color-summarize: var(--iw-green);
  --mb-color-core-summarize: var(--iw-green);
  --mb-color-feedback-negative: var(--iw-red);
  --mb-color-feedback-negative-strong: color-mix(in srgb, var(--iw-red), black 14%);
  --mb-color-feedback-warning: var(--iw-amber);
  --mb-color-filter: var(--iw-violet);
  --mb-color-core-filter: var(--iw-violet);

  --mb-color-accent0: #0369a1;  --mb-color-accent0-light: #7dd3fc;  --mb-color-accent0-dark: #075985;
  --mb-color-accent1: #059669;  --mb-color-accent1-light: #6ee7b7;  --mb-color-accent1-dark: #047857;
  --mb-color-accent2: #7c3aed;  --mb-color-accent2-light: #c4b5fd;  --mb-color-accent2-dark: #6d28d9;
  --mb-color-accent3: #e11d48;  --mb-color-accent3-light: #fda4af;  --mb-color-accent3-dark: #be123c;
  --mb-color-accent4: #d97706;  --mb-color-accent4-light: #fcd34d;  --mb-color-accent4-dark: #b45309;
  --mb-color-accent5: #0ea5e9;  --mb-color-accent5-light: #bae6fd;  --mb-color-accent5-dark: #0284c7;
  --mb-color-accent6: #14b8a6;  --mb-color-accent6-light: #99f6e4;  --mb-color-accent6-dark: #0f766e;
  --mb-color-accent7: #64748b;  --mb-color-accent7-light: #cbd5e1;  --mb-color-accent7-dark: #334155;

  --mb-color-tooltip-background: var(--iw-ink);
  --mb-color-background-primary-inverse: var(--iw-ink);
  --mb-color-background_surface-primary-inverse: var(--iw-ink);
}

:root.iw-theme body { font-family: var(--mb-default-font-family); font-feature-settings: "ss01" on; }
:root.iw-theme ::selection { background: color-mix(in srgb, var(--iw-sky) 22%, transparent); }

/* ---------- App bar: white, hairline, our mark ---------- */
:root.iw-theme [data-testid="app-bar"] {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--iw-line);
  box-shadow: none;
}
:root.iw-theme [data-testid="main-logo"] { opacity: 0; }
:root.iw-theme [data-testid="main-logo-link"] {
  background: url(/iw-theme/mark.svg) center / 30px 30px no-repeat;
  border-radius: 9px;
}
:root.iw-theme [data-testid="main-logo-link"] { position: relative; }

/* ---------- Left navigation: quieter, without the clutter we never use ---------- */
:root.iw-theme [data-testid="main-navbar-root"] {
  background: #fff;
  border-right: 1px solid var(--iw-line);
}
:root.iw-theme [data-testid="main-navbar-root"] a[href="/getting-started"],
:root.iw-theme [data-testid="main-navbar-root"] a[href^="/browse/metrics"],
:root.iw-theme [data-testid="main-navbar-root"] a[href^="/browse/models"],
:root.iw-theme [data-testid^="upsell-"],
:root.iw-theme [data-testid="whats-new-notification"] { display: none !important; }

/* ---------- Dashboard canvas ---------- */
:root.iw-theme [data-testid="dashboard-parameters-and-cards"] { background: var(--iw-page); }
:root.iw-theme [data-testid="dashboard-name-heading"] {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--iw-ink);
}

/* The header scrolls away except its tab row, which stays pinned: theme.js
   sets --iw-title-h to the height of the title row above the tabs. */
:root.iw-theme [data-testid="dashboard-header-container"] {
  position: sticky;
  top: calc(-1 * var(--iw-title-h, 0px));
  z-index: 4;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--iw-line);
}
/* Metabase sizes the dashboard box to one screen (min-height: 100%; height:
   1px) and lets the cards overflow it, which pushed the sticky header out after
   the first screen. In view mode let the box grow with its content; while
   editing, or with a sidebar open, Metabase scrolls the cards inside a
   full-height box, so it keeps its own sizing. */
:root.iw-theme:not(.iw-phone):not(.iw-editing) [data-testid="dashboard"]:not(:has([data-testid="dashboard-parameters-and-cards"] ~ aside)) {
  height: auto !important;
}
/* Metabase pins its filter bar at the top of the same scroller: put it under
   our pinned tab row (theme.js measures it). */
:root.iw-theme [data-testid="dashboard-parameters-widget-container"] {
  top: var(--iw-pin-h, 0px);
  background: var(--iw-page);
}
/* A dashboard without tabs has nothing worth pinning. */
:root.iw-theme:not(.iw-has-tabs) [data-testid="dashboard-header-container"] { position: relative; top: auto; }

/* Tabs: every tab visible (they wrap instead of scrolling out of sight), as pills. */
:root.iw-theme [data-testid="fixed-width-dashboard-tabs"] [role="tablist"],
:root.iw-theme [data-testid="fixed-width-dashboard-tabs"] [role="tablist"] > div {
  overflow: visible !important;
  flex-wrap: wrap !important;
  row-gap: 6px;
  column-gap: 4px;
  max-width: 100%;
}
:root.iw-theme [data-testid="fixed-width-dashboard-tabs"] { padding-bottom: 10px; }
:root.iw-theme [data-testid="fixed-width-dashboard-tabs"] [role="tablist"] button[aria-label^="scroll tabs"] { display: none !important; }
:root.iw-theme [role="tablist"] [role="tab"] {
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  padding: 5px 12px !important;
  margin: 0 !important;
  color: var(--iw-text-2) !important;
  background: transparent !important;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
:root.iw-theme [role="tablist"] [role="tab"]::after,
:root.iw-theme [role="tablist"] [role="tab"]::before { display: none !important; }
:root.iw-theme [role="tablist"] [role="tab"]:hover {
  background: #f1f5f9 !important;
  color: var(--iw-text) !important;
}
:root.iw-theme [role="tablist"] [role="tab"][aria-selected="true"] {
  background: var(--iw-ink) !important;
  border-color: var(--iw-ink) !important;
  color: #f8fafc !important;
}
:root.iw-theme [role="tablist"] [role="tab"] [data-testid="tab-button-input-wrapper"],
:root.iw-theme [role="tablist"] [role="tab"] [data-testid="tab-button-input-wrapper"] * {
  color: inherit !important;
  border: 0 !important;
  font-family: var(--mb-default-font-family) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  letter-spacing: 0 !important;
}
/* The first tab is the home: mark it. */
:root.iw-theme [role="tablist"] [role="tab"]:first-of-type [data-testid="tab-button-input-wrapper"] span::before { content: ""; }

/* ---------- Cards ---------- */
:root.iw-theme [data-testid="dashcard"] {
  border: 1px solid var(--iw-line) !important;
  border-radius: var(--iw-radius) !important;
  box-shadow: var(--iw-shadow) !important;
  background: var(--iw-card);
  transition: box-shadow 160ms ease, border-color 160ms ease;
}
:root.iw-theme [data-testid="dashcard"]:hover {
  box-shadow: var(--iw-shadow-hover) !important;
  border-color: var(--iw-line-2) !important;
}
:root.iw-theme [data-testid="legend-caption-title"] {
  font-weight: 600 !important;
  font-size: 14.5px !important;
  letter-spacing: -0.005em;
  color: var(--iw-text) !important;
}

/* Section headings on the dashboard read like the site's kickers. */
:root.iw-theme [data-testid="saved-dashboard-heading-content"] {
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: var(--iw-sky) !important;
  display: flex;
  align-items: center;
  gap: 10px;
}
:root.iw-theme [data-testid="saved-dashboard-heading-content"]::before {
  content: "";
  width: 2.4em;
  height: 1px;
  background: currentColor;
  flex: none;
}
/* Heading cards have no box. */
:root.iw-theme [data-testid="dashcard"]:has([data-testid="saved-dashboard-heading-content"]) {
  border-color: transparent !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Big numbers. */
:root.iw-theme [data-testid="scalar-value"] {
  font-family: var(--mb-default-font-family) !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  font-variant-numeric: tabular-nums;
  color: var(--iw-ink) !important;
}
:root.iw-theme [data-testid="scalar-previous-value"],
:root.iw-theme [data-testid="scalar-period"] { color: var(--iw-text-3) !important; }

/* Tables: calmer header in normal case (uppercase with tracking cut "Days
   late" to "DAYS LA..."), mono numbers. */
:root.iw-theme [data-testid="table-header"] {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0;
  text-transform: none;
  color: var(--iw-text-3) !important;
}
:root.iw-theme [data-testid="table-scroll-container"] [data-testid="cell-data"] { font-variant-numeric: tabular-nums; }

/* Buttons: the default (brand) filled button is ink like the site. Coloured
   buttons keep their colour (a delete confirm stays red, in the site's red),
   and the edit bar keeps its own white buttons. */
:root.iw-theme .mb-mantine-Button-root {
  --mantine-color-core-brand-filled: var(--iw-ink);
  --mantine-color-core-brand-filled-hover: #1f2329;
  --mantine-color-feedback-negative-filled: var(--iw-red);
  --mantine-color-feedback-negative-filled-hover: color-mix(in srgb, var(--iw-red), black 14%);
}

/* ---------- Login ---------- */
:root.iw-theme [data-testid="login-page"] {
  background:
    radial-gradient(1200px 520px at 50% -10%, rgba(3, 105, 161, 0.10), transparent 70%),
    linear-gradient(#ffffff, #f8fafc);
}
:root.iw-theme [data-testid="login-page"] > div:first-child > svg { display: none; }
:root.iw-theme [data-testid="login-page"] [data-testid="main-logo"] { opacity: 0; }
:root.iw-theme [data-testid="login-page"] .iw-login-brand { display: flex; }

/* The small brand line theme.js adds above the login form. */
.iw-login-brand {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 auto 18px;
}
.iw-login-brand img { width: 44px; height: 44px; border-radius: 12px; }
.iw-login-brand span {
  font: 700 16px/1 "Space Grotesk", sans-serif;
  letter-spacing: 0.14em;
}
.iw-login-brand span b { color: #6b7280; font-weight: 700; }
.iw-login-brand span i { color: #0e0f11; font-style: normal; }
.iw-login-brand small {
  display: block;
  margin-top: 6px;
  font: 600 11px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.18em;
  color: #0369a1;
  text-transform: uppercase;
}

/* ---------- Phones and small tablets ----------
   On a narrow screen 14 tabs wrapped into four or five rows of pills, and
   the sticky header with them covered half the screen. Here the header stays
   sticky but is one compact band: a smaller title and the tabs as a single
   row you swipe sideways, the selected one scrolled into view by theme.js. */
@media (max-width: 820px) {
  :root.iw-theme [data-testid="dashboard-header-container"] {
    backdrop-filter: none;
    background: #fff;
    box-shadow: 0 1px 0 var(--iw-line), 0 6px 14px -12px rgba(15, 23, 42, 0.25);
  }
  :root.iw-theme [data-testid="fixed-width-dashboard-header"] {
    padding-top: 6px !important;
    padding-bottom: 2px !important;
    min-height: 0 !important;
  }
  :root.iw-theme [data-testid="dashboard-name-heading"],
  :root.iw-theme [data-testid="dashboard-name-heading"] * {
    font-size: 17px !important;
    line-height: 1.25 !important;
  }
  :root.iw-theme [data-testid="fixed-width-dashboard-tabs"] { padding-bottom: 6px; }
  :root.iw-theme [data-testid="fixed-width-dashboard-tabs"] [role="tablist"] { overflow: hidden !important; }
  :root.iw-theme [data-testid="fixed-width-dashboard-tabs"] [role="tablist"] > div {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding: 2px 16px 2px 2px;
    column-gap: 6px;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
            mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  :root.iw-theme [data-testid="fixed-width-dashboard-tabs"] [role="tablist"] > div::-webkit-scrollbar { display: none; }
  :root.iw-theme [role="tablist"] [role="tab"] {
    flex: none !important;
    scroll-snap-align: start;
    padding: 6px 12px !important;
    background: #f1f5f9 !important;
  }
  :root.iw-theme [role="tablist"] [role="tab"][aria-selected="true"] { background: var(--iw-ink) !important; }
  :root.iw-theme [role="tablist"] [role="tab"] [data-testid="tab-button-input-wrapper"],
  :root.iw-theme [role="tablist"] [role="tab"] [data-testid="tab-button-input-wrapper"] * {
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  /* Cards: lighter frame, room for the content. */
  :root.iw-theme [data-testid="dashcard"] {
    border-radius: 12px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
  }
  :root.iw-theme [data-testid="legend-caption-title"] { font-size: 14px !important; }
  :root.iw-theme [data-testid="saved-dashboard-heading-content"] { font-size: 11px !important; letter-spacing: 0.14em !important; }
  :root.iw-theme [data-testid="scalar-value"] { font-size: 30px !important; line-height: 1.1 !important; }

  /* App bar: just the mark and the search. */
  :root.iw-theme [data-testid="app-bar"] { backdrop-filter: none; background: #fff; }
}

/* ---------- Phones and narrow tablets (Metabase's own mobile layout) ----------
   Metabase stacks every card at a fixed height by type on a phone: a single
   number took half a screen, text was cut, and tables scrolled inside
   themselves with the useful column off screen. Here the grid becomes a CSS
   grid in natural order (theme.js reads each card's place and tags its kind):
   numbers two to a row, headings, text and lists as tall as their content,
   charts at a readable fixed height, and each table becomes a list of rows
   built from the data Metabase already fetched (capture.js, theme.js). The tab
   strip is replaced by the section menu theme.js adds at the bottom.
   Metabase switches to that layout while its grid is 753px wide or less
   (not the screen), so theme.js marks the page iw-phone from the grid's own
   width, and iw-wide when there is room for three numbers to a row. */
:root.iw-theme.iw-phone [data-testid="breadcrumbs"],
:root.iw-theme.iw-phone [data-testid="app-bar"] div:has(> div > a[href*="/collection/"]),
:root.iw-theme.iw-phone [data-testid="revision-history-button"],
:root.iw-theme.iw-phone [data-testid="last-edited-info-loading-text"] { display: none !important; }

/* Header: the title and the "..." menu only. */
:root.iw-theme.iw-phone:not(.iw-touchwide) [data-testid="dashboard-header-row-button"]:not(:has([aria-label^="Move, trash"])) { display: none !important; }
:root.iw-theme.iw-phone:not(.iw-touchwide) [data-testid="dashboard-header-container"] div:has(> [data-testid="dashboard-header-row-button"]) {
  min-height: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: visible !important;
}
:root.iw-theme.iw-phone:not(.iw-touchwide) [data-testid="dashboard-header-container"] button[aria-label^="Move, trash"] {
  position: absolute !important;
  top: 8px;
  right: 10px;
  z-index: 5;
}
:root.iw-theme.iw-phone [data-testid="fixed-width-dashboard-tabs"] { display: none !important; }
:root.iw-theme.iw-phone:not(.iw-touchwide) [data-testid="fixed-width-dashboard-header"] > div:has([data-testid="dashboard-header-row-button"]) {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: 0 !important;
  overflow: visible !important;
}

:root.iw-theme.iw-phone [data-testid="fixed-width-dashboard-header"] { padding: 14px 56px 6px 16px !important; }
:root.iw-theme.iw-phone [data-testid="fixed-width-dashboard-header"][data-iw-section] {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}
:root.iw-theme.iw-phone [data-testid="fixed-width-dashboard-header"][data-iw-section]::before { order: -2; }
:root.iw-theme.iw-phone [data-testid="fixed-width-dashboard-header"][data-iw-section]::after { order: -1; }
:root.iw-theme.iw-phone [data-testid="dashboard-header-container"] {
  position: relative !important;
  top: 0 !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
  background: transparent !important;
}
:root.iw-theme.iw-phone [data-testid="fixed-width-dashboard-header"][data-iw-section] > div:first-child { display: none !important; }
:root.iw-theme.iw-phone [data-testid="fixed-width-dashboard-header"][data-iw-section]::before {
  content: attr(data-iw-dash);
  display: block;
  margin-bottom: 4px;
  font: 600 11px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--iw-sky);
}
:root.iw-theme.iw-phone [data-testid="fixed-width-dashboard-header"][data-iw-section]::after {
  content: attr(data-iw-section);
  display: block;
  font: 700 24px/1.2 "Space Grotesk", system-ui, sans-serif;
  letter-spacing: -0.02em;
  color: var(--iw-ink);
}
/* The wrapper around the grid keeps its padding: Metabase measures it to pick
   its phone or desktop layout, so changing its width here would flip the
   layout back and forth on a tablet. */

/* Grid. */
:root.iw-theme.iw-phone .react-grid-layout {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  height: auto !important;
  padding: 12px 12px 104px !important;
}
:root.iw-theme.iw-phone .react-grid-layout > .react-grid-item {
  position: relative !important;
  transform: none !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  height: 300px !important;
  grid-column: 1 / -1;
  margin: 0 !important;
  transition: none !important;
}
/* Metabase floats the card over its grid cell (position: absolute); here it
   fills the cell, so a cell sized by its content cannot collapse to 0. */
:root.iw-theme.iw-phone .react-grid-layout > .react-grid-item > [data-testid="dashcard"] {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
}

/* Numbers: two to a row; the last of an odd run takes the full row. */
:root.iw-theme.iw-phone .react-grid-layout > .react-grid-item.iw-k-scalar {
  grid-column: span 1;
  height: 108px !important;
}
:root.iw-theme.iw-phone .react-grid-layout > .react-grid-item.iw-k-scalar.iw-solo { grid-column: 1 / -1; }
:root.iw-theme.iw-phone.iw-wide .react-grid-layout { grid-template-columns: repeat(6, minmax(0, 1fr)); }
:root.iw-theme.iw-phone.iw-wide .react-grid-layout > .react-grid-item.iw-k-scalar { grid-column: span 2; }
:root.iw-theme.iw-phone.iw-wide .react-grid-layout > .react-grid-item.iw-k-scalar.iw-half { grid-column: span 3; }
:root.iw-theme.iw-phone.iw-wide .react-grid-layout > .react-grid-item.iw-k-scalar.iw-solo { grid-column: 1 / -1; }
:root.iw-theme.iw-phone .iw-k-scalar [data-testid="scalar-value"] { font-size: 27px !important; line-height: 1.1 !important; }
:root.iw-theme.iw-phone .iw-k-scalar [data-testid="legend-caption-title"] {
  font-size: 12.5px !important;
  line-height: 1.25 !important;
  color: var(--iw-text-2) !important;
}

/* Headings, text and lists: as tall as their content. */
:root.iw-theme.iw-phone .react-grid-layout > .react-grid-item.iw-k-heading,
:root.iw-theme.iw-phone .react-grid-layout > .react-grid-item.iw-k-text,
:root.iw-theme.iw-phone .react-grid-layout > .react-grid-item.iw-k-list { height: auto !important; }
:root.iw-theme.iw-phone .react-grid-layout > .react-grid-item.iw-k-heading > [data-testid="dashcard"],
:root.iw-theme.iw-phone .react-grid-layout > .react-grid-item.iw-k-text > [data-testid="dashcard"],
:root.iw-theme.iw-phone .react-grid-layout > .react-grid-item.iw-k-list > [data-testid="dashcard"] { height: auto !important; }
:root.iw-theme.iw-phone .iw-k-heading [data-testid="dashcard"] *,
:root.iw-theme.iw-phone .iw-k-text [data-testid="dashcard"] * {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
:root.iw-theme.iw-phone .iw-k-list [data-testid="visualization-root"] { height: auto !important; min-height: 0 !important; }
:root.iw-theme.iw-phone .react-grid-layout > .react-grid-item.iw-k-heading { margin-top: 12px !important; }
:root.iw-theme.iw-phone .react-grid-layout > .react-grid-item.iw-k-heading.iw-first { margin-top: 0 !important; }

/* A table that could not become a list keeps Metabase's table, taller. */
:root.iw-theme.iw-phone .react-grid-layout > .react-grid-item.iw-k-table { height: 440px !important; }
/* A table whose rows have not arrived yet: a short placeholder, so the page
   does not jump by a screen when its list replaces it. */
:root.iw-theme.iw-phone .react-grid-layout > .react-grid-item.iw-k-pending { height: 180px !important; }

/* Long text: the first lines, then "Read more" (theme.js). */
:root.iw-theme.iw-phone .iw-k-text.iw-clamp [data-testid="visualization-root"] {
  max-height: 9.2em !important;
  overflow: hidden !important;
  -webkit-mask-image: linear-gradient(#000 65%, transparent);
          mask-image: linear-gradient(#000 65%, transparent);
}

/* Card titles on a phone: whole, on as many lines as they need. */
:root.iw-theme.iw-phone .iw-k-list [data-testid="legend-caption-title"],
:root.iw-theme.iw-phone .iw-k-table [data-testid="legend-caption-title"],
:root.iw-theme.iw-phone .iw-k-chart [data-testid="legend-caption-title"] {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.3 !important;
}

/* ---------- Tables as lists (phones; theme.js builds them) ---------- */
:root.iw-theme .iw-listed [data-testid="table-root"],
:root.iw-theme .iw-listed [data-testid="table-footer"],
:root.iw-theme .iw-listed [data-testid="chart-container"] { display: none !important; }
.iw-list {
  list-style: none;
  margin: 2px 0 0;
  padding: 0 14px;
  font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
  color: #0f172a;
}
.iw-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid #e2e8f0;
}
.iw-row:first-child { border-top: 0; padding-top: 6px; }
.iw-main { flex: 1; min-width: 0; }
.iw-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 6px; }
.iw-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 4px 7px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #334155;
  font: 600 11.5px/1.1 "JetBrains Mono", ui-monospace, monospace;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.iw-chip i { font-style: normal; font-weight: 500; color: #64748b; }
.iw-tone-red { background: #fff1f2; color: #be123c; }
.iw-tone-amber { background: #fffbeb; color: #b45309; }
.iw-tone-green { background: #ecfdf5; color: #047857; }
.iw-tone-blue { background: #f0f9ff; color: #0369a1; }
.iw-tone-violet { background: #f5f3ff; color: #6d28d9; }
.iw-tone-gray { background: #f1f5f9; color: #475569; }
.iw-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: #0f172a;
  overflow-wrap: anywhere;
}
.iw-title a.iw-title-link { color: inherit; text-decoration: none; }
.iw-title a.iw-title-link .iw-ext { margin-left: 5px; vertical-align: -1px; color: #0369a1; }
.iw-sub {
  margin-top: 3px;
  font-size: 13.5px;
  line-height: 1.4;
  color: #475569;
  overflow-wrap: anywhere;
}
.iw-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 14px;
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.35;
  color: #334155;
}
.iw-meta div { min-width: 0; overflow-wrap: anywhere; }
.iw-meta dt { display: inline; margin-right: 5px; color: #64748b; }
.iw-meta dd { display: inline; margin: 0; }
.iw-num {
  flex: none;
  min-width: 2.5ch;
  padding-top: 2px;
  text-align: right;
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: #0e0f11;
}
.iw-num small { display: block; margin-top: 3px; font: 500 10.5px/1.1 "JetBrains Mono", monospace; letter-spacing: 0.04em; color: #64748b; }
.iw-more {
  display: block;
  width: calc(100% - 28px);
  min-height: 44px;
  margin: 2px 14px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  color: #0369a1;
  font: 600 14px/1 "Space Grotesk", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
.iw-list + .iw-end { height: 10px; }
.iw-empty { margin: 0; padding: 6px 14px 16px; font-size: 13.5px; color: #64748b; }
.iw-bars { list-style: none; margin: 4px 0 0; padding: 0 14px; font-family: "Space Grotesk", system-ui, -apple-system, sans-serif; }
.iw-bar-row { padding: 7px 0; }
.iw-bar-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13.5px; line-height: 1.3; }
.iw-bar-label { min-width: 0; color: #0f172a; overflow-wrap: anywhere; }
.iw-bar-val { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; color: #0e0f11; }
.iw-bar { height: 6px; margin-top: 5px; border-radius: 6px; background: #f1f5f9; overflow: hidden; }
.iw-bar i { display: block; height: 100%; border-radius: 6px; background: #0369a1; }

/* ---------- Number tiles, every width ----------
   The whole title on up to two lines instead of "Paying Pr...". The label
   takes the room the caption row has, the menu keeps its place. */
:root.iw-theme .iw-k-scalar [data-testid="legend-label"] { flex: 1 1 auto !important; min-width: 0 !important; }
:root.iw-theme .iw-k-scalar [data-testid="legend-caption-title"] {
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.25 !important;
  min-height: 2.5em;
}

/* ---------- Number tiles that ask for attention (theme.js, by card id) ---------- */
:root.iw-theme .iw-alert-red [data-testid="dashcard"]::before,
:root.iw-theme .iw-alert-amber [data-testid="dashcard"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  z-index: 1;
}
:root.iw-theme .iw-alert-red [data-testid="dashcard"]::before { background: #e11d48; }
:root.iw-theme .iw-alert-amber [data-testid="dashcard"]::before { background: #d97706; }
:root.iw-theme .iw-alert-red [data-testid="scalar-value"] { color: #be123c !important; }
:root.iw-theme .iw-alert-amber [data-testid="scalar-value"] { color: #b45309 !important; }
/* A version is text, not a quantity. */
:root.iw-theme .iw-scalar-text [data-testid="scalar-value"] {
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 20px !important;
  letter-spacing: 0 !important;
}

/* ---------- Tables (Metabase's own, every width) ---------- */
:root.iw-theme [data-testid="table-body"] [data-testid="cell-data"] { font-weight: 500; }

/* ---------- Text cards on a phone: Read more ---------- */
.iw-readmore { display: none; }
:root.iw-theme.iw-phone .iw-readmore {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-top: 1px solid #eef2f6;
  background: transparent;
  text-align: left;
  color: #0369a1;
  font: 600 14px/1 "Space Grotesk", system-ui, sans-serif;
}

/* ---------- List rows: details, paging, figures ---------- */
.iw-row.iw-has-more { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.iw-row.iw-has-more:active { background: color-mix(in srgb, #0369a1 5%, transparent); }
.iw-row:focus-visible { outline: 2px solid #0369a1; outline-offset: 2px; border-radius: 6px; }
.iw-chev { flex: none; margin-top: 3px; color: #94a3b8; transition: transform 160ms ease; }
.iw-row-open .iw-chev { transform: rotate(180deg); }
.iw-details {
  display: grid;
  gap: 8px;
  margin: 10px 0 2px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f8fafc;
}
.iw-details[hidden] { display: none; }
.iw-details dt {
  font: 500 10.5px/1.2 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}
.iw-details dd { margin: 2px 0 0; font-size: 14px; line-height: 1.45; color: #0f172a; white-space: pre-wrap; overflow-wrap: anywhere; }
.iw-details a:not(.iw-src), .iw-meta a:not(.iw-src) { color: #0369a1; text-decoration: underline; text-underline-offset: 3px; }
.iw-pager { display: flex; gap: 8px; margin: 2px 14px 4px; }
.iw-pager .iw-more {
  flex: 1;
  width: auto;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
}
.iw-pager .iw-more span { font-weight: 500; color: #64748b; }
.iw-less {
  flex: none;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  color: #475569;
  font: 600 14px/1 "Space Grotesk", system-ui, sans-serif;
}
.iw-open-q {
  display: block;
  padding: 10px 14px 14px;
  text-align: right;
  font: 600 12.5px/1 "Space Grotesk", system-ui, sans-serif;
  color: #0369a1;
  text-decoration: none;
}
.iw-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
  margin: 4px 0 0;
  padding: 0 14px;
}
.iw-stats dt { font-size: 12px; line-height: 1.3; color: #475569; }
.iw-stats dd { margin: 3px 0 0; font-size: 22px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; color: #0e0f11; overflow-wrap: anywhere; }

/* ---------- Chips that are categories, sources, folded rows ---------- */
.iw-chip.iw-chip-cat { background: transparent; box-shadow: inset 0 0 0 1px #e2e8f0; color: #475569; }
.iw-src {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  color: #0369a1;
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.iw-src .iw-ext { flex: none; }
.iw-pager .iw-fold { color: #047857; }

/* ---------- On this page: cards as a compact list ---------- */
.iw-toc { display: grid; gap: 6px; }
.iw-sheet .iw-toc button.iw-jump {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  color: #0f172a;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font: 600 14px/1.2 "Space Grotesk", system-ui, sans-serif;
}

/* ---------- Number tiles on wider screens: the info icon's reserved space
   goes to the title (the icon still shows on hover) ---------- */
:root.iw-theme .iw-k-scalar [data-testid="legend-caption"] > span:has(> .Icon-info) { margin: 0 0 0 2px !important; }
/* A narrow number tile (a squeezed desktop grid) gives its title a third line. */
@container DashboardCard (max-width: 200px) {
  :root.iw-theme .iw-k-scalar [data-testid="legend-caption-title"] { font-size: 12.5px !important; -webkit-line-clamp: 3; }
}

/* ---------- The Section bar steps aside for Metabase's own panels ---------- */
/* Phones: Metabase draws the open nav over the page. */
@media (max-width: 40em) {
  :root.iw-theme:has([data-testid="main-navbar-root"][aria-hidden="false"]) .iw-fab { display: none !important; }
}
/* Wider screens in phone mode: the nav sits beside the grid, its list gets
   room to scroll clear of the bar. */
:root.iw-theme.iw-phone.iw-has-tabs [data-testid="main-navbar-root"] > nav { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important; }
/* A dashboard sidebar (subscriptions, chart explanations) has its own buttons
   at the bottom of the screen. */
:root.iw-theme:has([data-testid="dashboard-parameters-and-cards"] ~ aside) .iw-fab { display: none !important; }

/* ---------- Small things from the review ---------- */
/* Day counts that need you: red when due within a day or a week late. */
.iw-num.iw-hot { color: #be123c; }
.iw-num.iw-warm { color: #b45309; }
/* Phones: a number tile is all number; its menu lives in the question. */
:root.iw-theme.iw-phone .iw-k-scalar [data-testid="dashcard-menu"] { display: none !important; }
/* Tap targets and small type. */
.iw-sheet button.iw-jump { min-height: 44px !important; }
.iw-open-q { display: flex; align-items: center; justify-content: flex-end; min-height: 44px; padding: 0 14px; }
.iw-num small { font-size: 11.5px; }
.iw-details dt { font-size: 11.5px; }
/* The sheet scrolls on its own; the page behind it stays put. */
:root.iw-open body { overflow: hidden; }
/* Wide screens: the pinned tab row breathes under the app bar, and intro
   text keeps a reading width on a full-width dashboard. */
:root.iw-theme:not(.iw-phone) [data-testid="fixed-width-dashboard-tabs"] { padding-top: 6px; }
:root.iw-theme:not(.iw-phone) .iw-k-text [data-testid="dashcard"] :is(p, ul, ol, blockquote) { max-width: 110ch; }
/* Printing: no floating controls. */
@media print {
  .iw-fab, .iw-sheet, .iw-sheet-backdrop { display: none !important; }
}

/* ---------- Sources status at the top of a phone page (theme.js) ---------- */
.iw-health { display: none; }
:root.iw-theme.iw-phone .iw-health {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  color: #475569;
  font: 500 13px/1.3 "Space Grotesk", system-ui, sans-serif;
}
.iw-health i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #059669; }
.iw-health.iw-health-bad { color: #9f1239; }
.iw-health.iw-health-bad i { background: #e11d48; }
.iw-health span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Section menu (phones) ---------- */
.iw-fab, .iw-sheet, .iw-sheet-backdrop { display: none; }
:root.iw-theme.iw-phone.iw-has-tabs .iw-fab { display: inline-flex; }
.iw-fab {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: calc(56px + env(safe-area-inset-bottom, 0px));
  padding: 0 18px env(safe-area-inset-bottom, 0px);
  border: 0;
  border-top: 1px solid #e2e8f0;
  background: rgba(255, 255, 255, 0.97);
  color: #0e0f11;
  text-align: left;
  font: 600 16px/1.15 "Space Grotesk", system-ui, sans-serif;
  box-shadow: 0 -6px 16px -12px rgba(15, 23, 42, 0.25);
  -webkit-tap-highlight-color: transparent;
}
.iw-fab svg { flex: none; color: #475569; }
.iw-fab span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iw-fab small { display: block; margin-bottom: 3px; font: 600 11.5px/1 "JetBrains Mono", monospace; letter-spacing: 0.14em; color: #0369a1; text-transform: uppercase; }
.iw-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(15, 23, 42, 0.38);
}
.iw-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 71;
  max-height: 88vh;
  overscroll-behavior: contain;
  overflow-y: auto;
  padding: 8px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -12px 40px -16px rgba(15, 23, 42, 0.45);
  font-family: "Space Grotesk", system-ui, sans-serif;
}
.iw-open .iw-sheet, .iw-open .iw-sheet-backdrop { display: block; }
.iw-sheet .iw-grip { width: 40px; height: 4px; border-radius: 4px; background: #cbd5e1; margin: 4px auto 4px; }
.iw-sheet-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 2px 4px; }
.iw-sheet-head strong { font: 700 17px/1 "Space Grotesk", system-ui, sans-serif; color: #0e0f11; }
.iw-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-right: -8px;
  border: 0; border-radius: 12px; background: transparent; color: #475569;
}
.iw-jumps { display: flex; flex-wrap: wrap; gap: 6px; }
.iw-sheet button.iw-jump {
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #f8fafc;
  color: #0f172a;
  font: 600 13.5px/1.1 "Space Grotesk", system-ui, sans-serif;
}
.iw-sheet h4 {
  margin: 14px 4px 6px;
  font: 600 11px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0369a1;
}
.iw-sheet .iw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.iw-sheet button.iw-item {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  text-align: left;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  color: #0f172a;
  font: 600 14.5px/1.2 "Space Grotesk", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
.iw-sheet button.iw-item[aria-current="true"] { background: #0e0f11; border-color: #0e0f11; color: #f8fafc; }