/* todo-command.css — the To-Do COMMAND BAR inside the black hero (js/pop.js, B4).
   Nick's call: fill the empty hero band with the counts that matter, the single next
   thing, and a way to add without leaving the app. Lives on the dark hero, so it uses
   light-on-dark values rather than the app's light-surface tokens. */

.pp-cmd {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .13);
  display: grid;
  gap: 10px;
}

/* ---- chips: Overdue · Today · This week ---- */
.pp-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.pp-chip {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 5px 11px; border-radius: 999px;
  font-size: 12px; letter-spacing: .02em;
  color: rgba(255, 255, 255, .88);
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .12);
  white-space: nowrap;
}
.pp-chip b { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pp-chip.is-late  { background: rgba(217, 74, 61, .26); border-color: rgba(217, 74, 61, .5); }
.pp-chip.is-today { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .26); }
.pp-chip.is-zero  { opacity: .42; }

/* ---- next-due item ---- */
.pp-next {
  font-size: 14px; line-height: 1.35;
  color: #fff;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
}
.pp-next-lb {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: rgba(255, 255, 255, .5);
}
.pp-late {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: #ffb3aa;
}

/* ---- + add task ---- */
.pp-add { display: flex; gap: 8px; align-items: center; }
.pp-add-in {
  flex: 1 1 auto; min-width: 0;
  padding: 9px 12px; border-radius: 10px;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff; font-size: 14px; font-family: inherit;
}
.pp-add-in::placeholder { color: rgba(255, 255, 255, .45); }
.pp-add-in:focus {
  outline: none;
  border-color: rgba(255, 255, 255, .42);
  background: rgba(255, 255, 255, .14);
}
.pp-add-go {
  flex: 0 0 auto;
  padding: 9px 16px; border-radius: 10px; border: 0;
  background: #fff; color: #1d1b19;
  font-size: 13px; font-weight: 700; font-family: inherit;
  cursor: pointer;
}
.pp-add-go:disabled { opacity: .6; cursor: default; }
.pp-add-go:active { transform: translateY(1px); }

/* On the "all clear" celebration state the hero centers itself — keep the bar readable. */
.pp-hero.pp-clear .pp-cmd { text-align: left; }