/* /document-expiry-planner only: the document row and the urgency
   timeline bar. Scoped under #deApp. */
#deApp .de-row { border: 1px solid var(--bm-line); border-radius: 12px; padding: 10px 12px 4px; margin-bottom: 10px; background: var(--bm-bg); }
#deApp .de-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px 10px; }
#deApp .de-grid .ic-field { margin: 0 0 6px; min-width: 0; }
#deApp .de-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
#deApp .de-head .ic-field { flex: 1 1 160px; margin: 0; min-width: 0; }
#deApp .de-pill { font-size: .72rem; font-weight: 600; border-radius: 999px; padding: 2px 9px; border: 1px solid var(--bm-line); white-space: nowrap; }
#deApp .de-pill.is-expired, #deApp .de-pill.is-overdue { background: var(--bm-bad-soft, var(--bm-accent-soft)); }
#deApp .de-pill.is-soon { background: var(--bm-warn-soft, var(--bm-accent-soft)); }
#deApp .de-row.is-expired, #deApp .de-row.is-overdue { border-color: var(--bm-bad, var(--bm-line)); }
@media (forced-colors: active) { #deApp .de-pill { border: 1px solid CanvasText; } }