/* ── earnings-calendar task 5 (R9, D8): the earnings rail screen ────────────
   Every rule for the earnings screen lives here, under the `ern-` prefix —
   app.css is not edited (the range / gex-page / alerts containment
   precedent). Visibility follows the shared body[data-screen] switch.
   Tokens only (no hex), sharp corners (≤ 2px), borders not shadows, mono,
   tabular numbers, no transitions. Green / red mark beat / miss only. */
#earnings-screen{display:none}
body[data-screen="earnings"] #earnings-screen{display:grid}
body[data-screen="earnings"] .container{display:none}
body[data-screen="earnings"]{--filter-w:0px}
body[data-screen="earnings"] #filterHandle{display:none}

#earnings-screen{position:fixed;top:var(--topbar-h,40px);left:var(--rail-w,56px);right:0;bottom:var(--statusbar-h,24px);grid-template-columns:minmax(0,1fr);grid-template-rows:28px minmax(0,1fr);background:var(--bg-1);z-index:1;font-family:var(--font-mono)}
.ern-toolbar{flex-wrap:nowrap;min-width:0}
.ern-toolbar__name{font-size:.62rem;color:var(--fg-hi);letter-spacing:2px;text-transform:uppercase;white-space:nowrap}
.ern-week{font-size:.66rem;color:var(--fg-1);white-space:nowrap;font-variant-numeric:tabular-nums}
.ern-scope,.ern-sort{height:20px;padding:0 4px;font-size:.62rem;max-width:180px;border-radius:2px}
.ern-status{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}

/* the body: the week grid (task 8 removed the screen's history pane —
   R10.5; a tile opens the blade's earnings tab instead) */
.ern-body{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);min-height:0;min-width:0}
.ern-body .mws-panel{border:0;border-radius:0;min-width:0;min-height:0;display:flex;flex-direction:column}
.ern-grid-panel{overflow:auto}

/* the week grid: five weekday columns; a band row names each session */
.ern-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-content:start;min-width:0;font-size:.62rem;font-variant-numeric:tabular-nums}
.ern-day{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;gap:6px;padding:4px 6px;background:var(--bg-2);border-bottom:1px solid var(--border);border-left:1px solid var(--border-dim);min-width:0;white-space:nowrap}
.ern-day:first-child{border-left:0}
.ern-day__name{color:var(--fg-hi)}
.ern-day__obs{color:var(--fg-mute);overflow:hidden;text-overflow:ellipsis}
.ern-day--closed .ern-day__name{color:var(--fg-mute)}
.ern-band{grid-column:1 / -1;padding:6px 6px 3px;border-bottom:1px solid var(--border-dim);background:var(--bg-1)}
.ern-cell{min-width:0;padding:4px 6px 6px;border-left:1px solid var(--border-dim);border-bottom:1px solid var(--border-dim)}
.ern-cell--closed{color:var(--fg-mute)}
.ern-cell__hd{display:flex;gap:6px;align-items:baseline;margin-bottom:3px;white-space:nowrap;min-width:0}
.ern-cell__total{color:var(--fg-hi)}
.ern-cell__counts{display:flex;gap:5px;min-width:0;overflow:hidden}
.ern-count--beat{color:var(--green)}
.ern-count--miss{color:var(--red)}
.ern-count--inline{color:var(--fg-1)}
.ern-count--pending{color:var(--fg-mute)}
.ern-tag{font-size:.54rem;padding:0 4px;line-height:12px;flex:0 0 auto}
.ern-tag--inline{color:var(--fg-1);border-color:var(--border);background:var(--bg-2)}
.ern-tag--dim{color:var(--fg-mute);font-size:.56rem;flex:0 0 auto}
.ern-k{flex:0 0 32px;color:var(--fg-mute)}
.ern-sp{flex:0 0 auto;margin-left:auto}

/* the logo tiles (task 8; R10.3, D11, OD8): 56px squares, the tinted
   silhouette (32px canvas, earnings.js) over the ticker; no logo ⇒ the slot
   is empty and hidden, the ticker stands alone. The ticker's font size
   follows its length (--n, set per tile) so ten characters fit the tile:
   JetBrains Mono's advance is 0.6em; the tile leaves 48px
   (56 − 2 border − 6 padding), sized against 46 ⇒ 46 / (n × .6) px, ≤ 11px.
   Tone colours the ticker too: green beat, red miss, greys otherwise. */
.ern-tiles{display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px;justify-content:start}
.ern-tile{box-sizing:border-box;width:56px;height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:0 3px;margin:0;font-family:var(--font-mono);background:var(--bg-2);border:1px solid var(--border-dim);border-radius:0;color:var(--fg-1);cursor:pointer;overflow:hidden;min-width:0}
.ern-tile:hover{background:var(--bg-4)}
.ern-tile:focus-visible{outline:0;border-color:var(--green);box-shadow:var(--glow-focus)}
.ern-tile__logo{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex:0 0 auto}
.ern-tile__logo:empty{display:none}
.ern-tile__tk{display:block;max-width:100%;font-size:min(11px,calc(46px / (var(--n,4) * .6)));line-height:1.2;white-space:nowrap;overflow:hidden;font-variant-numeric:tabular-nums}
.ern-tile--bull .ern-tile__tk{color:var(--green)}
.ern-tile--bear .ern-tile__tk{color:var(--red)}
.ern-tile--neutral .ern-tile__tk{color:var(--fg-1)}
.ern-tile--more{justify-content:center;font-size:.66rem;color:var(--fg-2);padding:0}
/* the reaction lines under the ticker (tasks 11 / 14; R11.7, D15 addendum 2):
   a FIXED legible 10px mono at both widths — the outside-hours line with its
   label (`pre +2.4%`, `ah +9.8%`, `▮gap +3.1%`), then the bare day %.
   A tile with a line (the class is set only while one has text) draws its
   silhouette at 24px and GROWS to fit (the tiles flex-wrap, so a wider tile
   just takes more of its row): 24 + 13.2 + 2 × 12 + 3 × 2 gap ≈ 67px tall,
   `▮gap +12.3%` ≈ 66px wide. Sign colour green / red, grey
   for a flat 0.0%. */
.ern-tile--rx{gap:2px;width:auto;min-width:56px;height:auto;min-height:56px;padding:3px}
.ern-tile--rx .ern-tile__logo{width:24px;height:24px}
.ern-tile__rx{display:block;max-width:100%;font-family:var(--font-mono);font-size:10px;line-height:1.2;white-space:nowrap;overflow:hidden;font-variant-numeric:tabular-nums}
.ern-tile__rx:empty{display:none}
/* a settled line (R11.6): the ▮ glyph (`.ern-rx__mark`) is plain text in the
   line's own font and colour (operator 2026-10-30) — no rule of its own */
.ern-rx--bull{color:var(--green)}
.ern-rx--bear{color:var(--red)}
.ern-rx--flat{color:var(--fg-2)}

/* the hover / focus card (R10.4): a dropdown-class surface, so the one menu
   shadow in this file, plus the tile focus glow (design rule: shadows only on
   menus / modals) */
.ern-card{position:fixed;z-index:650;left:0;top:0;width:260px;max-width:calc(100vw - 12px);background:var(--bg-1);border:1px solid var(--border);border-radius:2px;box-shadow:var(--shadow-menu);font-size:.62rem;font-variant-numeric:tabular-nums;pointer-events:none}
.ern-card[hidden]{display:none}
.ern-card .mws-panel__hd{gap:8px;padding:0 8px}
.ern-card__tk{color:var(--fg-hi)}
.ern-card__body{padding:4px 8px 6px}
.ern-card__ln{display:flex;align-items:center;gap:6px;padding:2px 0;white-space:nowrap;color:var(--fg-2);min-width:0}
.ern-card__v{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--fg-1)}
.ern-cell__ft{display:flex;gap:6px;align-items:center;margin-top:3px;flex-wrap:wrap}
.ern-more{font-size:.58rem}
.ern-msg{grid-column:1 / -1;padding:12px;font-size:.66rem;color:var(--fg-mute)}
.ern-mute{color:var(--fg-mute)}
.ern-err{color:var(--red)}
.ern-warn{color:var(--amber)}

/* the blade's earnings tab (task 6, OD6; redesigned in task 9 — R10.6, D12):
   the panel index.html ships inside #detail-panel, filled by earnings.js —
   the metric toggle + the served "beat N of M" line, the dot chart (a canvas
   of fixed height, sized to the body's width), the hover readout, the
   latest / next quarter and the move row. The header's name and status
   each ellipsize so they never run into one another. */
#dp-earnings-content{padding:14px;min-width:0}
#dp-earnings-section .mws-panel__hd{gap:12px;min-width:0}
#dp-earnings-name{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#dp-earnings-status{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ern-bt{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px;font-size:.62rem}
.ern-bt__tog{display:flex;gap:4px}
.ern-bt__sum{color:var(--fg-1);min-width:0}
.ern-chart{position:relative;width:100%;height:180px;min-width:0}
.ern-chart__cv{display:block;width:100%;height:180px;cursor:crosshair}
.ern-readout{min-height:14px;padding:4px 0 2px;font-size:.6rem;color:var(--fg-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.ern-legend{font-size:.56rem;color:var(--fg-mute);white-space:pre;margin-bottom:8px}
.ern-qline{display:flex;align-items:baseline;gap:8px;padding:3px 0;font-size:.62rem;color:var(--fg-1);border-top:1px solid var(--border-dim);min-width:0;font-variant-numeric:tabular-nums}
.ern-qline .ern-k{flex:0 0 48px}
.ern-qline__v{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ern-qline__wrap{white-space:normal;overflow-wrap:anywhere}
.ern-note{padding:8px 0;font-size:.58rem;color:var(--fg-mute)}

@media (max-width:768px){
  #earnings-screen{left:0;bottom:calc(var(--statusbar-h,24px) + var(--mtab-h,44px))}
  .ern-grid{grid-template-columns:repeat(5,minmax(150px,1fr))}
  .ern-scope{max-width:110px}
  .ern-sort{max-width:80px}
  /* preview issue 4 (R10.8, D14): the 28px one-line toolbar clipped the
     week and the status at a phone width — it wraps instead, the status on
     its own line */
  #earnings-screen{grid-template-rows:auto minmax(0,1fr)}
  .ern-toolbar{flex-wrap:wrap;height:auto;min-height:28px;row-gap:2px;padding-top:3px;padding-bottom:3px}
  .ern-status{order:9;flex:1 1 100%;margin-left:0;white-space:normal;overflow:visible;overflow-wrap:anywhere}
  /* D11: 40px tiles on a phone, the silhouette at 20px; 34px of room
     for the ticker, sized against 32 */
  .ern-tiles{gap:3px}
  .ern-tile{width:40px;height:40px;gap:1px;padding:0 2px}
  .ern-tile__logo{width:20px;height:20px}
  .ern-tile__tk{font-size:min(10px,calc(32px / (var(--n,4) * .6)))}
  /* task 14: a phone tile with reaction lines — the silhouette at 20px, the
     tile grows from its 40px square to fit the 10px lines (never smaller
     text): 20 + 12 + 2 × 10 + 3 × 1 gap ≈ 55px tall. */
  .ern-tile--rx{gap:1px;width:auto;min-width:40px;height:auto;min-height:40px;padding:2px}
  .ern-tile--rx .ern-tile__logo{width:20px;height:20px}
  .ern-tile__rx{line-height:1}
  /* the sixth blade tab: measured at a 500px viewport the five visible tabs
     need 321px; an ETF's holdings tab adds ~70px, past a 390px phone's bar,
     so the bar scrolls sideways instead of clipping (task 6). */
  #dp-tab-bar{overflow-x:auto;scrollbar-width:none}
  /* preview issue 5 (R10.8, D12/D14): under the phone breakpoint the blade's
     absolutely-placed button bar (#dp-header-btns: top 52px, right 32px, four
     30px buttons ≈ 150px wide, ≈ 36px tall) sits over the identity block —
     measured, its bottom edge overlapped the company name, and a long ticker
     row runs under it. The ticker row reserves the bar's width on its right
     and its height below, so the name starts clear of it. */
  #dp-col-right>div:has(>#dp-ticker){box-sizing:border-box;min-height:44px;padding-right:170px}
}