/* Today at a glance — the briefing paragraph (spec §13.1, §13.2).

   One panel, full width, set as prose rather than as a card of chips: 18px,
   generous leading, and a line no longer than about 70 characters so the eye
   finds the next line without hunting. Named instruments are buttons that look
   like text with a brass underline; only the number they carry is coloured. */

/* Where the panel sits on the grid is css/app.css's business, with every other
   section; this file only dresses it. */

.bf .panel-head { margin-bottom: 10px; }

.bf-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.brief {
  margin: 0;
  max-width: 78ch;
  font-size: var(--fs-18);
  line-height: 1.62;
  color: var(--text);
  text-wrap: pretty;
}
.brief.waiting { color: var(--text-2); }

/* Inline instrument buttons: plain text, and a brass rule under the name only.

   Underlining the whole button struck through the sentence's grammar as well as
   its subject, and a paragraph of ten of them read as stripes. The rule now sits
   on a span around the instrument (js/ui/briefing.js decides where that ends),
   so the coloured number and the words after it stay clean. */
.brief-sym,
.since-text .brief-sym {
  display: inline;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  /* 27px of thumb on a 17px line was the one target on the phone under 40px.
     The padding grows the hit area and the matching negative margin keeps the
     paragraph's line rhythm exactly where it was. */
  padding: 4px 2px;
  margin: -4px -2px;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--t-fast);
}
.brief-sym .nm {
  /* Held back until he goes looking: a texture, not a row of links. The second
     line wins where color-mix is supported. */
  border-bottom: 1px solid var(--brand);
  border-bottom-color: color-mix(in oklab, var(--brand) 45%, transparent);
  transition: border-bottom-color var(--t-fast);
}
.brief-sym:hover .nm,
.brief-sym:focus-visible .nm { border-bottom-color: var(--brand); }
.brief-sym:focus-visible { border-radius: 3px; }

/* .mv is the move itself — inside an instrument button, or on its own in the
   prose where the move has no instrument behind it (his portfolio). */
.brief .mv,
.since .mv {
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 500;
  white-space: nowrap;
}
.brief .mv.up, .since .mv.up { color: var(--up); }
.brief .mv.down, .since .mv.down { color: var(--down); }
.brief .mv.flat, .since .mv.flat { color: var(--text-2); }
.since .brief-sym .mv.flat { color: var(--text-3); }

/* "Since you last looked" — quieter, and out of the way of the paragraph. */
.since {
  margin: 0;
  font-size: var(--fs-15);
  line-height: 1.55;
  color: var(--text-2);
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.since .brief-sym { color: var(--text-2); }
.since .brief-sym .nm {
  border-bottom-color: var(--brand);
  border-bottom-color: color-mix(in oklab, var(--brand) 32%, transparent);
}
.since .brief-sym:hover .nm,
.since .brief-sym:focus-visible .nm { border-bottom-color: var(--brand); }

.since-ok {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-chip);
  background: transparent;
  color: var(--text-2);
  font-size: var(--fs-13);
  line-height: 1.5;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}
.since-ok:hover { background: var(--bg-3); color: var(--text); }

/* Wide screens: the paragraph keeps its measure on the left, the "since" line
   sits beside it behind a hairline instead of pushing the panel taller. */
/* Keyed on a class js/ui/briefing.js toggles, not on `:has()`: Firefox 115 ESR
   has no `:has()` and drops the whole rule, which took the two-column layout
   with it. */
@media (min-width: 1100px) {
  .bf-body.has-since {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 30%);
    gap: 0 28px;
  }
  .bf-body.has-since .since {
    border-top: 0;
    border-left: 1px solid var(--line);
    padding-top: 0;
    padding-left: 24px;
    align-self: stretch;
  }
}

@media (max-width: 759px) {
  .brief { font-size: 17px; line-height: 1.6; }
}

@media (prefers-reduced-motion: reduce) {
  .brief-sym, .brief-sym .nm, .since-ok { transition: none; }
}