/* Broadsheet style: Times New Roman text, Arial figures, black rules,
   no rounded corners, no shadows, no tinted panels. */

:root {
  --paper: #ffffff;
  --ink: #111111;
  --ink-2: #444444;
  --ink-3: #6b6b6b;
  --rule: #111111;
  --hair: #cfcfcf;
  --accent: #1f4e79;
  --serif: "Times New Roman", Times, Georgia, serif;
  --sans: Arial, Helvetica, sans-serif;
  --track: #e6e6e6;       /* progress bar track */
  --panel: #f4f4f2;       /* formula blocks */
  color-scheme: light;
}

/* Dark mode: the night edition. Same type and rules, inverted ink.
   Chosen with the toggle (or the launcher's toggle, via a shared session
   cookie); never switched automatically from the OS setting. */
:root[data-theme="dark"] {
  --paper: #111110;
  --ink: #ecebe6;
  --ink-2: #c4c3bc;
  --ink-3: #9a9992;
  --rule: #d6d6d0;
  --hair: #3a3a37;
  --accent: #7fb2e5;
  --track: #2c2c29;
  --panel: #1c1c1a;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
}
.page { max-width: 1180px; margin: 0 auto; padding: 18px 16px 40px; }
a { color: var(--accent); }

/* Masthead */
.masthead { position: relative; text-align: center; border-bottom: 4px double var(--rule);
            padding-bottom: 12px; margin-bottom: 0; }
.dateline { font-family: var(--sans); font-size: 11px; color: var(--ink-2);
            border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
            padding: 5px 0; margin-bottom: 14px; white-space: pre; }
.masthead h1 { margin: 0; font-size: 46px; font-weight: 700; letter-spacing: -0.5px;
               line-height: 1.05; }
.title-row { display: flex; align-items: center; justify-content: center; gap: 14px; }
.ltc-mark { width: 50px; height: 50px; flex: none; }
/* DSD logo: top right of the masthead, level with the title */
.byline { position: absolute; left: 0; top: 46px; line-height: 0; }
.dsd-logo { height: 50px; width: auto; }
.lede { margin: 8px 0 0; font-style: italic; color: var(--ink-2); font-size: 17px; }

/* Section bar under the masthead: page links and the theme toggle */
.section-bar { display: flex; justify-content: center; align-items: center; gap: 22px;
               margin-top: 12px; font-family: var(--sans); font-size: 12px;
               letter-spacing: 0.06em; text-transform: uppercase; }
.section-bar a { color: var(--ink-2); text-decoration: none; padding: 2px 0;
                 border-bottom: 2px solid transparent; }
.section-bar a:hover { color: var(--ink); }
.section-bar a.active { color: var(--ink); font-weight: 700; border-bottom-color: var(--ink); }
.theme-toggle { font: inherit; letter-spacing: inherit; text-transform: inherit;
                background: none; color: var(--ink-2); cursor: pointer;
                border: 1px solid var(--ink-2); padding: 3px 9px; }
.theme-toggle:hover { color: var(--ink); border-color: var(--ink); }
:root[data-theme="dark"] .dsd-logo { filter: brightness(1.75) saturate(0.85); }

/* Market-data strip: figures separated by vertical rules */
.tiles { display: grid; grid-template-columns: repeat(6, 1fr);
         border-bottom: 1px solid var(--rule); margin-bottom: 26px; }
.tile { padding: 12px 14px; border-right: 1px solid var(--hair); min-width: 0; }
.tile:last-child { border-right: 0; }
.tile-label { font-size: 13px; font-weight: 700; }
.tile-value { font-family: var(--sans); font-size: 22px; font-weight: 700;
              margin-top: 4px; font-variant-numeric: tabular-nums;
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Animated numbers: hidden source text for screen readers, visible animated copy */
.count-src { position: absolute; width: 1px; height: 1px; overflow: hidden;
             clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.count-out { font-variant-numeric: tabular-nums; }
.tile-sub { font-size: 13px; color: var(--ink-3); margin-top: 2px; min-height: 16px; }

/* Section headings with a heavy rule above */
.section-title { margin: 0; padding-top: 6px; border-top: 3px solid var(--rule);
                 font-size: 24px; font-weight: 700; }
.section-sub { margin: 4px 0 12px; font-style: italic; color: var(--ink-2); font-size: 15px; }

/* Insights: four columns of copy divided by rules */
.insights { display: grid; grid-template-columns: repeat(4, 1fr);
            border-bottom: 1px solid var(--rule); margin-bottom: 22px; }
.insight { padding: 4px 16px 14px; border-right: 1px solid var(--hair);
           display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.insight:first-child { padding-left: 0; }
.insight:last-child { border-right: 0; padding-right: 0; }
.insight-label { font-size: 14px; font-weight: 700; }
.insight-head { font-family: var(--sans); font-size: 26px; font-weight: 700;
                font-variant-numeric: tabular-nums; }
.insight-body { font-size: 15px; line-height: 1.4; }
.insight-method { font-size: 13px; font-style: italic; color: var(--ink-3);
                  line-height: 1.35; margin-top: auto; padding-top: 6px; }
.progress { height: 5px; background: var(--track); }
.method-link { font-style: normal; font-family: var(--sans); font-size: 12px;
               white-space: nowrap; }
.chart-method { display: inline-block; margin-top: 4px; }
.progress-fill { height: 100%; background: var(--accent); }

/* Filters */
.filters { display: flex; gap: 20px; flex-wrap: wrap; margin: 0 0 16px; }
.filters label { display: flex; flex-direction: column; gap: 4px; font-size: 14px;
                 font-weight: 700; min-width: 180px; }
/* Dropdowns: square, black-ruled. Covers Dash 3 (react-select) and Dash 4. */
.filters .Select-control,
.filters .dash-dropdown .Select-control {
  border: 1px solid var(--ink); border-radius: 0; box-shadow: none !important;
  font-family: var(--serif); font-size: 15px;
}
.filters .Select-menu-outer { border: 1px solid var(--ink); border-radius: 0;
                              font-family: var(--serif); font-size: 15px; }
.filters .Select-arrow { border-top-color: var(--ink); }
.filters .is-open .Select-arrow { border-bottom-color: var(--ink); }
.filters .dash-dropdown { font-family: var(--serif); font-size: 15px; }
.filters .Select-control, .filters .Select-menu-outer, .filters .Select-option {
  background-color: var(--paper); color: var(--ink); }
.filters .Select-value-label, .filters .Select--single > .Select-control .Select-value {
  color: var(--ink) !important; }
.filters .Select-option.is-focused { background-color: var(--panel); }

/* Chart blocks: headline over a thin rule, no boxes */
.grid { display: grid; gap: 0 32px; margin-bottom: 26px; align-items: start; }
.card .dash-graph { min-width: 0; overflow: hidden; }
.grid.two { grid-template-columns: 1fr 1fr; }
.grid.one { grid-template-columns: 1fr; }
.card { border-top: 1px solid var(--rule); padding-top: 8px; min-width: 0; }
.card-head h2 { margin: 0; font-size: 21px; font-weight: 700; }
.card-sub { margin: 3px 0 8px; font-size: 15px; color: var(--ink-2); line-height: 1.35; }

/* Table view */
.table-toggle { margin: 4px 0 8px; font-size: 14px; }
.table-toggle summary { cursor: pointer; color: var(--accent); }
.data-table { width: 100%; border-collapse: collapse; margin-top: 8px;
              border-top: 2px solid var(--rule); border-bottom: 2px solid var(--rule); }
.data-table th, .data-table td { text-align: left; padding: 5px 8px;
              border-bottom: 1px solid var(--hair); }
.data-table td:not(:first-child), .data-table th:not(:first-child) {
  text-align: right; font-family: var(--sans); font-variant-numeric: tabular-nums; }

/* Methodology page */
.methodology { max-width: 760px; margin: 0 auto 30px; padding-top: 22px; }
.methodology .section-sub { margin-bottom: 18px; }
.method-toc { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
              padding: 10px 0 6px; margin-bottom: 8px; font-size: 15px; }
.method-toc ol { margin: 6px 0 4px; padding-left: 22px; columns: 2; column-gap: 32px; }
.method-toc li { margin-bottom: 3px; }
.method-section { border-top: 1px solid var(--hair); padding: 14px 0 6px;
                  scroll-margin-top: 12px; }
.method-section h2 { margin: 0 0 8px; font-size: 22px; }
.method-section h3 { margin: 14px 0 4px; font-size: 17px; }
.method-section p, .method-section li { font-size: 16px; line-height: 1.55; }
.method-section ol, .method-section ul { padding-left: 22px; }
.method-section code { font-family: Consolas, "Courier New", monospace; font-size: 13.5px; }
.method-section .data-table { margin: 8px 0 12px; font-size: 14px; }
.method-section .data-table td:nth-child(2),
.method-section .data-table th:nth-child(2) { text-align: left; font-family: inherit; }
.formula { background: var(--panel); border-left: 3px solid var(--rule); color: var(--ink);
           padding: 10px 14px; margin: 10px 0 12px; overflow-x: auto;
           font-family: Consolas, "Courier New", monospace; font-size: 13.5px; line-height: 1.6; }
/* Live forecast diagnostics (Methodology section 7) */
.diag-content h3 { margin: 18px 0 6px; font-size: 17px; }
.diag-content h4 { margin: 0 0 2px; font-size: 15px; }
.diag-meta { font-family: var(--sans); font-size: 12px; color: var(--ink-3); }
.diag-note { font-size: 14px !important; font-style: italic; color: var(--ink-2); margin: 2px 0 6px; }
.diag-wait { font-style: italic; color: var(--ink-2); }
.diag-table { margin: 8px 0 12px; font-size: 14px; }
.diag-table td:first-child { white-space: nowrap; }
.diag-table th, .diag-table td { text-align: left !important; }
.diag-table th { white-space: nowrap; }
.diag-charts { margin: 10px 0 6px; gap: 0 24px; }
.diag-readings { margin: 4px 0 8px; }
.diag-readings li { font-size: 15px !important; }
.method-back { border-top: 1px solid var(--rule); padding-top: 12px; font-size: 15px; }

.footer { border-top: 4px double var(--rule); margin-top: 10px; padding-top: 8px;
          font-size: 13px; color: var(--ink-3); line-height: 1.5; }

@media (max-width: 1000px) {
  /* Too narrow to sit beside the centered title: drop below the tagline */
  .byline { position: static; display: block; text-align: left; margin: 0 0 10px; line-height: 0; }
  .tiles { grid-template-columns: repeat(3, 1fr); }
  .tile:nth-child(3n) { border-right: 0; }
  .tile:nth-child(-n+3) { border-bottom: 1px solid var(--hair); }
  .insights { grid-template-columns: repeat(2, 1fr); }
  .insight { padding: 4px 14px 14px; }
  .insight:nth-child(2n) { border-right: 0; }
  .insight:nth-child(-n+2) { border-bottom: 1px solid var(--hair); }
}
@media (max-width: 760px) {
  .masthead h1 { font-size: 32px; }
  .ltc-mark { width: 36px; height: 36px; }
  .dsd-logo { height: 34px; }
  .title-row { gap: 10px; }
  .dateline { white-space: normal; }
  .section-bar { gap: 14px; font-size: 11px; flex-wrap: wrap; }
  .method-toc ol { columns: 1; }
  /* Wide tables scroll inside themselves instead of widening the page */
  .method-section .data-table { display: block; overflow-x: auto; max-width: 100%; }
  .grid.two { grid-template-columns: 1fr; gap: 22px; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .tile { border-right: 1px solid var(--hair) !important; border-bottom: 1px solid var(--hair); }
  .tile:nth-child(2n) { border-right: 0 !important; }
  .insights { grid-template-columns: 1fr; }
  .insight, .insight:first-child, .insight:last-child {
    padding: 10px 0; border-right: 0; border-bottom: 1px solid var(--hair); }
}