html, body { height: 100%; }
    body {
      font-family: var(--font-ui);
      background: var(--bg);
      color: var(--text);
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    /* ── Page header ── */
    .page-header {
      flex: 0 0 auto;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: var(--space-6);
      flex-wrap: wrap;
      padding: var(--space-6) max(var(--space-6), calc((100vw - 1440px) / 2));
      background: var(--bg-card);
    }
    .page-header-copy { max-width: 760px; }
    .page-header h1 {
      white-space: nowrap;
      margin-top: var(--space-1);
      font-size: var(--fs-2xl);
      letter-spacing: -.035em;
    }
    .eyebrow {
      color: var(--accent-strong);
      font-size: var(--fs-label);
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
    }
    .page-sub {
      display: block;
      margin-top: var(--space-2);
      font-size: var(--fs-sm);
      color: var(--muted);
      line-height: 1.5;
    }
    .controls {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-left: auto;
      flex-wrap: wrap;
    }
    #date-picker {
      background: var(--bg-panel);
      color: var(--text-strong);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 8px 11px;
      font-size: 0.78rem;
      font-family: inherit;
    }
    .status-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--muted);
      background: var(--bg-chip);
      border: 1px solid var(--border);
      border-radius: var(--radius-pill);
    }
    .status-pill .dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--up);
      animation: live-pulse 2s infinite;
    }
    .status-pill.history .dot,
    .status-pill.scheduled .dot,
    .status-pill.offline .dot { background: var(--muted-dim); animation: none; }
    .status-pill.scheduled .dot { background: var(--accent); }
    .status-pill.offline { color: var(--down); }
    @keyframes live-pulse {
      0%   { box-shadow: 0 0 0 0 rgb(var(--up-rgb) / 0.6); }
      70%  { box-shadow: 0 0 0 8px rgb(var(--up-rgb) / 0); }
      100% { box-shadow: 0 0 0 0 rgb(var(--up-rgb) / 0); }
    }

    /* ── Card grid ── */
    main {
      flex: 1 1 auto;
      width: min(1440px, 100%);
      margin: 0 auto;
      padding: var(--space-6) var(--space-6) var(--space-8);
    }
    #empty-state {
      padding: 40px 22px;
      text-align: center;
      color: var(--muted);
      font-size: 0.85rem;
    }
    #card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
      gap: var(--space-4);
    }
    @media (max-width: 700px) {
      #card-grid { grid-template-columns: 1fr; }
    }

    /* ── Earnings card ── */
    .ec {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: var(--space-4) var(--space-5) var(--space-5);
      display: flex;
      flex-direction: column;
      gap: 12px;
      box-shadow: var(--shadow-1);
      transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
    }
    .ec:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
    .ec--pending {
      opacity: 0.94;
    }
    .ec.flash {
      animation: ec-flash 10s ease-out;
    }

    /* Sector accent strip on the card's left edge. The hue communicates
     * sector at a glance — pairs with the legend below the date picker.
     * Colors picked to be distinct under the dark theme but pulled toward
     * neutral chroma so they don't compete with the bull/bear pills. */
    .ec {
      border-left-width: 4px;
      border-left-color: var(--border);
    }
    .ec[data-sector="Communication Services"]    { border-left-color: #8b7ed8; }
    .ec[data-sector="Consumer Discretionary"]    { border-left-color: #d89878; }
    .ec[data-sector="Consumer Staples"]          { border-left-color: #6fb88a; }
    .ec[data-sector="Energy"]                    { border-left-color: #c66666; }
    .ec[data-sector="Financials"]                { border-left-color: #6e9bd1; }
    .ec[data-sector="Health Care"]               { border-left-color: #d68fb6; }
    .ec[data-sector="Industrials"]               { border-left-color: #c5a657; }
    .ec[data-sector="Information Technology"]    { border-left-color: #5db1c2; }
    .ec[data-sector="Materials"]                 { border-left-color: #b08766; }
    .ec[data-sector="Real Estate"]               { border-left-color: #6db8b0; }
    .ec[data-sector="Utilities"]                 { border-left-color: #c2b85d; }

    /* Sector legend — collapsible row under the page header */
    .sector-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 4px 14px;
      padding: 10px max(var(--space-6), calc((100vw - 1440px) / 2));
      font-size: 0.62rem;
      color: var(--muted);
      letter-spacing: 0.04em;
      border-bottom: 1px solid var(--border-soft, var(--border));
      background: var(--bg-panel);
    }
    .sector-legend .sl-title {
      text-transform: uppercase;
      font-weight: 600;
      color: var(--muted-dim);
      letter-spacing: 0.08em;
      margin-right: 4px;
    }
    .sector-legend .sl-item {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      white-space: nowrap;
    }
    .sector-legend .sl-swatch {
      width: 10px;
      height: 10px;
      border-radius: 2px;
      flex: 0 0 auto;
    }
    @keyframes ec-flash {
      0%   { box-shadow: 0 0 0 2px var(--accent), var(--shadow-3); background: var(--accent-soft); }
      40%  { box-shadow: 0 0 0 2px var(--accent), var(--shadow-2); background: var(--accent-soft); }
      100% { box-shadow: 0 0 0 1px var(--border); background: var(--bg-card); }
    }

    .ec-head {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .ec-logo {
      width: 44px;
      height: 44px;
      flex: 0 0 auto;
      border-radius: 6px;
      background: #f5f5f5;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--muted);
      overflow: hidden;
      position: relative;
    }
    /* `inset: 4px` pads the logo inside the chip so it doesn't bleed to the
     * edges when contain-fitting nearly-square assets, and gives wider EODHD
     * banner-style logos breathing room rather than smearing edge-to-edge. */
    .ec-logo img {
      position: absolute;
      inset: 4px;
      width: calc(100% - 8px);
      height: calc(100% - 8px);
      object-fit: contain;
    }
    .ec-logo img.failed { display: none; }
    .ec-id {
      flex: 1 1 auto;
      min-width: 0;
    }
    .ec-ticker {
      font-size: 0.92rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      color: var(--text-strong);
    }
    .ec-name {
      font-size: 0.7rem;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .ec-meta {
      display: flex;
      gap: 6px;
      align-items: center;
    }
    .ec-time {
      font-size: 0.62rem;
      color: var(--muted);
    }
    /* Pill + numeric score stack on the right side of the card header */
    .ec-rating {
      display: inline-flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 3px;
      flex: 0 0 auto;
    }
    .ec-pill {
      display: inline-flex;
      align-items: center;
      padding: 3px 9px;
      font-size: 0.66rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      border-radius: 4px;
      cursor: help;
      position: relative;
    }
    .ec-pill--bull    { background: rgb(var(--up-rgb) / 0.18); color: var(--up); }
    .ec-pill--bear    { background: rgb(var(--down-rgb) / 0.18); color: var(--down); }
    .ec-pill--neutral { background: var(--bg-chip); color: var(--muted); }
    .ec-pill--pending { background: var(--bg-chip); color: var(--muted-dim); }
    .ec-score {
      font-size: 0.62rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      font-variant-numeric: tabular-nums;
      color: var(--muted);
    }
    .ec-score b {
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0;
    }
    .ec-score.up b   { color: var(--up); }
    .ec-score.down b { color: var(--down); }
    .ec-score.flat b { color: var(--text-soft); }

    /* Sentiment-score tooltip — appears on hover/focus of a sentiment pill */
    .ec-tip {
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      width: 320px;
      max-width: calc(100vw - 32px);
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 10px 12px;
      box-shadow: var(--shadow-3);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.12s ease;
      z-index: 10;
      font-size: 0.7rem;
      letter-spacing: 0;
      text-transform: none;
      font-weight: 400;
      color: var(--text);
      line-height: 1.45;
    }
    .ec-pill:hover .ec-tip,
    .ec-pill:focus .ec-tip { opacity: 1; pointer-events: auto; }
    .ec-tip-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 8px;
      padding-bottom: 6px;
      margin-bottom: 6px;
      border-bottom: 1px solid var(--border);
      color: var(--muted);
    }
    .ec-tip-head strong { color: var(--text-strong); font-weight: 700; font-size: 0.78rem; }
    .ec-tip-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      align-items: baseline;
      padding: 3px 0;
    }
    .ec-tip-row .name { color: var(--muted); font-size: 0.68rem; }
    .ec-tip-row .val  {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      color: var(--text-soft);
      font-weight: 600;
      font-size: 0.68rem;
    }
    .ec-tip-row .val .arr { font-size: 0.7rem; line-height: 1; }
    .ec-tip-row .val.up   .arr { color: var(--up); }
    .ec-tip-row .val.down .arr { color: var(--down); }
    .ec-tip-row .val.flat .arr { color: var(--muted-dim); }
    .ec-tip-row .val.up   { color: var(--text); }
    .ec-tip-row .val.down { color: var(--text); }
    .ec-tip-row .val.flat { color: var(--muted); }
    .ec-tip-note {
      margin-top: 6px;
      padding-top: 6px;
      border-top: 1px solid var(--border-soft);
      font-size: 0.65rem;
      color: var(--muted);
      font-style: italic;
    }
    .ec-tip-foot {
      margin-top: 6px;
      padding-top: 6px;
      border-top: 1px solid var(--border);
      font-size: 0.62rem;
      color: var(--muted-dim);
      letter-spacing: 0.02em;
    }

    .ec-mcap {
      font-size: 0.62rem;
      color: var(--muted);
      letter-spacing: 0.04em;
    }
    .ec-verified {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 1px 6px;
      margin-left: 6px;
      font-size: 0.58rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--up);
      background: rgb(var(--up-rgb) / 0.10);
      border: 1px solid rgb(var(--up-rgb) / 0.25);
      border-radius: 3px;
    }
    .ec-verified::before { content: "✓"; }

    /* ── Metrics table ── */
    .ec-metrics {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.74rem;
      table-layout: fixed;
    }
    .ec-metrics th, .ec-metrics td {
      padding: 5px 4px;
      text-align: right;
      white-space: nowrap;
    }
    .ec-metrics td { color: var(--text); }
    .ec-metrics thead th {
      font-size: 0.6rem;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      border-bottom: 1px solid var(--border);
    }
    .ec-metrics tbody th {
      text-align: left;
      font-weight: 500;
      color: var(--muted);
      font-size: 0.7rem;
    }
    .ec-metrics tbody tr + tr td,
    .ec-metrics tbody tr + tr th {
      border-top: 1px solid var(--border-soft);
    }
    .ec-metrics .reported {
      color: var(--text-strong);
      font-weight: 600;
    }
    .delta-up   { color: var(--up); }
    .delta-down { color: var(--down); }
    .delta-flat { color: var(--muted-dim); }

    /* ── Summary paragraphs ── */
    .ec-summary {
      font-size: 0.78rem;
      line-height: 1.45;
      color: var(--text-soft);
    }
    .ec-summary + .ec-summary {
      color: var(--muted);
    }

    .ec-foot {
      font-size: 0.62rem;
      color: var(--muted-dim);
      display: flex;
      gap: 10px;
      justify-content: space-between;
    }
    .ec-foot a { color: var(--muted); text-decoration: none; }
    .ec-foot a:hover { color: var(--accent); }

    @media (max-width: 900px) {
      .page-header {
        align-items: flex-start;
        flex-direction: column;
        padding: var(--space-5) var(--space-4);
      }
      .page-header h1 { font-size: var(--fs-xl); }
      .controls { width: 100%; margin-left: 0; }
      .sector-legend { padding: var(--space-3) var(--space-4); }
      main { padding: var(--space-4) var(--space-3) var(--space-7); }
    }

    @media (max-width: 520px) {
      #date-picker { flex: 1; min-width: 0; }
      .sector-legend { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
      .sector-legend::-webkit-scrollbar { display: none; }
      #card-grid { grid-template-columns: minmax(0, 1fr); }
      .ec { padding: var(--space-4); }
      .ec-metrics { font-size: .68rem; }
      .ec-metrics th, .ec-metrics td { padding: 5px 2px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .status-pill .dot, .ec.flash { animation: none; }
      .ec { transition: none; }
    }