/* ═══════════════════════════════════════════════════════════════════════════
 * TYPOGRAPHY — Mobile-first responsive type scale
 *
 * 10-step scale with CSS custom properties.
 * Mobile-first: base values for <576px, scaled at 576px+ and 768px+.
 *
 * Usage:
 *   class="fs-sm"           → utility class (preferred)
 *   font-size: var(--fs-sm) → custom property in other CSS files
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Custom properties: mobile-first base (< 576px) ── */
:root {
  --fs-2xs: 0.68rem;
  --fs-xs:  0.75rem;
  --fs-sm:  0.83rem;
  --fs-md:  0.92rem;
  --fs-base: 1.02rem;
  --fs-lg:  1.12rem;
  --fs-xl:  1.24rem;
  --fs-2xl: 1.42rem;
  --fs-3xl: 1.66rem;
  --fs-4xl: 1.96rem;
}

/* ── Landscape phones (576px+) ── */
@media (min-width: 576px) {
  :root {
    --fs-2xs: 0.70rem;
    --fs-xs:  0.77rem;
    --fs-sm:  0.85rem;
    --fs-md:  0.95rem;
    --fs-base: 1.04rem;
    --fs-lg:  1.15rem;
    --fs-xl:  1.28rem;
    --fs-2xl: 1.48rem;
    --fs-3xl: 1.74rem;
    --fs-4xl: 2.06rem;
  }
}

/* ── Tablets / desktop (768px+) ── */
@media (min-width: 768px) {
  :root {
    --fs-2xs: 0.72rem;
    --fs-xs:  0.79rem;
    --fs-sm:  0.87rem;
    --fs-md:  0.97rem;
    --fs-base: 1.07rem;
    --fs-lg:  1.18rem;
    --fs-xl:  1.32rem;
    --fs-2xl: 1.54rem;
    --fs-3xl: 1.82rem;
    --fs-4xl: 2.18rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Utility classes
 * ═══════════════════════════════════════════════════════════════════════════ */
.fs-2xs { font-size: var(--fs-2xs) !important; }
.fs-xs  { font-size: var(--fs-xs)  !important; }
.fs-sm  { font-size: var(--fs-sm)  !important; }
.fs-md  { font-size: var(--fs-md)  !important; }
.fs-base { font-size: var(--fs-base) !important; }
.fs-lg  { font-size: var(--fs-lg)  !important; }
.fs-xl  { font-size: var(--fs-xl)  !important; }
.fs-2xl { font-size: var(--fs-2xl) !important; }
.fs-3xl { font-size: var(--fs-3xl) !important; }
.fs-4xl { font-size: var(--fs-4xl) !important; }

/* ── Line-height utilities ── */
.lh-body    { line-height: 1.7; }
.lh-compact { line-height: 1.4; }
.lh-tight   { line-height: 1.2; }

/* ═══════════════════════════════════════════════════════════════════════════
 * Core text roles (mobile-first)
 * ═══════════════════════════════════════════════════════════════════════════ */
h1, .h1 {
  font-size: var(--fs-4xl);
  margin-bottom: 1rem;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

h2, .h2 {
  font-size: var(--fs-3xl);
  margin-top: 2rem;
  margin-bottom: 0.8rem;
  line-height: 1.12;
}

h3, .h3 {
  font-size: var(--fs-2xl);
  margin-top: 1.5rem;
  margin-bottom: 0.6rem;
  line-height: 1.18;
}

h4, .h4 {
  font-size: var(--fs-xl);
  margin-top: 1.2rem;
  margin-bottom: 0.5rem;
  line-height: 1.24;
}

h5, .h5 {
  font-size: var(--fs-lg);
  margin-top: 1rem;
  margin-bottom: 0.4rem;
  line-height: 1.28;
}

h6, .h6 {
  font-size: var(--fs-base);
  margin-top: 0.8rem;
  margin-bottom: 0.3rem;
  line-height: 1.34;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Responsive base elements (mobile-first)
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Base body text */
body {
  font-size: var(--fs-md);
  line-height: 1.7;
}

/* Paragraphs */
p {
  line-height: 1.7;
  margin-bottom: 1rem;
}

/* Lists */
ul, ol {
  line-height: 1.7;
}

/* Tables */
table {
  font-size: var(--fs-md);
}

th, td {
  padding: 0.6rem 0.8rem;
}

/* Callouts */
.callout {
  font-size: var(--fs-base);
}

.callout-title {
  font-size: var(--fs-lg);
  font-weight: 600;
}

/* Code blocks */
pre, code {
  font-size: var(--fs-md);
}

/* Value boxes */
.valuebox .value {
  font-size: var(--fs-4xl);
}

.valuebox .title {
  font-size: var(--fs-lg);
}

/* Navigation */
.navbar-brand {
  font-size: var(--fs-xl);
}

.nav-link {
  font-size: var(--fs-base);
}

/* Footer */
.page-footer {
  font-size: var(--fs-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * INTER FONT — family, rendering, weight hierarchy, letter-spacing,
 *              tabular-nums, badge tiers, component typography
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Font family + antialiased rendering ── */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Font-weight hierarchy ── */
h1, .h1,
h2, .h2 {
  font-weight: 700;
}

h3, .h3 {
  font-weight: 650;
}

h4, .h4,
h5, .h5,
h6, .h6 {
  font-weight: 600;
}

.stat-value,
.valuebox .value {
  font-weight: 750;
}

.stat-label,
.valuebox .title {
  font-weight: 500;
}

.navbar-brand {
  font-weight: 600;
}

.nav-link {
  font-weight: 500;
}

/* Font-weight utilities */
.fw-light   { font-weight: 300 !important; }
.fw-regular { font-weight: 400 !important; }
.fw-medium  { font-weight: 500 !important; }
.fw-semi    { font-weight: 600 !important; }
.fw-bold    { font-weight: 700 !important; }
.fw-xbold   { font-weight: 800 !important; }

/* ── Letter-spacing ── */
h1, .h1 {
  letter-spacing: -0.025em;
}

h2, .h2 {
  letter-spacing: -0.02em;
}

h3, .h3 {
  letter-spacing: -0.015em;
}

.stat-value {
  letter-spacing: -0.02em;
}

.stat-label {
  letter-spacing: 0.06em;
}

.group-badge {
  letter-spacing: 0.04em;
}

@media (max-width: 575px) {
  h1, .h1 {
    letter-spacing: -0.015em;
  }
}

/* Letter-spacing utilities */
.ls-tight  { letter-spacing: -0.025em !important; }
.ls-snug   { letter-spacing: -0.015em !important; }
.ls-normal { letter-spacing: 0 !important; }
.ls-wide   { letter-spacing: 0.04em !important; }
.ls-wider  { letter-spacing: 0.08em !important; }

/* ── Tabular numbers ── */
table td,
table th {
  font-variant-numeric: tabular-nums;
}

.stat-card .stat-value,
.text-neg,
.text-pos {
  font-variant-numeric: tabular-nums;
}

.tabnum {
  font-variant-numeric: tabular-nums !important;
}

/* ── Badge typography tiers ── */
.badge-sm {
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: var(--fs-xs);
}

.badge-md {
  padding: 0.25rem 0.7rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: var(--fs-sm);
}

.badge-lg {
  padding: 0.3rem 0.85rem;
  border-radius: 6px;
  font-weight: 700;
  font-size: var(--fs-base);
}

.label-upper {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  font-size: var(--fs-sm);
}

/* ── Component typography ── */
.nominee-card .nome {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.nominee-card .pct {
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.cron-week {
  font-weight: 700;
}

.cron-date {
  font-weight: 500;
}

.dark-card {
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Mobile overflow guards (<= 575px)
 * - Prevent horizontal page overflow from wide tables/code blocks
 * - Keep navbar title inside viewport
 * ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 575px) {
  html,
  body,
  #quarto-content,
  .quarto-container,
  .page-columns,
  .page-rows-contents,
  #quarto-document-content {
    max-width: 100vw;
    overflow-x: hidden !important;
  }

  .navbar-title {
    display: inline-block;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  table,
  .table,
  .table-full,
  table.dataframe {
    display: table !important;
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
    border-collapse: collapse;
  }

  table thead,
  table tbody {
    width: auto;
  }

  th,
  td {
    white-space: normal !important;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    line-height: 1.3;
    padding: 0.35rem 0.4rem !important;
    vertical-align: top;
  }

  th.tc,
  td.tc,
  th.tr,
  td.tr {
    white-space: nowrap !important;
    overflow-wrap: normal;
    word-break: normal;
  }

  /* Opt-in class for tables that still need horizontal scrolling on mobile. */
  table.mobile-scroll-x,
  .table.mobile-scroll-x,
  .table-full.mobile-scroll-x,
  table.dataframe.mobile-scroll-x {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    table-layout: auto !important;
  }

  table.mobile-scroll-x thead,
  table.mobile-scroll-x tbody {
    display: table;
    width: max-content;
    min-width: 100%;
  }

  .mobile-pruned-table .mobile-pruned-hidden {
    display: none !important;
  }

  .mobile-pruned-table {
    table-layout: fixed !important;
    width: 100% !important;
    font-size: var(--fs-xs) !important;
  }

  .mobile-pruned-table th,
  .mobile-pruned-table td {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    padding: 0.24rem 0.32rem !important;
    vertical-align: top;
  }

  .mobile-pruned-note {
    margin: 0.3rem 0 0.9rem;
    color: #9aa0a6;
  }

  div.sourceCode,
  pre.sourceCode,
  code.sourceCode,
  pre,
  code {
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  .js-plotly-plot,
  .plotly,
  .plotly-graph-div,
  .cell-output-display {
    max-width: 100% !important;
  }
}