/* ---------- Lists (needs you, stops) ---------- */
.stack { display: grid; gap: 12px; max-width: 820px; }
.item { background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--warn); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.item.info { border-left-color: var(--accent); }
.item .why { font-size: 11.5px; font-weight: 700; color: var(--warn); text-transform: uppercase; letter-spacing: 0.05em; }
.item.info .why { color: var(--accent); }
.item h3 { margin: 4px 0 4px; font-size: 15px; line-height: 1.35; }
.item p { margin: 0 0 10px; color: var(--ink-2); font-size: 13.5px; }
.item .ev { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.item .ev span b { color: var(--ink-2); font-weight: 600; }
.needs-brief { margin: 0 0 10px; padding: 10px 12px; background: var(--surface-2); border-radius: 8px; border: 1px solid var(--rule); font-size: 13.5px; color: var(--ink-2); display: grid; gap: 6px; }
.needs-brief p { margin: 0; }
.needs-brief-agent { border-color: var(--accent); }
.needs-brief-label { margin: 0 0 2px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 650; }
.needs-brief-opts, .needs-brief-facts { margin: 4px 0 0; padding-left: 18px; font-size: 13px; }
.needs-brief-status.warn { color: var(--warn); }
.needs-evidence { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.needs-evidence summary { cursor: pointer; font-weight: 600; color: var(--ink-2); }
.needs-fallback-explain { margin-top: -4px; }
.needs-action-hints { margin: 6px 0 0; padding-left: 18px; }
.item .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.item .row .when { margin-left: auto; font-size: 12px; color: var(--muted); }
.inbox-h { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 22px 0 10px; }
.inbox-h:first-of-type { margin-top: 4px; }
.item.ask .ask-why { white-space: pre-line; }
.item .ask-steps { margin: 0 0 12px; padding-left: 20px; font-size: 13.5px; color: var(--ink-2); display: grid; gap: 4px; }
.item .ask-copy { margin: 0 0 12px; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.item .ask-copy-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; background: var(--surface-2); font-size: 12px; color: var(--muted); font-weight: 600; }
.item .ask-copy pre { margin: 0; padding: 10px; font-family: var(--mono); font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 260px; overflow: auto; }
.item .ask-links { margin-bottom: 12px; }
.item .ask-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin-bottom: 12px; }
.ask-opt { text-align: left; font: inherit; background: var(--surface); color: var(--ink); border: 1px solid var(--rule-strong); border-radius: 8px; padding: 10px 12px; cursor: pointer; display: grid; gap: 3px; min-width: 0; }
.ask-opt:hover { border-color: var(--accent); }
.ask-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ask-opt.rec { border-color: var(--accent); background: var(--accent-soft); }
.ask-opt b { font-size: 13.5px; }
.ask-opt span { font-size: 12.5px; color: var(--muted); }
.item .ask-note { margin-bottom: 10px; }
.item .ask-resurface { margin: 0 0 10px; }
.ask-snooze { margin: 0 0 12px; display: grid; gap: 6px; }
.ask-snooze-btns { flex-wrap: wrap; gap: 6px; }
.item.answered p { margin-bottom: 6px; }
.item .item-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.idchip { font-family: var(--mono); font-size: 11.5px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--rule); border-radius: 999px; padding: 1px 8px; cursor: pointer; max-width: 100%; overflow-wrap: anywhere; text-align: left; }
.idchip:hover { color: var(--ink); border-color: var(--accent); }
.idchip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.idchip-copied { border-color: var(--good, #3fb950); color: var(--good, #3fb950); }

.inbox-card.item { padding: 0; overflow: hidden; }
.inbox-compact { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; padding: 10px 12px; width: 100%; box-sizing: border-box; }
.inbox-row { flex: 1 1 12rem; min-width: 0; display: flex; align-items: flex-start; gap: 8px; margin: 0; border: none; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; padding: 0; }
.inbox-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.inbox-row-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.inbox-row-title { font-size: 14px; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.inbox-row-summary { font-size: 12.5px; line-height: 1.35; overflow-wrap: anywhere; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.inbox-row-badges { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.inbox-badge { font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; padding: 2px 7px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--rule); color: var(--muted); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.inbox-chevron { color: var(--muted); flex-shrink: 0; line-height: 1.35; padding-top: 2px; }
.inbox-body { padding: 12px 16px 14px; border-top: 1px solid var(--rule); }
.inbox-body[hidden] { display: none !important; }
.inbox-bulk { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.page-head .inbox-bulk { flex-shrink: 0; }
.item-top-stop { margin-bottom: 8px; }

/* ---------- Needs you: one group per task, age tint ---------- */
.needs-group { display: grid; gap: 8px; max-width: 820px; }
.needs-group-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 20px 0 2px; font-size: 14px; font-weight: 650; color: var(--ink); min-width: 0; }
.needs-group:first-of-type .needs-group-h { margin-top: 4px; }
.needs-group-title { min-width: 0; overflow-wrap: anywhere; }
.needs-age { font-size: 12px; font-weight: 600; color: var(--muted); margin-left: auto; white-space: nowrap; }
.needs-age.age-amber { color: var(--warn); }
.needs-age.age-red { color: var(--bad); }
.needs-entry.age-amber > .item { border-left-color: var(--warn); }
.needs-entry.age-red > .item { border-left-color: var(--bad); }