/* The Inbox (D2 Task 28), from Inbox.dc.html (approved 07/11). Every colour is a token: a kind's tile and its segment's dot take the work
   colours (new mail the new purple, needs a person the missing yellow, failed the declined orange), the panels the third surface, a
   refusal the declined ink. The card, the buttons, the fields and the segments are components.css; motion is the base sheet's to turn
   off. Listed in STYLESHEETS (src/web/routes-pages.js), after rules.css. */

.ibRoot { padding: 28px 32px 64px; }
.ibWrap { display: flex; flex-direction: column; gap: 16px; max-width: 960px; margin: 0 auto; }

/* ---- The header and the segments ---- */
.ibHead { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.ibTitle { flex: 1 1 320px; min-width: 0; }
.ibTitle h1 { margin: 0; font: 600 26px var(--font-head); letter-spacing: -0.015em; }
.ibSub { color: var(--ink-3); font-size: 13.5px; }
.ibSegs { flex-wrap: wrap; gap: 3px; border-radius: var(--r-lg); }
.ibSegs .seg { flex: 1 1 140px; min-height: 40px; border: 0; background: transparent; color: var(--ink-2); font: 600 13px var(--font-body); }
.ibSegs .segOn { background: var(--surface); color: var(--ink); }
.ibSegs .n { color: var(--ink-2); }
.ibDot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; vertical-align: 1px; }
.ibDot.ibTone-new { background: var(--status-new-mid); }
.ibDot.ibTone-missing { background: var(--status-missing-mid); }
.ibDot.ibTone-declined { background: var(--status-declined-mid); }

/* ---- Nothing waiting ---- */
.ibEmpty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 20px; text-align: center; }
.ibEmptyMark { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 13px; background: var(--status-ready-bg); color: var(--status-ready-ink); }
.ibEmptyTitle { font: 600 17px var(--font-head); }

/* ---- An item ---- */
.ibItem { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; animation-delay: var(--ib-delay, 0s); }
.ibTop { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 14px; }
.ibTile { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-lg); }
.ibTile.ibTone-new { background: var(--status-new-bg); color: var(--status-new-ink); }
.ibTile.ibTone-missing { background: var(--status-missing-bg); color: var(--status-missing-ink); }
.ibTile.ibTone-declined { background: var(--status-declined-bg); color: var(--status-declined-ink); }
.ibBody { flex: 1 1 320px; min-width: 0; }
.ibLine { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ibLine h2 { margin: 0; font: 600 16px var(--font-head); }
.ibWhen { color: var(--ink-3); font-size: 12.5px; }
.ibWhat { font-size: 14px; overflow-wrap: anywhere; }
.ibHint { color: var(--ink-3); font-size: 13px; }
.ibActs { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 54px; }

/* ---- The panels under an item ---- */
.ibPanel { display: flex; flex-direction: column; gap: 12px; margin-left: 54px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface-3); animation: rise .35s var(--ease-out) both; }
.ibPanelRow { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.ibModes { max-width: 360px; border-radius: var(--r-lg); }
.ibModes .seg { min-height: 38px; border: 0; background: transparent; color: var(--ink); font: 600 12.5px var(--font-body); }
.ibModes .segOn { background: var(--surface); }
.ibModes .seg:disabled { color: var(--ink-3); cursor: not-allowed; }
.ibField { display: flex; flex-direction: column; gap: 6px; max-width: 360px; }
.ibField label { color: var(--ink-2); font-size: 13px; font-weight: 500; }
.ibDealField { flex: 0 1 220px; min-width: 0; }
.ibCheck { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; cursor: pointer; }
.ibCheck input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }
.ibNote { color: var(--ink-3); font-size: 13px; }
.ibError { flex-basis: 100%; color: var(--status-declined-ink); font-size: 13px; }
.ibPanelActs { display: flex; flex-wrap: wrap; gap: 8px; }
.ibPanel .btn.primary { padding: 0 18px; }
.ibCancel { padding: 0 12px; color: var(--ink-3); font-weight: 500; }