/* The calm redesign (Oct 16, 2026): Follow-ups (followups/). Loaded after styles.css, so a rule here wins over the same rule there.
   Docs/Hub design standard.md has the rules (Motion; Calm and focus). Colours only from the tokens in styles.css.
   The hero is the next message waiting for Brandon's OK; the rest of the queue is smaller under it. */
.screen[data-screen="followups"] { gap: 16px; }
.fu-grid { gap: 24px; }
.fu-wait { display: flex; flex-direction: column; min-width: 0; }
.fu-cards { display: flex; flex-direction: column; gap: 12px; }
.fu-h { margin: 8px 0 -2px; }
.fu-cust, .fu-recent { min-width: 0; }
.fu-side { gap: 20px; }
@media screen and (min-width: 900px) { .fu-grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 32px; } }

/* ---------- The hero: the message waiting for your OK ---------- */
.hero.fu-q { gap: 10px; }
.fu-q.hero .hero-v { font-size: 2.5rem; }
body.big-text .fu-q.hero .hero-v { font-size: 2.75rem; }
.fu-q.hero .hero-n .namelink { font: inherit; letter-spacing: inherit; color: inherit; text-decoration: none; }
.fu-q.hero .hero-l { overflow-wrap: anywhere; }
.fu-q.hero .fu-checks { color: var(--on-hero-2); }
.fu-q.hero .fu-checks.dot-before { color: var(--on-hero); }
.fu-q.hero .fu-warn { color: var(--on-hero); }
.fu-q.hero .fu-warn[data-reply-link] { color: var(--text); }
.fu-q.hero .fu-warn[data-reply-link] .btn.link { color: var(--link); border-color: transparent; background: none; }
.fu-q.hero .li-pills .pill { border: 1px solid var(--hero-line); background: transparent; color: var(--on-hero); }
.fu-q.hero .fu-bubble { align-self: stretch; max-width: none; border: 1px solid var(--hero-line); background: transparent; color: var(--on-hero);
  border-radius: 18px; font-size: .9375rem; }
.fu-q.hero .fu-email { border: 1px solid var(--hero-line); background: transparent; }
.fu-q.hero .fu-email-l { color: var(--on-hero-2); }
.fu-q.hero .fu-email-s { color: var(--on-hero); }
.fu-q.hero .fu-email-b > summary { color: var(--on-hero-2); }
.fu-q.hero .fu-email-b .msgp { color: var(--on-hero); }
.fu-q.hero .fu-edit-f label { color: var(--on-hero-2); }
.fu-q.hero .fu-edit textarea.reply-edit.fu-edit-box, .fu-q.hero .fu-edit .input { border: 1.5px solid var(--hero-line); background: var(--surface); color: var(--text); }
.fu-q.hero .fu-edit-s, .fu-q.hero .fu-edited { color: var(--on-hero-2); }
.fu-q.hero .fu-edit-s .btn.link, .fu-q.hero .fu-edited .btn.link { color: var(--on-hero); border-color: transparent; background: none; text-decoration: underline; }
.fu-q.hero .hero-a { display: block; margin-top: 6px; }
.fu-q.hero .hero-a > .pill { background: transparent; border: 1px solid var(--hero-line); color: var(--on-hero); }
.hero-calm[data-fu-none] { padding: 18px; }

/* ---------- Approve and send, with Edit and Don't send as drawings beside it ---------- */
.acts.fu-acts { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; }
.fu-acts .btn.fu-ok { grid-column: auto; flex: 1; min-width: 0; height: 48px; min-height: 48px; }
.fu-acts .ib { flex: none; }

/* ---------- The rest of the queue, smaller ---------- */
.card.fu-q { gap: 10px; padding: 16px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); }
.fu-q .card-t { font: 700 1rem/1.3 var(--rt-body); }
.fu-q .card-s { font-size: .8125rem; color: var(--text-2); }
.card.fu-q .fu-acts .btn.fu-ok { height: 44px; min-height: 44px; font-size: 1.0625rem; }
.card.fu-q .fu-bubble { font-size: .875rem; }

/* ---------- Customers, a quieter list ---------- */
.fu-hrow { align-items: baseline; }
.fu-c { gap: 8px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); }
.fu-c-h { flex-wrap: nowrap; gap: 6px; min-height: 36px; }
.fu-c-t { flex: 1 1 auto; font-size: 1rem; }
.fu-c-b { flex: none; gap: 0; margin-right: -6px; }
.fu-c .ib.fu-mini { width: 36px; height: 36px; }
.fu-c .ib.fu-mini .ic { width: 18px; height: 18px; }
.fu-c .ib.fu-rm { color: var(--rt-bad); }
.fu-c .ib.fu-mini[disabled] { opacity: .5; }
@media (pointer: coarse) { .fu-c .ib.fu-mini { width: 44px; height: 44px; } }
body.big-text .fu-c .ib.fu-mini { width: 48px; height: 48px; }
.fu-c-h .pill, .fu-c-h .fu-pill { flex: none; }
.fu-c-s { font-size: .8125rem; }

/* ---------- Sent lately: a fold ---------- */
.fu-recent .more { border-radius: var(--r-card); }
.fu-recent .more > .more-s { padding: 0 4px; }
.fu-recent .more-b { padding: 4px 0 8px; }
.fu-row { border: 1px solid var(--border); }

/* ---------- Trim pass (Oct 16): the queue and customers as rows that open with a tap ---------- */
.fu-qd > summary, .fu-cd > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.fu-qd > summary::-webkit-details-marker, .fu-cd > summary::-webkit-details-marker { display: none; }
.fu-qs .card-h { flex: 1; min-width: 0; }
.fu-qd > summary .chev, .fu-cd > summary .chev { flex: none; color: var(--text-3); transition: transform var(--t-press, .15s) var(--ease-out, ease-out); }
.fu-qd[open] > summary .chev, .fu-cd[open] > summary .chev { transform: rotate(180deg); }
.card.fu-q { padding: 12px 16px; gap: 0; }
.fu-qb { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }
.fu-c { padding: 10px 16px; }
.fu-cb { display: flex; flex-direction: column; gap: 10px; }
.fu-cbody { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; position: relative; }
.fu-cbody > .fu-c-b { align-self: flex-end; }
.fu-c-n { flex: none; font-size: .8125rem; color: var(--text-2); }
.fu-c-h { min-height: 40px; }
.fu-cd > summary.fu-c-h { flex-wrap: wrap; row-gap: 0; }
.fu-cd > summary .fu-c-t { flex: 1 1 0; min-width: 6em; }
.fu-cd > summary .fu-c-n { flex: 0 0 100%; order: 5; margin-top: -2px; }
.fu-cd > summary .chev { margin-left: auto; }