/* Monday Brief (/labs/monday-brief).
   Part of the /labs stylesheet, split out of one 3,400-line labs.css.

   THE NUMBER IN THE FILENAME IS LOAD-BEARING. stylesheet_link_tag :app
   collects every stylesheet under app/assets and serves them sorted by
   path, so the ordinal prefix is the only thing holding the cascade order
   these rules were written in — and several classes are shared across labs
   (.lp-head, .lab-entry, .lab-block, .dt-table). Renaming a file without
   renumbering it, or inserting one out of sequence, reorders the cascade
   silently.

   Nothing in this comment may contain the two characters that close a CSS
   comment. The first version of it wrote a shell glob here, which closed
   the comment early; the leaked text then parsed as a selector and ate the
   first real rule in all nine files. There is a test for that now.
   ============================================================ */

/* ============================================================
   Monday Brief (/labs/monday-brief) — agentic brief generation.
   ============================================================ */
.mb-form {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
/* Segment picker grows to fill the row; Generate stays a fixed-size button
   at the end, so the two together read as one full-width control. */
.mb-form .lp-menu { flex: 1 1 auto; min-width: 220px; }
.mb-form .lp-menu-trigger { width: 100%; justify-content: space-between; }
.mb-form .lp-menu-panel { width: 100%; min-width: 0; max-width: none; }
.mb-trigger-label { display: inline-flex; align-items: center; gap: 7px; }
.mb-form .lp-menu-trigger .lp-step-chevron {
  flex: 0 0 auto;
  color: var(--ink-faint);
  transform: rotate(90deg);
  transition: transform 0.2s;
}
.mb-form .lp-menu-trigger[aria-expanded="true"] .lp-step-chevron { transform: rotate(-90deg); }

.mb-submit {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.03em;
  color: var(--bg);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 9999px;
  padding: 10px 16px;
  cursor: pointer;
  transition: opacity 0.2s;
}
.mb-submit:hover { opacity: 0.85; }

.mb-run-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
/* .lp-answer-star's margin-top: 20px assumes it sits below a block of content
   (its usual context) — reset it here so it sits inline, vertically centered
   next to the status badge instead. */
.mb-run-meta .lp-answer-star { margin-top: 0; }
.mb-run-focus,
.mb-run-usage {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-faint);
}
/* Rate-limit / daily-budget notice, shown in place of starting a run. Deliberately
   quiet — a visitor who hits a limit is usually interested rather than hostile, so this
   reads as a note, not an error banner (no red, no icon, no alarm). */
.mb-notice {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-faint);
  border-left: 2px solid var(--line);
  padding: 4px 0 4px 16px;
  margin-bottom: clamp(20px, 3vw, 32px);
  max-width: 62ch;
}

/* Rendered brief output (Redcarpet HTML) — typography ported from Listening Post's
   .lp-answer-card so the two AI-generated report surfaces on the site read consistently. */
.mb-brief {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
  border: 1px solid var(--line-soft);
  background: #FAFAFA;
  padding: 18px 20px;
  margin: 0 0 20px;
}
.mb-brief p { margin: 0; max-width: none; }
.mb-brief p + *,
.mb-brief ul + *,
.mb-brief ol + *,
.mb-brief table + * { margin-top: 16px; }
.mb-brief h1,
.mb-brief h2,
.mb-brief h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.mb-brief h1 { font-size: 19px; margin: 22px 0 10px; }
.mb-brief h2 { font-size: 16.5px; margin: 20px 0 8px; }
.mb-brief h3 { font-size: 14.5px; margin: 18px 0 6px; }
.mb-brief > :first-child { margin-top: 0; }
.mb-brief strong { font-weight: 600; }
.mb-brief em { font-style: italic; }
.mb-brief hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 20px 0;
}
.mb-brief ul,
.mb-brief ol { margin: 12px 0; padding-left: 22px; }
.mb-brief ul { list-style: disc; }
.mb-brief ol { list-style: decimal; }
.mb-brief li { margin: 5px 0; padding-left: 4px; }
.mb-brief li::marker { color: var(--ink-faint); }

/* markdown tables — monochrome, mono type, hairline cell rules, matching .dt-table.
   No wrapper div (Redcarpet emits a bare <table>), so the table itself scrolls. */
.mb-brief table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  width: 100%;
  margin: 18px 0;
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink);
}
.mb-brief th,
.mb-brief td {
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}
.mb-brief th:last-child,
.mb-brief td:last-child { border-right: none; }
.mb-brief tbody tr:last-child td { border-bottom: none; }
.mb-brief thead th {
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.mb-brief tbody tr:nth-child(even) td { background: rgba(0, 0, 0, 0.018); }

/* live trace — one row per tool call, appended in real time via Turbo Streams */
.mb-trace-event {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  font-size: 12.5px;
  padding: 8px 0;
}
.mb-trace-event + .mb-trace-event,
.mb-trace-observation + .mb-trace-event { border-top: 1px solid var(--line-soft); }
.mb-trace-tool {
  font-family: var(--font-mono);
  color: var(--ink);
  flex: 0 0 auto;
}
/* Tool input, coloured by the shared formatter (Labs::JsonHelper#inline_json_html)
   so keys and string values read the same as in the Proving Ground's transcript and
   Signal Line's feed. Deliberately NOT .pg-chat-action-json's block: this row is one
   entry in a ~15-row trace and stays a single line, so it keeps its own muted
   surround and only .pg-json-key/.pg-json-string are shared. */
.mb-trace-input {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-faint);
  word-break: break-word;
}
.mb-trace-thought {
  display: block;
  font-family: var(--font-sans);
  font-style: italic;
  color: var(--ink-muted);
}
/* action rows double as the disclosure trigger for their observation row —
   reset button chrome so it reads identically to the old plain div */
.mb-trace-action {
  width: 100%;
  border: none;
  background: none;
  padding: 8px 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  font-weight: 500;
  transition: color 0.2s;
}
.mb-trace-action:hover { color: var(--ink); }
.mb-trace-action .lp-step-chevron { margin-left: auto; }
.mb-trace-action[aria-expanded="true"] .lp-step-chevron { transform: rotate(90deg); }

/* collapsed by default — max-height transition, not `hidden`, so it animates.
   This element carries no padding of its own (unlike the old .mb-trace-event-based
   version) so max-height: 0 actually clips to zero height; visual padding lives on
   .mb-trace-observation-inner instead. */
.mb-trace-observation {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.mb-trace-observation-inner {
  display: block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-faint);
  padding: 8px 0 8px 18px;
}

/* archive — past runs, scheduled or on-demand */
.mb-archive { display: flex; flex-direction: column; }
.mb-archive-item + .mb-archive-item { border-top: 1px solid var(--line-soft); }
.mb-archive-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 4px;
  text-decoration: none;
  transition: background 0.15s;
}
.mb-archive-link:hover { background: rgba(0, 0, 0, 0.03); }
.mb-archive-focus {
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--ink);
}
.mb-archive-meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-faint);
  margin-left: auto;
  white-space: nowrap;
}
@media (max-width: 680px) {
  .mb-archive-link { row-gap: 4px; }
  .mb-archive-meta { margin-left: 0; flex-basis: 100%; }
}
/* filled treatment for statuses that need a second look — weight, not colour */
.dt-tag--alert {
  color: var(--bg);
  background: var(--ink);
  border-color: var(--ink);
}

/* "Or call it." — the second way to get the same artifact, sitting in section 01 beside the
   generate form rather than as its own numbered entry. A hairline above it is the whole separation
   it needs; a bordered card here would read as a promo box on a page that has none. */
/* A FLEX COLUMN, and that is a fix rather than a preference. .fd-note is itself a flex column with
   `align-items: inherit`, so it takes whatever its container computes — and in a plain block that
   resolves to `normal`, i.e. stretch. The mute button then spanned the full column width and its
   label sat nowhere near the two rows beneath it, while .mb-call-button's own `align-self` did
   nothing at all, since align-self needs a flex parent and it had none.

   flex-start here aligns the button and all three note rows to one left edge — the same stack the
   homepage band renders, which is what this was always meant to look like. */
/* NO border-top. It earned one while this lived inside 01, where it was the only thing separating
   the call from the generate form above it. As its own numbered entry the heading does that job,
   and a rule under the heading read as the section being divided from itself. */
.mb-call {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

/* The note is the last row of that stack and takes the gap above it from the flex container, so its
   own top margin would double the space. */
.mb-call-note { margin-top: 0; }

/* .fd-call already carries the pill shape, the mono type and the gradient ring from
   labs_09_front_desk.css, which loads after this file — so this only has to place it. Reusing it
   rather than restyling means the two entry points into a call look like the same control. */
.mb-call-button { align-self: flex-start; }