/* The inbox card on the chat home, the first item of the home column. A highlighted box takes the cyan hairline
   and no shadow (docs/DESIGN_MATH.md section 6a); the gold leading rule went with the 13 September revert
   (section 6b). The eyebrow is the chat's gold words (--gold on paper, --gold2 on navy), the subject is the line,
   what follows it is muted, and the one gold fill is the action, gold-ink on gold2. Lines wrap rather than being
   cut; tests/test_chat_home_attention_browser.py holds that at nine widths in both themes. */
#mailAttention{display:flex;align-items:flex-start;gap:var(--sp2);box-sizing:border-box;margin-block:var(--sp2);padding:var(--sp2);text-align:start;background:var(--panel);color:var(--ink);border:var(--bw-hair) solid var(--cyan);font-size:var(--fs-step--1);line-height:var(--lb-step--1)}
#mailAttention .mail-attention-text{display:flex;flex-direction:column;gap:var(--sp-half);flex:1;min-width:0}
#mailAttention p{margin:0;overflow-wrap:break-word}
#mailAttention .mail-attention-eyebrow{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--sp1);color:var(--gold);font-size:var(--fs-step--2);line-height:var(--lb-step--2)}
body:not(.light) #mailAttention .mail-attention-eyebrow{color:var(--gold2)}
#mailAttention .mail-attention-kicker{font-weight:var(--w-semi);letter-spacing:var(--tr-wide);text-transform:uppercase}
#mailAttention .mail-attention-subject{font-size:var(--fs-step-0);line-height:var(--lb-step-0);font-weight:var(--w-semi)}
#mailAttention .mail-attention-meta,#mailAttention .mail-attention-next,#mailAttention .mail-attention-invite{color:var(--mut)}
#mailAttention .mail-attention-work,#mailAttention .mail-attention-go{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;flex:none;min-height:var(--sp-tap);min-width:var(--sp-tap);padding:0 var(--sp2);background:var(--gold2);color:var(--gold-ink);border:var(--bw-hair) solid var(--gold2);font:inherit;font-weight:var(--w-semi);text-decoration:none;cursor:pointer}
/* Not connected yet: an invitation, so a hairline secondary in the chat's gold words, never a second gold fill. */
#mailAttention .mail-attention-go{background:transparent;color:var(--gold);border-color:currentColor}
body:not(.light) #mailAttention .mail-attention-go{color:var(--gold2)}
#mailAttention .mail-attention-work:focus-visible,#mailAttention .mail-attention-go:focus-visible{outline:var(--bw-rule) solid var(--ink);outline-offset:var(--bw-rule)}
@media(max-width:640px){#mailAttention{flex-direction:column;align-items:stretch}#mailAttention .mail-attention-work,#mailAttention .mail-attention-go{align-self:flex-start}}