/* Ticket RF6: Memos on the web (design/brand/proposed/memos/web.html, screens 1 to 3, approved 13 Oct 2026).
   Every rule is scoped to .memos, the root of the three memo pages, because this file loads on every page.
   Tokens only. The page header, buttons, cards, chips, fields and tables are the web base's own; what is
   here is the memo layout the design adds on top of them. */

/* Layout: the design's stack (one column, 24 apart) and its row with the action pushed to the right. */
.memos .stack { display: grid; gap: var(--g-space-24); }
.memos .stack > * { min-width: 0; margin: 0; }
.memos .row.between { justify-content: space-between; flex-wrap: wrap; gap: var(--g-space-16); }
.memos .row.between > * { margin: 0; }
.memos .row > form { margin: 0; }
.memos > .stack { margin-top: var(--g-space-24); }
.memos .page-intro { margin-bottom: 0; }

/* Screen 2: the list. Titles and outlet names are whatever HQ typed, so cells wrap anywhere; the table
   keeps a phone's width and scrolls inside its own box below that, never the page. */
.memos .tablewrap { max-width: 100%; overflow: auto; border-radius: var(--g-radius-card); box-shadow: var(--g-shadow-card); }
.memos .tablewrap .table { table-layout: fixed; }
.memos .table th, .memos .table td { vertical-align: top; overflow-wrap: anywhere; }
.memos .memo-list .table { min-width: var(--g-size-phone); }
.memos .memo-list .table th:first-child { width: 30%; }
.memos .memo-list .memo-read-count { display: block; }
.memos .memo-list .memo-read-count + .chip { margin-top: var(--g-space-8); }
.memos .text-button { display: inline-flex; align-items: center; min-height: var(--g-size-touch); padding: var(--g-space-8) var(--g-space-12); border-radius: var(--g-radius-button); background: var(--g-color-mint); color: var(--g-color-navy); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.memos .text-button:hover { box-shadow: var(--g-shadow-card); }
.memos .memo-list .chip { white-space: normal; }

/* Screen 1: the form. Message on the left, Who it goes to on a mint panel on the right; one column when
   the window is narrower than two phones. */
.memos .columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--g-size-phone)), 1fr)); gap: var(--g-space-32); }
.memos .columns > * { min-width: 0; }
.memos .field { margin-bottom: 0; }
.memos .memo-label { font-size: var(--g-font-size-small); font-weight: 700; color: var(--g-color-navy); }
.memos .audience { align-self: start; padding: var(--g-space-24); border-radius: var(--g-radius-card); background: var(--g-color-mint); }
.memos .audience h2 { font-size: var(--g-font-size-heading); }
/* Muted text fails contrast on mint (IMPLEMENTATION.md): small text on the panel is navy. */
.memos .audience .helper { color: var(--g-color-navy); }
.memos fieldset { margin: 0; }
.memos legend { margin-bottom: var(--g-space-8); }
.memos .choice { display: flex; align-items: center; gap: var(--g-space-12); min-height: var(--g-size-touch); font-size: var(--g-font-size-body); font-weight: 400; }
.memos .error-text { margin: 0; font-size: var(--g-font-size-small); font-weight: 600; color: var(--g-color-error); }

/* The rich text message (DECISIONS 13 Oct) in the design's textarea: white, a --g-space-4 muted edge, ten lines tall. */
.memos .rte__toolbar { display: flex; flex-wrap: wrap; gap: var(--g-space-8); }
.memos .rte__toolbar .btn { font-size: var(--g-font-size-small); }
.memos .rte__toolbar .btn[aria-pressed="true"] { background: var(--g-color-navy); color: var(--g-color-white); }
.memos .rte__editor { min-height: calc(var(--g-space-48) * 5); padding: var(--g-space-8) var(--g-space-12); border: var(--g-space-4) solid var(--g-color-muted); border-radius: var(--g-radius-input); background: var(--g-color-white); overflow-wrap: anywhere; }
.memos .rte__editor[aria-invalid="true"] { border-color: var(--g-color-error); }
.memos .rte__link { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--g-space-8); }
.memos .rte__link-field { flex: 1 1 calc(var(--g-space-48) * 5); }
.memos .rte__link .error-text { flex-basis: 100%; }
.memos .rte__editor p, .memos .memo-body p { margin: 0 0 var(--g-space-12); }
.memos .rte__editor ul, .memos .rte__editor ol, .memos .memo-body ul, .memos .memo-body ol { margin: 0 0 var(--g-space-12); padding-left: var(--g-space-24); }

/* Photos and videos: the form's picker, and the memo's files as cards that never crop. */
.memos .media-section { display: grid; gap: var(--g-space-16); }
.memos .media-section > * { margin: 0; }
.memos .media-section h2 { font-size: var(--g-font-size-heading); }
.memos .media-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--g-size-phone)), 1fr)); gap: var(--g-space-16); }
.memos .media-card { display: grid; gap: var(--g-space-12); align-content: start; min-width: 0; margin: 0; padding: var(--g-space-16); border-radius: var(--g-radius-card); background: var(--g-color-white); box-shadow: var(--g-shadow-card); }
.memos .media-card img, .memos .media-card video { display: block; width: 100%; max-height: var(--g-size-phone); object-fit: contain; background: var(--g-color-ivory); border-radius: var(--g-radius-input); }

/* Screen 3: the memo, then who has read it. The message wraps anywhere; the people list scrolls on its
   own (and from the keyboard) when it is long. */
.memos .article { overflow-wrap: anywhere; }
.memos .article > :last-child { margin-bottom: 0; }
.memos .memo-confirmations h2 { font-size: var(--g-font-size-heading); }
.memos .memo-confirmations .memo-read-count + .chip { margin-left: var(--g-space-8); }
.memos .scrolllist { display: grid; gap: var(--g-space-16); max-height: calc(var(--g-size-phone) + var(--g-space-48)); overflow: auto; }
.memos .scrolllist:focus-visible { outline: var(--g-space-4) solid var(--g-color-navy); outline-offset: var(--g-space-4); }
.memos caption { padding: var(--g-space-16); background: var(--g-color-mint); color: var(--g-color-navy); font-size: var(--g-font-size-heading-small); font-weight: 600; text-align: left; overflow-wrap: anywhere; }
.memos .scrolllist .table th { background: var(--g-color-ivory); }