/* inbox: styles for this area only (Inbox, Channels). Tokens only (castomo-dashkit rule 4: no colour literal outside 00-tokens.css), logical properties only. */

/* ---- the Messages tab ------------------------------------------------------------------------------------------ */

.inbox-toolbar { align-items: end; }
.inbox-filter { display: grid; gap: var(--s-1); font-size: var(--t-1); color: var(--ink-3); font-weight: 600; min-inline-size: 0; }
.inbox-filter select { font-weight: 400; color: var(--ink); }
/* The switch sits level with the two selects beside it, with its words beside it rather than above. */
.inbox-filter-switch { display: flex; align-items: center; gap: var(--s0); block-size: var(--control-h); }

.inbox-list { display: grid; gap: var(--gap); }

.inbox-card { display: grid; gap: var(--s1); }
/* A message nobody has looked at: a rule down its leading edge, and the "New" badge says it in words as well, so it
   is never told by colour alone. */
.inbox-card[data-new="true"] { box-shadow: inset 3px 0 0 var(--accent-ink); }
.inbox-card[data-status="ignored"] { opacity: .8; }

.inbox-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--s0) var(--s2); }
.inbox-who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s0); min-inline-size: 0; }
.inbox-who b { overflow-wrap: anywhere; }
.inbox-subject, .inbox-body { margin: 0; }
.inbox-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.inbox-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s1); }
.inbox-foot p { margin: 0; }

/* ---- dialogs and forms ----------------------------------------------------------------------------------------- */

.inbox-textarea { inline-size: 100%; min-block-size: 8rem; resize: vertical; font: inherit; }
.inbox-check { display: flex; align-items: center; gap: var(--s0); }

/* What is being answered, quoted above the box. A rule marks it; it gets no extra padding of its own. */
.inbox-quote { margin: 0; padding-inline-start: var(--s1); border-inline-start: 2px solid var(--rule-strong); color: var(--ink-3); display: grid; gap: var(--s-1); max-block-size: 9rem; overflow: auto; }
.inbox-quote p { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }

/* A template's words, or a filled-in result: preformatted, wrapped, never wider than its box. */
.inbox-rendered { margin: 0; padding: var(--s1); border: var(--rule-w) solid var(--rule); border-radius: var(--radius-sm); background: var(--accent-wash); font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; max-block-size: 16rem; overflow: auto; }
.inbox-placeholder .mono { font-size: var(--t-1); }
.inbox-kind { margin: 0; font-size: var(--t1); }
.inbox-template { display: grid; gap: var(--s1); }
.inbox-error { color: var(--bad); margin: var(--s-1) 0 0; overflow-wrap: anywhere; }

/* ---- Channels --------------------------------------------------------------------------------------------------- */

.channel-card, .channel-kind { display: grid; gap: var(--s1); align-content: start; }
.channel-card .alert { margin: 0; }
.channel-kind p { margin: 0; }
.channel-kind .btn { justify-self: start; }

/* A pairing token or a form's address: shown whole, wrapped anywhere, never scrolling sideways. */
.inbox-token { display: block; padding: var(--s1); border: var(--rule-w) solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--accent-wash); overflow-wrap: anywhere; user-select: all; }

/* A mailbox's three groups of fields. The group marks itself with a rule and a heading, not with extra room. */
.inbox-fieldset { margin: 0; padding: var(--s1) 0 0; border: 0; border-block-start: var(--rule-w) solid var(--rule); display: grid; gap: var(--s1); min-inline-size: 0; }
.inbox-fieldset legend { padding-inline-end: var(--s1); font-weight: 600; }

/* ---- phones: the kit's 560 step. The filters go one under another, the head's second line wraps under the first. */
@media (max-width: 560px) {
  .inbox-filter { flex: 1 1 100%; }
  .inbox-filter-switch { flex: 1 1 100%; }
  .inbox-head { gap: var(--s0); }
}

/* ---- tables: an address is not broken mid-word where the table has room (the kit's 860 step; on a phone the row is a
   card and the address may wrap). Without this the auto layout squeezes the first column to a few letters. */
@media (min-width: 861px) {
  .inbox-to small { white-space: nowrap; overflow-wrap: normal; }
}

/* Three tabs with icons do not fit the 343px a phone leaves them; the kit lets the strip scroll, which cuts the last
   label in half. Tighter padding makes them fit, on these two pages only (the kit's 420 step). */
@media (max-width: 420px) {
  .inbox-tabs > .tabs [role="tab"] { padding-inline: var(--s0); gap: var(--s-1); }
}

/* Three tall tiles in a stack push the messages off a phone's first screen: the numbers stay, their footnotes go
   (the kit's 560 step). The footnotes only say what the label already does. */
@media (max-width: 560px) {
  .inbox-stats .stat-foot { display: none; }
}