/* ==========================================================================
   briefs.css — the pre-market brief page (briefs.html).
   --------------------------------------------------------------------------
   Only the parts that page adds: the strip of the trading day, the brief
   itself (Markdown turned into HTML by briefs.js) and the archive list.
   Every colour is a token from style.css, so light and dark both work.
   ========================================================================== */

/* ---------- The trading day: 4 am to 8 pm ET, regular hours shaded ---------- */
.session {
  display: grid;
  gap: 0.55rem;
  max-width: 44rem;
}

.session__strip {
  position: relative;
  height: 10px;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: var(--surface);
}

/* Regular trading hours, 9:30 to 4:00 ET */
.session__rth {
  position: absolute;
  top: -1px;
  bottom: -1px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--secondary) 55%, var(--surface));
}

/* Where we are in the day right now (hidden outside 4 am to 8 pm ET) */
.session__now {
  position: absolute;
  top: -6px;
  width: 3px;
  height: 20px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--accent);
}

.session__now[hidden] {
  display: none;
}

.session__ticks {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.session__status {
  margin: 0;
  font-weight: 700;
}

/* ---------- The two tabs: Pre-market and After close ----------
   A pill pair, like the Projects filter buttons. The chosen one is solid
   purple (ivory in dark), the other an outline. */
.brief-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
}

.brief-tab {
  min-height: 2.75rem;
  padding: 0.5rem 1.15rem;
  border: 1.5px solid var(--secondary);
  border-radius: 999px;
  background: transparent;
  color: var(--secondary);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.brief-tab[aria-selected="true"] {
  background: var(--secondary);
  color: var(--bg);
}

.brief-tab:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.brief-panel[hidden] {
  display: none;
}

.brief-panel:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 6px;
  border-radius: var(--radius);
}

/* "Past briefs" / "Past report cards" at the bottom of each tab */
.brief-archive__title {
  margin: 2.5rem 0 0.75rem;
  font-size: 1.35rem;
}

/* ---------- The brief ---------- */
.brief-date {
  margin: -0.5rem 0 1rem;
  font-weight: 700;
  color: var(--muted);
}

/* "New · posted 6:34 am" beside the date, for an hour after it goes out
   (it flashes; the animation is in style.css's Motion block) */
.brief-new {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--ll-clay);
  color: var(--on-accent); /* slate on clay, like the buttons */
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  vertical-align: 0.1em;
}

/* "This is an older brief" / "No brief yet today" */
.brief-notice {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 1rem;
  max-width: 44rem;
  margin: 0 0 1rem;
  padding: 0.6rem 0.9rem;
  border-radius: 12px;
  background: var(--secondary-soft);
  color: var(--ink);
  font-size: 0.95rem;
}

.brief-notice[hidden] {
  display: none;
}

.brief-notice button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--secondary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

/* The card the brief sits in, like a journal entry */
.brief-card {
  max-width: 44rem;
  padding: 1.25rem 1.25rem 1.4rem;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.brief-card > :first-child {
  margin-top: 0;
}

.brief-card > :last-child {
  margin-bottom: 0;
}

/* The "# headline" line of the brief */
.brief__headline {
  margin: 0 0 0.5rem;
  font-size: 1.45rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.brief__tldr {
  margin: 0 0 1.5rem;
  font-size: 1.1rem;
  color: var(--muted);
}

/* "## Overnight and Asia", "## MU", ... */
.brief-card h3 {
  margin: 1.75rem 0 0.6rem;
  padding-left: 0.75rem;
  border-left: 3px solid var(--secondary);
  font-size: 1.05rem;
}

.brief-card h4 {
  margin: 1.25rem 0 0.4rem;
  font-size: 0.95rem;
}

.brief-card p {
  margin: 0 0 0.8rem;
}

.brief-card ul,
.brief-card ol {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

.brief-card li {
  margin-bottom: 0.4rem;
}

.brief-card li::marker {
  color: var(--accent-ink);
}

.brief-card a {
  color: var(--secondary);
}

.brief-card code {
  padding: 0 0.3em;
  border-radius: 4px;
  background: var(--surface);
  font-size: 0.9em;
}

.brief-card blockquote {
  margin: 0 0 1rem;
  padding-left: 0.9rem;
  border-left: 3px solid var(--rule);
  color: var(--muted);
}

.brief-card hr {
  margin: 1.5rem 0;
  border: 0;
  border-top: 1px solid var(--rule);
}

.brief__table {
  margin: 0 0 1rem;
  overflow-x: auto;
}

.brief-card table {
  min-width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.brief-card th,
.brief-card td {
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--rule);
  text-align: left;
}

.brief-card th {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--secondary);
}

/* The "## Sources" list is quieter than the rest */
.brief__sources + ul {
  font-size: 0.85rem;
  color: var(--muted);
}

/* The "Generated ... by ..." line at the end */
.brief__stamp {
  margin-top: 1.5rem;
  font-size: 0.8rem;
  color: var(--muted);
}

/* ---------- The archive ---------- */
.archive {
  max-width: 44rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.archive li + li {
  border-top: 1px solid var(--rule);
}

.archive__row {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0.2rem 0.75rem;
  width: 100%;
  padding: 0.85rem 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.archive__row:hover .archive__headline {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 0.15em;
}

.archive__row:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

.archive__date {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.archive__row[aria-current="true"] .archive__date {
  color: var(--accent-ink);
}

.archive__headline {
  font-weight: 700;
}

.archive__tldr {
  grid-column: 2;
  font-size: 0.9rem;
  color: var(--muted);
}

.archive__note {
  padding: 0.85rem 0;
}

/* The folds: a year holds its months, a month holds its briefs. Each
   summary line is the label, the count and a chevron (down, up when open). */
.archive-folds {
  max-width: 44rem;
}

.archive__year + .archive__year {
  margin-top: 0.5rem;
}

.archive__fold {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  list-style: none;
}

.archive__fold::-webkit-details-marker {
  display: none;
}

.archive__fold::after {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  margin: 0 0.3rem 0.25rem 0;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
}

details[open] > .archive__fold::after {
  margin: 0.25rem 0.3rem 0 0;
  transform: rotate(225deg);
}

.archive__fold:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

.archive__label {
  font-weight: 700;
}

.archive__fold--year .archive__label {
  font-size: 1.25rem;
}

.archive__count {
  font-size: 0.9rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Months sit a step in from their year */
.archive__month {
  padding-left: 1rem;
}

.archive__month .archive {
  margin-bottom: 0.5rem;
}

/* Narrow phones: the date sits above the headline */
@media (max-width: 24rem) {
  .archive__row {
    grid-template-columns: 1fr;
  }

  .archive__tldr {
    grid-column: 1;
  }
}

/* ---------- The after-close report card ----------
   "How it did" inside the brief (under the TLDR), and the running score
   above it. Filled in by briefs.js from report-cards/. The palette has no
   green, so "right" is solid purple, "partly" a purple outline, "wrong"
   clay, and anything unconfirmed a dashed grey outline. */
.report-tally {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.9rem;
  margin: -0.4rem 0 1rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.report-tally[hidden] {
  display: none;
}

.report-tally strong {
  color: var(--ink);
}

/* "What the brief is working on": a closed fold under the score, drawn
   like the archive folds (summary line, count, chevron). Its lessons are
   short lines with the evidence under each in muted type. */
.lessons {
  max-width: 44rem;
  margin: 0 0 1.25rem;
}

.lessons[hidden] {
  display: none;
}

.lessons__list {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.lessons__item {
  padding: 0.55rem 0 0.55rem 0.9rem;
  border-left: 3px solid var(--secondary);
}

.lessons__item + .lessons__item {
  margin-top: 0.5rem;
}

.lessons__evidence {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.lessons__new {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  border: 1.5px solid var(--secondary);
  color: var(--secondary);
  font-size: 0.75rem;
  font-weight: 700;
  vertical-align: 0.1em;
}

.lessons__note {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.report-tally__group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
}

.report-tally__label {
  font-weight: 700;
}

.grade {
  display: inline-block;
  padding: 0.05rem 0.55rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: 0.08em;
}

.grade--hit,
.grade--held {
  background: var(--secondary);
  color: var(--card);
}

.grade--partial {
  border-color: var(--secondary);
  background: var(--secondary-soft);
  color: var(--ink);
}

.grade--miss,
.grade--broke {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--card));
  color: var(--accent-ink);
}

.grade--untested,
.grade--unknown {
  border: 1px dashed var(--muted);
  color: var(--muted);
}

.report-card {
  margin: 0 0 1.5rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--secondary);
  border-radius: calc(var(--radius) - 4px);
  background: var(--surface);
}

.brief-card .report-card__title {
  margin: 0 0 0.35rem;
  padding-left: 0;
  border-left: 0;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--secondary);
}

.brief-card .report-card__summary {
  margin: 0 0 0.75rem;
  font-weight: 700;
}

.brief-card .report-card--waiting .report-card__summary {
  margin: 0;
  font-weight: 500;
  color: var(--muted);
}

.report-card__rows {
  display: grid;
  gap: 0.6rem;
  margin: 0;
}

.report-card__row {
  display: grid;
  gap: 0.15rem;
}

.report-card__row dt {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.report-card__row dd {
  margin: 0;
}

.brief-card .report-card__levels {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brief-card .report-card__sources,
.brief-card .report-card__stamp {
  margin: 0.75rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.brief-card .report-card__stamp {
  margin-top: 0.25rem;
}

/* Wider screens: labels in a column on the left */
@media (min-width: 40rem) {
  .report-card__row {
    grid-template-columns: 7.5rem 1fr;
    gap: 0.75rem;
  }
}

/* The one-line pointer under a brief's TLDR to its report card on the
   After close tab, and the "That morning's call" line on a report card. */
.brief-card .report-link,
.brief-card .report-card__from {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin: 0 0 1.5rem;
}

.brief-card .report-link {
  margin-top: -0.75rem;
  color: var(--muted);
}

.brief-card .report-link strong {
  color: var(--ink);
}

.report-link__go {
  padding: 0.3rem 0;
  border: 0;
  background: none;
  color: var(--secondary);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.report-link__go::after {
  content: " \2192";
}

.report-link__go:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Desktop: use the whole screen ----------
   From 64rem wide the page drops the 44rem reading column. The page's
   wrap (header and footer too, so everything lines up) grows to 120rem.
   The brief's sections (Overnight and Asia, MU, Watchlist, Calendar),
   each wrapped in a .brief__part by groupParts in briefs.js, sit side by
   side in a grid, each at least 24rem so lines stay easy to read: two
   across on a laptop, three on a big monitor. Each section still reads
   top to bottom. The headline, TLDR, report-card line, Sources and stamp
   run the full width. The report card keeps its rows. */
@media (min-width: 64rem) {
  :root {
    --wrap: 120rem;
    --gutter: 2.5rem;
  }

  .session,
  .brief-notice,
  .brief-card,
  .archive,
  .archive-folds {
    max-width: none;
  }

  .brief-card {
    padding: 1.75rem 2rem 2rem;
  }

  .brief-card[data-brief] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
    gap: 0 3rem;
    align-items: start;
  }

  .brief-card[data-brief] > :not(.brief__part),
  .brief-card[data-brief] > .brief__part--sources {
    grid-column: 1 / -1;
  }

  .brief__headline {
    font-size: 1.8rem;
  }

  .brief__tldr {
    max-width: 70rem;
  }

  .brief__part {
    margin-bottom: 1.25rem;
  }

  .brief__part > h3 {
    margin-top: 0;
  }

  .brief__part > :last-child {
    margin-bottom: 0;
  }

  /* Sources: the links flow in columns, they're short */
  .brief__part--sources ul {
    columns: 3 20rem;
    column-gap: 3rem;
  }

  .brief__part--sources li {
    break-inside: avoid;
  }

  /* Report card rows: wider label column, text kept to a readable line */
  .report-card__row {
    grid-template-columns: 10rem minmax(0, 60rem);
  }
}