/* Deadlines (2026-10-22): the Due chip states, the Due today / Overdue strip on the Pipeline, the panel in a
   card's drawer (ask for more time, approve, decline) and the editor's items in the bell. Only the base theme
   variables, each with a fallback, so it reads right in the current look and in the Cinema look. Overdue and
   errors use the signal red where a theme defines one; green is only ever the finished state. See js/deadlines.js. */

.chip.due.soon, td.soon { color: var(--warn, #e0a63f); font-weight: 600; }
.chip.due.overdue, td.overdue { color: var(--signal, var(--red, #ff4b3c)); font-weight: 700; }
.chip.due.locked, td.due-cell.locked { cursor: default; }

/* the strip */
.deadline-strip { display: flex; flex-direction: column; gap: 8px; box-sizing: border-box; max-width: calc(100vw - 32px); margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--line, #2e2823); border-radius: 8px; background: var(--panel, transparent); }
.deadline-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.deadline-label { flex: none; min-width: 112px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted, #a89e97); }
.deadline-pill { display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; padding: 5px 11px; border: 1px solid var(--line, #2e2823); border-radius: 999px; background: transparent; color: var(--ink, #f2ede7); font: inherit; font-size: 12.5px; line-height: 1.3; text-align: left; cursor: pointer; }
.deadline-pill:hover, .deadline-pill:focus-visible { border-color: var(--ink, #f2ede7); outline: none; }
.deadline-pill b { font-weight: 700; white-space: nowrap; }
.deadline-pill.overdue b { color: var(--signal, var(--red, #ff4b3c)); }
.deadline-pill.today b, .deadline-pill.soon b { color: var(--warn, #e0a63f); }
.deadline-pill .deadline-title { min-width: 0; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deadline-pill small { color: var(--muted, #a89e97); white-space: nowrap; }
.deadline-more { font-size: 12px; color: var(--muted, #a89e97); }

/* the panel in the drawer */
.deadline-panel { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--line, #2e2823); border-radius: 8px; }
.deadline-panel.overdue { border-color: var(--signal, var(--red, #ff4b3c)); }
.deadline-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13.5px; }
.deadline-state { font-size: 12.5px; color: var(--muted, #a89e97); }
.deadline-state.overdue { color: var(--signal, var(--red, #ff4b3c)); font-weight: 700; }
.deadline-state.today, .deadline-state.soon { color: var(--warn, #e0a63f); font-weight: 600; }
.deadline-state.done { color: var(--good, #5bc378); }
.deadline-panel .hint { margin: 6px 0 0; font-size: 12px; }
.deadline-ask { margin-top: 10px; }
.deadline-ask p { margin: 0 0 8px; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.deadline-form { display: grid; gap: 8px; margin-top: 10px; }
.deadline-form[hidden] { display: none; }
.deadline-form label { display: grid; gap: 4px; font-size: 12px; color: var(--muted, #a89e97); }
.deadline-form input, .deadline-form textarea { box-sizing: border-box; width: 100%; margin: 0; }
.deadline-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* the bell */
.notif-deadlines { border-bottom: 1px solid var(--line, #2e2823); padding-bottom: 4px; margin-bottom: 4px; }
.notif-sub { padding: 8px 12px 2px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted, #a89e97); }
/* the editor's own items look like the bell's messages but are not messages (nothing to mark read), so they have their own class and click */
.notif-dl { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--line, #2e2823); color: var(--ink, #f2ede7); padding: 10px 12px; cursor: pointer; font: inherit; }
.notif-dl:hover, .notif-dl:focus-visible { background: var(--panel2, transparent); outline: none; }
.notif-dl.overdue .notif-body b { color: var(--signal, var(--red, #ff4b3c)); }
.notif-dl.today .notif-body b, .notif-dl.soon .notif-body b { color: var(--warn, #e0a63f); }

@media (max-width: 520px) {
  .deadline-label { min-width: 0; width: 100%; }
  .deadline-pill .deadline-title { max-width: 190px; }
}