/* The search page's To-dos tab (static/js/pages/outreach.js): one tickable list of people, the step that's next and its
   button. Cards, buttons, badges and chips are the portal's own classes; the rows, the ticked bar and the You / App
   marks are this tab's. Every rule under html.ui-new. */
html.ui-new .po { max-width: 1180px; display: flex; flex-direction: column; gap: var(--space-4); }
html.ui-new .po .po-card { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
html.ui-new .po .po-fix, html.ui-new .po .po-link { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--hr-purple-700); text-decoration: none; white-space: nowrap; }
html.ui-new .po .po-fix:hover, html.ui-new .po .po-link:hover { text-decoration: underline; }
html.ui-new .po .po-h { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
html.ui-new .po .po-h h3 { margin: 0; font-size: var(--text-lg); }
html.ui-new .po .po-n { display: inline-block; min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--ink-900); color: var(--white); font-family: var(--font-sans); font-size: var(--text-xs); text-align: center; vertical-align: 2px; }
html.ui-new .po .po-list { list-style: none; margin: 0; padding: 0; }
html.ui-new .po .po-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 9px 4px; border-top: 1px solid var(--paper-200); font-size: var(--text-sm); color: var(--ink-700); }
html.ui-new .po .po-row:first-child { border-top: 0; }
html.ui-new .po .po-nm { font-family: var(--font-display); font-weight: 700; color: var(--ink-900); }
html.ui-new .po a.po-nm { text-decoration: none; }
html.ui-new .po a.po-nm:hover, html.ui-new .po a.po-nm:focus-visible, html.ui-new .po [data-open].po-nm:hover { color: var(--hr-purple); text-decoration: underline; }
html.ui-new .po .po-owner { font-size: var(--text-xs); color: var(--ink-500); background: var(--paper-100); border-radius: 999px; padding: 1px 8px; margin-left: 4px; }
html.ui-new .po .po-when { font-size: var(--text-xs); color: var(--ink-500); font-variant-numeric: tabular-nums; white-space: nowrap; }
html.ui-new .po .po-amber { color: var(--energy-yellow-800, #7a5a0c); font-weight: var(--fw-semibold); }
html.ui-new .po .po-red { color: var(--danger, #e0454b); font-weight: var(--fw-semibold); }
html.ui-new .po .po-empty { margin: 0; }
html.ui-new .po .po-who { justify-self: start; font-size: 11px; font-weight: var(--fw-semibold); padding: 1px 9px; border-radius: 999px; background: var(--paper-100); color: var(--ink-600); white-space: nowrap; }
html.ui-new .po .po-who-you { background: var(--hr-purple-100); color: var(--hr-purple-700); }
html.ui-new .po .po-who-app { background: var(--success-bg, #e6f5ec); color: var(--success, #2fa25b); }
html.ui-new .po .po-note, html.ui-new .po .po-foot { margin: 0; }
html.ui-new .po .chips { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 720px) {
  html.ui-new .po .po-row { grid-template-columns: 24px minmax(0, 1fr) auto; }
  html.ui-new .po .po-row .po-when { grid-column: 2; }
  html.ui-new .po .po-row .po-act { grid-column: 3; grid-row: 1; }
}

/* What kind of step a row is (Tania 10-27): the Lists tab's icons, as a small labelled chip. */
html.ui-new .po .po-kind { display: inline-flex; align-items: center; gap: 5px; vertical-align: 1px; margin-right: 4px; padding: 1px 8px 1px 2px; border-radius: 999px; background: var(--paper-100); border: 1px solid var(--paper-200); color: var(--ink-700); font-size: 11px; font-weight: var(--fw-semibold); white-space: nowrap; }
html.ui-new .po .po-kind svg { flex: 0 0 18px; width: 18px; height: 18px; padding: 3px; border-radius: 999px; background: var(--white); color: var(--hr-purple-500, #6A4BC4); box-sizing: border-box; }
html.ui-new .po .po-kind-li svg { background: #2867B2; color: var(--white); }
html.ui-new .po .po-kind-mail svg { color: #D9473A; }
html.ui-new .po .po-kind-eye svg, html.ui-new .po .po-kind-chat svg { color: #2867B2; }
html.ui-new .po .po-kind-clock svg { color: var(--ink-500); }
html.ui-new .po .po-kind-flag svg { color: var(--danger, #e0454b); }
html.ui-new .po .po-kind-star svg { color: var(--energy-yellow-600, #d3a32f); }

/* One tickable list (Tania 10-27: "a list of todos that can move"; "bulk select candidates") */
html.ui-new .po .po-chips .po-c { font-variant-numeric: tabular-nums; color: var(--ink-500); font-weight: var(--fw-semibold); }
html.ui-new .po .po-chips .chip.on .po-c { color: inherit; }
html.ui-new .po .po-how { font-size: var(--text-xs); }
html.ui-new .po .po-block { margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--energy-yellow-100); color: var(--ink-900); font-size: var(--text-sm); }
html.ui-new .po .po-tick { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; cursor: pointer; }
html.ui-new .po .po-tick input { width: 16px; height: 16px; margin: 0; accent-color: var(--ink-900); cursor: pointer; }
html.ui-new .po .po-head { display: flex; align-items: center; gap: 12px; padding: 0 4px; }
html.ui-new .po .po-row.is-on { background: var(--hr-purple-50, #f6f1fa); }
html.ui-new .po .po-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html.ui-new .po .po-row-t { min-width: 0; }
html.ui-new .po .po-what { color: var(--ink-700); }
html.ui-new .po .po-after { font-size: var(--text-xs); color: var(--ink-500); }
html.ui-new .po .po-list-chip { display: inline-block; margin-left: 4px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--paper-200); background: var(--white); color: var(--ink-600); font-size: 11px; white-space: nowrap; vertical-align: 1px; }
html.ui-new .po .po-act { justify-self: end; }
html.ui-new .po .po-act .btn { white-space: nowrap; }
html.ui-new .po .po-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--ink-900); color: var(--white); font-size: var(--text-sm); }
/* on the dark bar the buttons turn light, or a black pill vanishes into it (walk, 2026-10-27) */
html.ui-new .po .po-bar .btn-primary { background: var(--white); color: var(--ink-900); border-color: var(--white); }
html.ui-new .po .po-bar .btn-primary:disabled { opacity: .5; }
html.ui-new .po .po-bar .btn-outline { background: transparent; color: var(--white); border-color: var(--paper-200); }
html.ui-new .po .po-bar .btn-ghost { color: var(--white); }
html.ui-new .po .po-bar-why { flex: 1 1 260px; font-size: var(--text-xs); color: var(--paper-200); }
html.ui-new .po .po-note-box { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--paper-100); font-size: var(--text-sm); color: var(--ink-700); }
html.ui-new .po .po-note-box span { flex: 1; }
html.ui-new .po .po-more { margin: 0; }
html.ui-new .po-quote { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--paper-100); white-space: pre-line; font-size: var(--text-sm); }
html.ui-new .po-quote-s { color: var(--ink-500); }
html.ui-new .po-confirm-list { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 4px; max-height: 40vh; overflow: auto; font-size: var(--text-sm); }
/* the kinds in a chip, each a press that narrows the list (live QA 10-27) */
html.ui-new .po .po-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
html.ui-new .po .po-kbtn { font: inherit; font-size: var(--text-xs); padding: 4px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--paper-200); background: var(--white); color: var(--ink-700); font-variant-numeric: tabular-nums; }
html.ui-new .po .po-kbtn.on { background: var(--ink-900); border-color: var(--ink-900); color: var(--white); }
html.ui-new .po .po-past { font-size: var(--text-xs); margin: 4px 0 8px; }