/* Needs (TasksDesktop, TasksPhone), the need page, the need checkbox the household and person pages share, and the
   Undo toast.  At 1024px and up the list sits beside the selected need's detail panel.  Below that the title and
   Open and Done tabs move into the navy header, rows open the need page and the toast sits above the tab bar. */

@media (min-width: 1024px) { .needs-phone-only { display: none !important; } }
@media (max-width: 1023px) { .needs-desktop-only { display: none !important; } }

/* Tabs, chips and the From and sort selects. */
.needs { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.needs-tools { display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap; }
.needs-selects { display: flex; gap: var(--space-12); }
.needs-selects .select { width: auto; height: 40px; font-size: 14px; }
@media (max-width: 1023px) {
  .needs-phone-tabs, .needs-phone-tabs .segmented { flex: 1 1 100%; }
  .needs-phone-tabs .segmented-item { flex: 1 1 0; text-align: center; }
  .needs-tools .chips { flex: 1 1 100%; }
  .needs-selects { flex: 1 1 100%; min-width: 0; }
  .needs-selects .select { flex: 1 1 0; min-width: 0; }
}

/* The list beside the detail panel. */
.needs-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
@media (min-width: 1024px) { .needs-layout { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); } }
.needs-groups { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* Groups: a titled card on desktop; on phones the title sits above the card. */
.needs-group { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
.needs-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-12); }
.needs-group-title { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: var(--weight-display); color: var(--walnut-900); }
.needs-group-count { font-size: 13px; font-weight: 700; color: var(--walnut-900); text-align: right; }
.needs-group-new .needs-group-title, .needs-group-new .needs-group-count { color: var(--ruby-800); }
.needs-group-done .needs-group-title, .needs-group-done .needs-group-count { color: var(--green-800); }
.needs-rows {
  list-style: none; margin: 0; padding: 0; background: var(--surface-card); border: 1px solid var(--border-card);
  border-radius: var(--radius-card); overflow: hidden;
}
@media (min-width: 1024px) {
  .needs-group {
    gap: 0; background: var(--surface-card); border: 1px solid var(--border-card); border-radius: var(--radius-card);
    overflow: hidden;
  }
  .needs-group-head { padding: 16px 20px 10px; }
  .needs-rows { border: 0; border-radius: 0; }
}

/* Rows. */
.needs-row {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 14px;
  border-top: 1px solid var(--border-row); background: #FFFFFF;
}
.needs-rows > .needs-row:first-child { border-top: 0; }
@media (min-width: 1024px) {
  .needs-row { grid-template-columns: 28px minmax(0, 1fr); gap: 14px; padding: 16px 20px; }
  .needs-rows > .needs-row:first-child { border-top: 1px solid var(--border-row); }
  .needs-row.is-selected { background: var(--navy-25); box-shadow: inset 0 0 0 1.5px var(--navy-700); }
}
.needs-row.is-done { background: var(--paper-25); }
.needs-row-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.needs-row-head { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; min-width: 0; }
.needs-row-household { font-size: 15px; font-weight: 700; text-decoration: none; color: var(--ink-900); overflow-wrap: anywhere; }
.needs-row-household:hover { color: var(--navy-700); text-decoration: underline; }
.needs-row-people { font-size: 12px; color: var(--ink-500); overflow-wrap: anywhere; }
.needs-row-text {
  font-size: 14px; line-height: 1.45; color: var(--ink-900); text-decoration: none; overflow-wrap: anywhere;
  white-space: pre-line;
}
@media (min-width: 1024px) { .needs-row-text { font-size: 15px; } }
.needs-row-text:hover { color: var(--ink-900); text-decoration: underline; }
.needs-row.is-done .needs-row-text { color: var(--ink-500); text-decoration: line-through; }
.needs-row-meta { font-size: 12px; color: var(--ink-500); overflow-wrap: anywhere; }

/* Small pills beside a need: Reopened, and Ward on a need the viewer can't check off. */
.need-pill { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: var(--radius-tag); white-space: nowrap; }
.need-pill-reopened { background: var(--gold-50); color: var(--gold-900); }

/* The need checkbox (list rows, household and person pages). */
.need-check { display: flex; margin: 0; }
.need-check-box { width: 26px; height: 26px; margin: 0; accent-color: var(--walnut-900); cursor: pointer; }
@media (min-width: 1024px) { .need-check-box { width: 22px; height: 22px; margin-top: 2px; } }
.need-check-box:disabled { cursor: not-allowed; opacity: 0.55; }

/* The detail panel (desktop) and the need page. */
.needs-aside {
  background: #FFFFFF; border: 1.5px solid var(--navy-700); border-radius: var(--radius-card); overflow: hidden;
  position: sticky; top: 24px;
}
.need-page { background: #FFFFFF; border: 1px solid var(--border-card); border-radius: var(--radius-card); overflow: hidden; }
@media (min-width: 1024px) { .need-page { max-width: 640px; border: 1.5px solid var(--navy-700); } }
.need-detail-head {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: 20px 22px;
  background: var(--navy-950); color: #FFFFFF;
}
.need-detail-labels { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.need-detail-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy-200); }
.need-detail-text {
  margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: var(--weight-display); line-height: 1.3;
  overflow-wrap: anywhere; white-space: pre-line;
}
.need-detail-text.is-done { text-decoration: line-through; color: var(--navy-100); }
.need-detail-from { font-size: 13px; color: var(--navy-100); }
.need-detail-rule { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; }
.need-detail-body { display: flex; flex-direction: column; gap: 16px; padding: 18px 22px; }
@media (max-width: 1023px) {
  .need-detail-head { padding: 18px 16px; }
  .need-detail-body { padding: 16px; }
}
.need-detail-section { display: flex; flex-direction: column; gap: 8px; }
.need-detail-label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); }
.need-detail-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.need-detail-chip {
  min-height: 34px; padding: 0 12px; border-radius: 17px; background: var(--navy-50); color: var(--navy-900);
  display: flex; align-items: center; font-size: 13px; font-weight: 700; text-decoration: none;
}
.need-detail-chip:hover { color: var(--navy-900); background: var(--navy-100); }
.need-detail-hint { font-size: 12px; color: var(--ink-500); }
.need-detail-form { display: flex; flex-direction: column; gap: 10px; }
.need-detail-done {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; border-radius: var(--radius-choice);
  border: 1.5px solid var(--walnut-900); font-size: 15px; font-weight: 700; color: var(--walnut-900); cursor: pointer;
}
.need-detail-done input { width: 22px; height: 22px; margin: 0; accent-color: var(--walnut-900); flex-shrink: 0; }
.need-detail-done.is-locked { border-color: var(--paper-500); color: var(--ink-500); cursor: not-allowed; }
.need-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.need-history-item {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--border-row);
}
.need-history-glyph {
  width: 28px; height: 28px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.need-history-reopened { background: var(--gold-50); color: var(--gold-900); }
.need-history-checked { background: var(--status-done-bg); color: var(--green-800); }
.need-history-created { background: var(--navy-50); color: var(--navy-900); }
.need-history-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.need-history-what { font-size: 14px; font-weight: 700; }
.need-history-who { font-size: 12px; color: var(--ink-500); }
.need-history-reason { font-size: 13px; color: var(--ink-700); font-style: italic; overflow-wrap: anywhere; }
.need-detail-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.need-detail-action { height: 42px; font-size: 14px; }

/* The Undo toast: above the tab bar on phones, bottom right on desktop. */
.need-toast {
  position: fixed; z-index: 20; left: 16px; right: 16px; bottom: calc(var(--tabbar-h) + 18px + env(safe-area-inset-bottom));
  min-height: 52px; padding: 0 8px 0 16px; border-radius: var(--radius-choice); background: var(--walnut-900);
  color: var(--walnut-50); display: flex; align-items: center; justify-content: space-between; gap: 10px;
  box-shadow: 0 8px 20px rgba(14, 26, 51, 0.3);
}
@media (min-width: 1024px) { .need-toast { left: auto; right: 36px; bottom: 28px; width: 360px; } }
.need-toast-text { font-size: 14px; font-weight: 600; }
.need-toast-form { display: flex; margin: 0; }
.need-toast-undo {
  min-height: 40px; padding: 0 14px; border: 0; border-radius: var(--radius-sm); background: transparent;
  color: var(--gold-200); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.need-toast-undo:hover { background: var(--walnut-700); }