/* =========================================================================
   EARNINGS DATES (his order, 2026-10-15) - js/ui/earnings.js draws them.

   A small tag beside a US stock's price on the chart page, and a tag on the
   stock list. Neutral colours only: green and red mean money here, amber is
   the main button, and a date is neither. Every colour is a theme token, so
   dark and light both follow. Loaded after the theme files.
   ========================================================================= */

/* the chart page: the tag, and the line it opens - over the page, so the
   chart page (which has no height to spare) does not move */
html[data-theme] .earn-wrap{ position:relative; display:inline-flex; align-items:center; }
html[data-theme] #screen-dash .earn-pill{
  margin:0; width:auto; border:0; border-radius:999px; padding:3px 10px;
  background:var(--dk-row); color:var(--dk-muted); box-shadow:none; filter:none;
  font-family:Inter, system-ui, sans-serif; font-size:12px; font-weight:500;
  letter-spacing:0; text-transform:none; white-space:nowrap; cursor:pointer; }
html[data-theme] #screen-dash .earn-pill:hover{ background:var(--dk-hover); color:var(--dk-text); }
/* within a week it is worth noticing: the page's own ink, a little bolder */
html[data-theme] #screen-dash .earn-pill.near{ color:var(--dk-text); font-weight:600; }
html[data-theme] .earn-pop{
  display:none; position:absolute; top:calc(100% + 8px); left:0; z-index:60;
  width:max-content; max-width:min(340px, 84vw); box-sizing:border-box;
  background:var(--dk-panel); box-shadow:var(--dk-shadow), 0 6px 24px rgba(0,0,0,.28);
  border-radius:8px; padding:10px 12px;
  font-family:Inter, system-ui, sans-serif; font-size:12.5px; line-height:1.45;
  color:var(--dk-text); white-space:normal; text-transform:none; letter-spacing:0; }
html[data-theme] .earn-wrap.open .earn-pop{ display:block; }
/* a phone: the top row may wrap, so the tag drops under the pair's name
   instead of pushing the row past the edge of the screen */
@media (max-width:600px){
  html[data-theme] #screen-dash .dash-header > div:first-child{ flex-wrap:wrap; row-gap:6px; }
}

/* the stock list: a tag after the company's name */
html[data-theme] .earn-tag{
  display:inline-block; margin-left:8px; padding:1px 7px; border-radius:4px;
  background:var(--dk-row); color:var(--dk-text);
  font-family:Inter, system-ui, sans-serif; font-size:11px; font-weight:600;
  letter-spacing:0; text-transform:none; white-space:nowrap; vertical-align:middle; }
/* in the list the name sits on its own line, so the tag goes under it, flush */
html[data-theme] .symbol-row .earn-tag{ display:table; margin:4px 0 0; }
