/* The brief screen: the one page Jonathan opens at 07:00 to find out how his day
 * stands.
 *
 * Split out of `screens.css` at module 35, at the seam module 34's notes named:
 * that file had reached 498 of CLAUDE.md's 500 lines and the next change to this
 * screen had no room. Loaded after `beach.css` and `screens.css` and depending on
 * both — `.section`, `.row`, `.rows`, `.cols` and `.source` are components, and
 * this is what one screen does with them.
 *
 * **Module 36 is the fifth pass at this page and the first one drawn rather than
 * described.** `design/brief-approved.html` is the target, Jonathan approved it
 * on 9 September against his real data, and where that file and a sentence
 * disagree the file wins. The four sessions before it each fixed what the page
 * *said*, which is why the words are right and he still said it looked bad: the
 * page had no visual design. Flat text on one background, no containers, no
 * hierarchy, no density.
 *
 * What the drawing actually decides, in the order it matters:
 *
 * 1. **Cards.** Every section is a white surface on the beige page with a
 *    hairline and a header row carrying its label and its count. The markup did
 *    not change — `.section` is still a label and a list — the box is here.
 * 2. **The lead leads.** Its own card, an accent rule down the left edge, 16.5px
 *    type and a line short enough to read. It is Beech's judgement about his day.
 * 3. **Two columns above 900px.** Left is work that needs him, right is
 *    information, quieter: transparent, dashed, smaller, lighter. Below 900px it
 *    stacks and the left column is first. **The widths are in `wide.css`**, with
 *    the other three screens' desktop layouts and under the one media query this
 *    app has; what is here is everything true at both widths.
 * 4. **One thing carries colour.** An overdue item, in the warn tokens. If
 *    nothing is overdue nothing is coloured, and that is what makes it work.
 *
 * No new colour and no new token: every value here is a custom property from
 * `beach.css`, which is the same set `design/brief-approved.html` declares. The
 * sizes it names that the type scale has no entry for (12px labels, 13.5px in the
 * rail, 14.5px on a row) are written as the drawing writes them, because a
 * half-point of drift per element is how a page stops looking like its design. */

.screen-brief .page { gap: 18px; }

/* --- level one: the judgement -------------------------------------------- */

/* The brief's opening sentences, out of the stored body — the sentence Beech
 * wrote about his day and the reason the page is worth opening. It sat at
 * `--t-body` inside a card shaped like every other card, with "Morning brief"
 * four points larger than it.
 *
 * The accent rule down the left edge is the whole of what makes this read as the
 * lead rather than as the first of five boxes. Inset top and bottom, so it is a
 * mark against the text and not a border on the card. */
.screen-brief .brief-top { position: relative; padding: 20px 22px 21px; margin-bottom: 8px; }
.screen-brief .brief-top::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}
/* The card's own chrome steps back to meet it: which brief this is, and when it
 * went out. Baseline-aligned, because they are two labels on one line rather
 * than a heading with something floating beside it. */
.screen-brief .brief-top .card-head { padding: 0 0 9px; align-items: baseline; }
.screen-brief .brief-top .card-head h2 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
}
.screen-brief .brief-top .more { font-size: 12px; color: var(--faint); }
.brief-lead {
  font-size: var(--t-lead);
  line-height: 1.62;
  letter-spacing: -0.004em;
  color: var(--ink);
  /* Four sentences at 16.5px across a 1180px page is a line the eye loses its
   * place on. 74 characters is the drawing's, and it is the only thing on this
   * screen that is narrower than its column. */
  max-width: 74ch;
}
/* Everything else with a `.card-head` on this screen — "Earlier", "No brief
 * yet" — stays chrome and stays quiet. */
.screen-brief .card-head h2 { font-size: var(--t-subject); color: var(--muted); }

/* --- level two: the two columns ------------------------------------------ */

/* Stacked on a phone, side by side on a desk. `.cols` and `.col-side` are the
 * Today screen's components; the widths and the treatment are this screen's. */
.screen-brief .cols { display: grid; gap: 18px; align-items: start; }
.screen-brief .col-main, .screen-brief .col-side { display: grid; gap: 18px; align-content: start; }

/* A section is a card here and a bare label everywhere else, and that is not a
 * contradiction of `beach.css`'s comment about six identical white cards. What
 * was wrong on Today is a column of boxes with nothing leading it; what is right
 * here is a column of boxes under something that does. */
.screen-brief .section {
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.screen-brief .section-head {
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
}
.screen-brief .section-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.screen-brief .section-head .more { font-size: 12px; font-weight: 600; }
.screen-brief .section-head a.more { font-weight: 500; }

/* --- rows ----------------------------------------------------------------- */

/* `13px 18px` with a hairline between and none after the last, which is the
 * density the drawing has and the thing a stack of loose text cannot do: it is
 * what makes eight claims read as a list rather than as a page of paragraphs.
 *
 * Three parts on one line — the pip, what the row says, and the tap — because
 * the tap is centred against the whole row while the headline and its sub-line
 * are stacked inside it. That is the one thing the markup gained: `.row-main`. */
.screen-brief .section .rows { display: block; }
.screen-brief .section .row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
}
.screen-brief .section .row:last-child { border-bottom: 0; }
.screen-brief .row-main { display: grid; gap: 2px; flex: 1; min-width: 0; }
.screen-brief .row-main > * { min-width: 0; }

.screen-brief .row-title { font-size: 14.5px; font-weight: 500; }
.screen-brief .row-sub { font-size: var(--t-sub); color: var(--muted); }

/* One line and an ellipsis, rather than two lines and a wrap. A row is a thing
 * he is scanning for; the whole of a long subject is in `title` when the server
 * cut it, and all of it is in the record at the bottom of the page. */
.screen-brief .section .row-title {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* The rail down the left column: a pip per row, `--line` on every one of them
 * but the overdue row's. */
.screen-brief .pip {
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--line);
}

/* **The one coloured thing on the page.** A task whose date has gone, in the
 * warn tokens and nothing else in them — the fill, the pip and the word. The
 * predicate is `core.brief.sections.past_due`, read off the claim the composer
 * wrote, so the colour on the screen agrees with the sentence in the email. */
.screen-brief .row.is-overdue { background: var(--warn-soft); }
.screen-brief .row.is-overdue .pip { background: var(--warn); }
.screen-brief .row-sub.flag { color: var(--warn); font-weight: 600; }

/* The citation, which used to be a bordered chip on a surface — a box, under a
 * row, inside a page of boxes. It is the quietest thing on the screen, which is
 * what a citation is. `.source` keeps its box everywhere else. */
.screen-brief .source {
  padding: 0;
  gap: 5px;
  border: 0;
  background: none;
  color: var(--faint);
  font-weight: 400;
}

/* The tap, as the drawing has it: a small pill at the right of its row, centred
 * against the whole of it, rather than a bordered block on a line of its own
 * underneath. Everything else about the control is `handled.css`'s and stays
 * there — the height is `--tap` because this is a phone, and the colour is the
 * same on all three screens that draw it. One control, one shape. */
.screen-brief .handled { flex: none; align-self: center; margin-top: 0; }
.screen-brief .handled-mark, .screen-brief .handled-undo, .screen-brief .handled-said {
  border-radius: 999px;
  padding: 0 13px;
  font-size: var(--t-sub);
}

/* --- the right column: information, not work ----------------------------- */

/* Quieter in four ways at once, because one of them alone reads as an accident:
 * no fill, a dashed hairline, smaller type and a lighter weight. He should be
 * able to tell which half of this page is asking him for something without
 * reading either. */
.screen-brief .col-side .section { background: none; border-style: dashed; }
.screen-brief .col-side .row { padding: 11px 18px; }
.screen-brief .col-side .row-title { font-size: 13.5px; font-weight: 400; color: var(--ink); }
.screen-brief .col-side .row-sub { font-size: 12px; color: var(--faint); }

/* "What I handled", which is one line rather than one row per audit row. It is a
 * sentence and not a headline, so it wraps rather than clamping — there is
 * nothing behind it to open, and a summary cut short is a count he cannot
 * read. */
.screen-brief .row-said { padding: 14px 18px; }
.screen-brief .section .row-said .row-title {
  display: block;
  overflow: visible;
  white-space: normal;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.5;
}

/* --- level three: the record --------------------------------------------- */

/* What was actually emailed, folded shut and last. The record, not the read.
 *
 * Drawn as a real control, because left to itself it was not one. A `<summary>`
 * is `display: list-item` and draws a disclosure triangle of the browser's own,
 * and the engines disagree about which pseudo-element that is — `::marker` in
 * Blink and Gecko, `::-webkit-details-marker` in WebKit — so all three ways of
 * turning it off are here and the chevron at the end is ours. The failure it
 * produced is worth knowing: the triangle, then `svg.ic`'s `display: block`
 * pushing the label onto a line of its own, so the whole thing read as a stray
 * glyph above an unattached sentence. */
.screen-brief .brief-record { margin-top: 6px; }
.brief-record > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}
.brief-record > summary::-webkit-details-marker { display: none; }
.brief-record > summary::marker { content: ""; }
.brief-record > summary:hover { color: var(--ink); border-color: var(--muted); }
/* The label takes the room, so the chevron sits at the end and says which way. */
.brief-record-name { flex: 1; }
.brief-record[open] > summary > .ic:last-child { transform: rotate(180deg); }
.brief-record .draft-body { margin-top: 10px; color: var(--muted); font-size: 12.5px; }