/* ============================================================================
   WHAT THE SOURCING SCREENS ADD TO THE PORTAL'S (2026-10-20) — behind "Try the
   new screens".
   ----------------------------------------------------------------------------
   The top bar and the search page are the portal's markup, dressed by the
   portal's stylesheet copied as written (static/portal/css/app.css, linked by
   app.js under the switch only; see static/portal/SOURCE). Nothing in this file
   changes how a portal class looks; where a rule names one, it is to place this
   app's addition inside it. It places what the portal's search page has no
   equivalent for — the search box and the layout switch on the tab row, the
   owed-step button and the … menu on a card, the folded empty column, the
   attention chips' red — and makes the portal's markup sit in this app's page
   (the sticky bar, the board view's own padding). Every rule is scoped under
   html.ui-new; with the switch off none of it applies.
   ============================================================================ */

/* The bar: #ptShell only carries the .portal tokens, so it takes no box of its own and the
   portal's sticky <header> sticks to the page as it does in the portal. */
html.ui-new #ptShell:not([hidden]) { display: contents; }
html.ui-new .me-pop .pt-admin-only { display: none; }
html.ui-new body.is-admin .me-pop .pt-admin-only { display: block; }

/* The search page's own room: the portal's .wrap pads it, so the view drops its padding. */
html.ui-new #viewBoard { padding: 0 !important; }
html.ui-new .pb-root { min-height: calc(100vh - 66px); }

/* The tab row's right end: the search box (the portal's .dsearch), Filters, and the
   segmented Five lanes / Ten columns (the portal's .dseg). */
html.ui-new .pb-tabtools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-bottom: 8px; }
html.ui-new .pb-tabtools .dsearch input { width: 180px; }

/* The chip row's second sets ride the same row; the grey sentence carries the extension
   strip at its right end. */
html.ui-new .pb-chipset { display: contents; }
html.ui-new .chip.pb-attn.red { color: #B3261E; border-color: #f3b2ab; }
html.ui-new .chip.pb-attn.red.on { color: #fff; background: #B3261E; border-color: #B3261E; }
html.ui-new .chip.pb-attn.amber { color: var(--energy-yellow-800); border-color: var(--energy-yellow); }
html.ui-new .chip.pb-attn.amber.on { color: var(--ink-900); background: var(--energy-yellow-100); }
/* The board header's two named rows (2026-10-27): Show · Red flags, Re-score and Select at the right end;
   then Late, which shows only while it has a chip. */
html.ui-new .pb-tools .pb-rowlbl, html.ui-new .pb-laterow .pb-rowlbl { font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-400); margin-right: 2px; }
html.ui-new .pb-tools-end { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
html.ui-new .pb-tools .btn { margin-left: 0; }
html.ui-new .pb-laterow:not(:has(.chip)) { display: none; }
html.ui-new .pb-rescore-msg { font-size: var(--text-xs); color: var(--ink-600); }
html.ui-new .pb-rescore-msg.err { color: #B3261E; }
html.ui-new .pb-hint { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
html.ui-new .pb-hint-ext .bd-ext-strip { margin: 0; }

/* The board in its holder: the holder only scopes select-mode, the board keeps its scroll. */
html.ui-new #iboard-holder { min-width: 0; }
html.ui-new .board.bd-hasbulk { padding-bottom: 84px; }
html.ui-new .board-col.bd-band { outline: 2px solid var(--energy-yellow); outline-offset: 2px; }
html.ui-new .board-col.bd-band.bd-band-qual { outline-color: var(--hr-purple); }

/* A column with nothing in it folds to a strip, and the ⇤ in any open column's head folds it
   too, cards or not (Tania, 18:44: "i can expand columns but not contract them"). The strip
   still shows its name and count and still takes a drop; a click opens it. */
html.ui-new .board-col.pb-fold { padding: var(--space-3) 0; cursor: pointer; overflow: hidden; }
html.ui-new .board-col.pb-fold:hover { background: var(--paper-200); }
html.ui-new .board-col.pb-fold h4 { writing-mode: vertical-rl; transform: rotate(180deg); justify-content: flex-end;
  gap: 8px; margin: 0 auto; padding: 0; white-space: nowrap; }
html.ui-new .board-col.pb-fold h4 .stage-dot { margin: 0 0 7px; }

/* The column head's extras: the late count, the fold and the sort (two small grey marks after
   the count, always there so a column can be folded without hunting for it), the Invited buttons. */
html.ui-new .board-col h4 .count { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
html.ui-new .bd-cc-late { color: #B3261E; font-weight: var(--fw-semibold); font-size: var(--text-xs); }
html.ui-new .pb-colsort, html.ui-new .pb-colfold { font: inherit; font-size: var(--text-xs); line-height: 1; color: var(--ink-400);
  background: none; border: 0; border-radius: var(--radius-sm); padding: 2px 3px; cursor: pointer; }
html.ui-new .pb-colsort:hover, html.ui-new .pb-colfold:hover { color: var(--ink-900); background: var(--paper-200); }
html.ui-new .pb-colacts, html.ui-new .pb-lchips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 var(--space-3); }
html.ui-new .pb-lchips .chip.ro { opacity: .7; }

/* The card's additions: the name is a button (one keyboard stop per card), the owed step and
   the … menu sit on the last row across the card, the Teamtailor chip keeps to one line. */
html.ui-new .board-card .card-main { min-width: 0; }
/* NO CHIP SPILLS PAST THE CARD (Tania, 2026-10-21: "the tags on the cards should be short, bcs
   otherwise run out of the card"): the chip row may wrap between chips, never inside one, and a
   chip longer than the card ends in "…" with its full words on hover. */
html.ui-new .board-card .card-chips { min-width: 0; max-width: 100%; }
html.ui-new .board-card .card-chips > .badge { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
html.ui-new .board-card .name .bd-qopen { text-align: left; }
html.ui-new .board-card .name .nm-t { overflow-wrap: anywhere; }
html.ui-new .board-card .card-act { grid-column: 1 / -1; display: flex; align-items: stretch; gap: 6px; }
html.ui-new .board-card .card-act .bd-pc-go { flex: 1 1 auto; justify-content: center; margin: 0; }
html.ui-new .board-card .card-act .bd-pcmenu { margin-left: auto; }
html.ui-new .board-card .card-tt { grid-column: 1 / -1; min-width: 0; }
html.ui-new .board-card .tth-chip { display: flex; flex-wrap: nowrap; width: 100%; box-sizing: border-box; align-items: center; gap: 4px; }
html.ui-new .board-card .tth-chip > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; }
html.ui-new .board-card .tth-chip > a, html.ui-new .board-card .tth-chip .tth-btn { white-space: nowrap; flex: none; margin: 0; }
/* "Maybe in Teamtailor": the words on their own line, the two answers under them (tt_handoff.js matchChip). */
html.ui-new .board-card .tth-chip.tth-maybe { flex-wrap: wrap; }
html.ui-new .board-card .tth-chip.tth-maybe > a { flex: 1 1 100%; }
html.ui-new .bd-pcmenu .more-pop { min-width: 0; }

/* The Settings tab: the portal's .card sections, two to a row. */
html.ui-new .pb-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--space-4); align-items: start; }
html.ui-new .pb-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: var(--space-3); }

/* The Log in door is this app's (its sessions are its own); the portal's .btn would otherwise
   paint over the hidden attribute. */
html.ui-new #ptLoginBtn[hidden] { display: none; }
html.ui-new .pb-settings > .card + .card { margin-top: 0; }
html.ui-new .pb-root .bd-count { display: block; margin: 0; font-size: inherit; color: inherit; }

/* The page head's two rows: the portal's title block is wide enough (its status badges, comp,
   days searching, the dates and quality line) that .page-head's flex-wrap drops the buttons to
   their own row under it, left-aligned. This app's status lines are short, so the same row is
   asked for outright; the gap between the rows is .page-head's own. */
html.ui-new .pb-page .page-head > div:first-child { flex: 1 1 100%; }

/* "switch": the portal's .rename-pop (field + black button), with the matching searches listed
   under the field in the More menu's two-line rows. */
html.ui-new .pb-switchpop { flex-wrap: wrap; width: 360px; font-size: var(--text-sm); font-weight: var(--fw-regular); letter-spacing: 0; }
html.ui-new .pb-switchpop input[type="text"] { flex: 1 1 0; width: auto; min-width: 0; }
html.ui-new .pb-switchlist { flex: 1 1 100%; max-height: 320px; overflow-y: auto; margin-top: 2px; }
html.ui-new .pb-switchgrp { font-size: var(--text-xs); color: var(--ink-400); padding: 8px 8px 2px; }
html.ui-new .pb-switchlist a { display: block; padding: 6px 8px; border-radius: var(--radius-sm); color: var(--ink-900); text-decoration: none; font-weight: var(--fw-medium); }
html.ui-new .pb-switchlist a span { display: block; font-size: var(--text-xs); color: var(--ink-400); font-weight: var(--fw-regular); }
html.ui-new .pb-switchlist a:hover, html.ui-new .pb-switchlist a:focus-visible { background: var(--paper-100); }

/* THE PERSON PAGE (person_portal.js): the portal's candidate overlay holds the page where the
   portal holds its iframe, so the page itself is the scroll area. With no ‹ Previous / Next ›
   row the page starts under ✕ Close instead of beside it. */
html.ui-new .pp-pframe { flex: 1; min-height: 0; overflow-y: auto; }
html.ui-new .pp-pframe .pp-pbar { padding-top: var(--space-4); }
/* the overlay nav always shows (role_board_inline sets display:flex over [hidden]), so no room is kept for it */
html.ui-new #ppOverlayNav[hidden] + .pp-pframe .pp-pbar { padding-top: 12px; }
html.ui-new .pp-pframe .pp-pbar .subnav { margin-bottom: 0 !important; }
/* .wrap's 64px foot would open a gap between the tabs and the hero; the portal's hero sits flush. */
html.ui-new .pp-pframe .pp-pbar { padding-bottom: 0; }
/* The portal's embed is narrower than its 1100px breakpoint, so its numerals sit inside the panel;
   ours is wider, so the same small-screen rule is applied here directly. */
html.ui-new .pp-pframe .profile-main .panel.numbered::before { position: static; display: block; left: 0;
  margin-bottom: 6px; font-size: var(--text-xl); opacity: 0.8; }
html.ui-new .pp-pframe .pp-pwrap { padding-top: var(--space-4); padding-bottom: var(--space-6, 48px); }
html.ui-new .cand-overlay-pos-tail { color: var(--ink-400); }
/* The hero sits inside the panel, not across the page, so it keeps the wrap's side padding. */
html.ui-new .pp-pframe .cand-hero { padding-left: var(--space-5, 32px); padding-right: var(--space-5, 32px); }

/* Panels: a head's buttons sit at its right end; a menu a rail link opens hangs under it. */
html.ui-new .pp-pframe .ph-actions { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; position: relative; }
html.ui-new .pp-pframe .panel + .panel { margin-top: var(--space-4); }
html.ui-new .pp-anchor { position: absolute; right: 0; top: 100%; width: 0; height: 0; }
html.ui-new .pp-pframe .rail-links, html.ui-new .pp-pframe .log-int .cand-aside-form, html.ui-new .pp-pframe .pp-acts-row { position: relative; }
html.ui-new .pp-pframe .rail-links .pp-menu { right: 0; left: auto; top: 100%; z-index: 70; }
html.ui-new .pp-pframe .log-int .pp-menu { left: 0; right: auto; top: 0; position: relative; z-index: 70; }
html.ui-new .pp-pframe .pp-acts-row .pp-menu { left: 0; right: auto; top: calc(100% + 6px); z-index: 70; }
html.ui-new .pp-acts-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: var(--space-3); }
html.ui-new .pp-notes { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
html.ui-new .pp-notes li { padding: 10px 0; border-bottom: 1px solid var(--paper-100); }
html.ui-new .pp-notes li:last-child { border-bottom: 0; }
html.ui-new .pp-noteform textarea { width: 100%; min-height: 64px; height: 64px; resize: vertical; transition: height .15s; }
html.ui-new .pp-noteform textarea:focus { height: 120px; }
html.ui-new .pp-rail-tt { margin-top: 8px; }
html.ui-new .pp-pframe .rail-wait-pill.pp-late { color: #B3261E; background: #fdecea; }
html.ui-new .pp-pframe .verdict-choices { margin-top: var(--space-3); }

/* Messages: what happened rides in the thread as one quiet line between the messages. */
html.ui-new .pp-repbox { margin-top: var(--space-3); }
html.ui-new .pp-thr-event { margin: 0; padding: 8px 0 8px 44px; font-size: var(--text-sm); color: var(--ink-600); border-bottom: 1px solid var(--paper-100); }
html.ui-new .pp-sendout { margin-top: var(--space-3); padding: 10px 12px; border-left: 3px solid var(--energy-yellow, #f2c050); background: var(--paper-100); border-radius: 0 8px 8px 0; font-size: var(--text-sm); }
html.ui-new .pp-sendout.is-maybe { border-left-color: #B3261E; }
/* Messages as chat (Tania, 2026-10-21: "like google chat or gmail"): theirs on the left in grey,
   ours on the right tinted, day dividers, the channel as a small mark, the draft written for them as
   a dashed card, and a rounded reply box pinned to the bottom with one Send. */
html.ui-new .pp-chat { display: flex; flex-direction: column; gap: 14px; }
html.ui-new .pp-chat .thr-msg.pp-bub-row { display: flex; gap: 10px; align-items: flex-end; margin: 0; padding: 0; border: 0; background: none; max-width: 78%; }
html.ui-new .pp-chat .thr-msg-us.pp-bub-row { flex-direction: row-reverse; align-self: flex-end; }
html.ui-new .pp-chat .thr-avatar { flex: 0 0 32px; width: 32px; height: 32px; font-size: 12px; letter-spacing: .02em; }
html.ui-new .pp-chat .thr-avatar-client { background: var(--ink-500, #6b6478); }
html.ui-new .pp-chat .thr-avatar-us { background: var(--hr-purple, #9140b0); }
html.ui-new .pp-bub { min-width: 0; padding: 10px 14px 12px; border-radius: 18px 18px 18px 6px; background: var(--paper-100, #f3f1f7); }
html.ui-new .thr-msg-us .pp-bub { border-radius: 18px 18px 6px 18px; background: var(--hr-purple-50, #f3e9f8); }
html.ui-new .pp-bub .thr-msg-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--text-xs); }
html.ui-new .pp-bub .thr-msg-head strong { font-size: var(--text-sm); color: var(--ink-900); }
html.ui-new .pp-bub .thr-msg-addr { color: var(--ink-500); }
html.ui-new .pp-bub .thr-msg-when { margin-left: auto; }
html.ui-new .pp-bub .thr-msg-to { margin: 2px 0 0; }
html.ui-new .pp-bub .thr-msg-body { margin: 4px 0 0; font-size: var(--text-md, 15px); line-height: 1.5; color: var(--ink-900); }
html.ui-new .pp-day { display: flex; align-items: center; gap: 12px; margin: 6px 0 -2px; font-size: var(--text-xs); color: var(--ink-500); }
html.ui-new .pp-day::before, html.ui-new .pp-day::after { content: ""; flex: 1; height: 1px; background: var(--paper-200, #e7e4ee); }
html.ui-new .pp-chat .pp-thr-event { align-self: center; padding: 0; border: 0; font-size: var(--text-xs); color: var(--ink-500); text-align: center; }
html.ui-new .pp-ch { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 4px; font-size: 10px; font-weight: 700;
  line-height: 1; color: var(--ink-500); border: 1px solid var(--paper-300, #cfc9dd); background: var(--white, #fff); font-family: Arial, sans-serif; flex: 0 0 auto; }
html.ui-new .pp-ch-linkedin { color: #fff; background: #0a66c2; border-color: #0a66c2; }
html.ui-new .pp-ch-email { color: #c5221f; }
html.ui-new .pp-replybar .pp-ch { width: 22px; height: 22px; font-size: 12px; border-radius: 5px; }
html.ui-new .pp-track-new { background: var(--energy-yellow-100, #fdf3d6); color: var(--ink-900); border-color: transparent; }
html.ui-new .pp-draftcard-row { display: flex; padding-left: 42px; max-width: 78%; }
html.ui-new .pp-draftcard { flex: 1; min-width: 0; border: 1.5px dashed var(--orbit-green, #2f9e6f); border-radius: 18px; padding: 12px 16px; background: var(--white, #fff); }
html.ui-new .pp-draftcard-h { margin: 0 0 6px; font-weight: 600; font-size: var(--text-sm); color: var(--orbit-green, #2f9e6f); }
html.ui-new .pp-draftcard-body { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: var(--text-md, 15px); line-height: 1.5; }
html.ui-new .pp-draftcard-why { margin: 8px 0 0; }
html.ui-new .pp-draftcard-acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
html.ui-new #ppRepAnchor { position: sticky; bottom: 0; z-index: 5; background: var(--white, #fff); padding: 8px 0 12px; }
html.ui-new #ppRepAnchor .rep-box { margin: 0; border-radius: 20px; box-shadow: 0 -2px 14px rgba(16,10,26,.06); padding: 12px 14px; }
html.ui-new .pp-repnote { margin: 0 0 8px; font-size: var(--text-sm); color: var(--ink-600); }
html.ui-new .pp-replybar { display: flex; gap: 10px; align-items: center; }
html.ui-new .pp-replybar textarea { flex: 1; min-width: 0; resize: vertical; min-height: 44px; max-height: 40vh; padding: 11px 16px; border: 1px solid var(--paper-200, #e7e4ee);
  border-radius: 22px; font: inherit; font-size: var(--text-md, 15px); background: var(--white, #fff); }
html.ui-new .pp-replybar textarea:focus { outline: none; border-color: var(--hr-purple, #9140b0); }
html.ui-new .pp-sendround { flex: 0 0 auto; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
html.ui-new .pp-repbox .pp-acts-row { margin-top: 8px; }
html.ui-new .pp-repbox .rep-ai { margin-top: 12px; }
html.ui-new .pp-repbox .rep-ai-row { display: flex; gap: 8px; align-items: center; }
html.ui-new .pp-repbox .rep-ai-row input { flex: 1; min-width: 0; }
html.ui-new .pp-ai-lbl { white-space: nowrap; font-size: var(--text-sm); color: var(--orbit-green, #2f9e6f); font-weight: 600; }

/* Edit: a contact row reads label, value, its two buttons. */
html.ui-new .pp-pframe .pp-crow { padding: 8px 0; border-bottom: 1px solid var(--paper-100); gap: 12px; }
html.ui-new .pp-pframe .pp-crow .pp-acts-row { justify-content: flex-end; }

/* A board question asked from the person page (the booked slot) sits above it. */
html.ui-new body.pp-modal-up .bd-modal { z-index: 1310; }
html.ui-new body.pp-modal-up .bd-scrim { z-index: 1305; }
/* The Settings page (index.html #viewSettings): the portal's settings_hub as written. A row opened
   in place sits under its link like the next paragraph; what it holds is the old pop-up's own
   blocks, moved in. The Sends tag and its one confirm line are the Switches page's. */
html.ui-new #viewSettings .ps-body { margin: 0 0 var(--space-4); }
html.ui-new #viewSettings .ps-body[hidden] { display: none; }
html.ui-new #viewSettings .ps-body > .settings-card { margin: 0 0 var(--space-3); }
html.ui-new #viewSettings .push-row { margin-top: var(--space-3); }
html.ui-new #viewSettings .inbox-kinds input:disabled { cursor: default; }
html.ui-new #viewSettings .ps-send { margin: var(--space-3) 0; }
/* Applied before we contacted them: the read-only list, one row per person. */
html.ui-new #viewSettings .ps-aptable { width: 100%; border-collapse: collapse; font-size: 13px; }
html.ui-new #viewSettings .ps-aptable th { text-align: left; font-weight: 600; color: var(--text-muted, #6b6b80); padding: 6px 8px; border-bottom: 1px solid var(--border, #e4e2ee); white-space: nowrap; }
html.ui-new #viewSettings .ps-aptable td { padding: 7px 8px; border-bottom: 1px solid var(--border, #eeedf4); vertical-align: middle; }
html.ui-new #viewSettings .ps-aptable td:nth-child(n+4) { white-space: nowrap; }
html.ui-new #viewSettings .ps-apres { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; background: #f1eefb; color: #5b3fb0; }
html.ui-new #viewSettings .ps-sendstag { color: #52525b; background: #f4f4f5; border-color: #e4e4e7; }  /* a plain tag: it can send, not an error */
html.ui-new #viewSettings .ps-ask { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px;
  padding: 10px 12px; border-radius: var(--radius-sm); background: var(--energy-yellow-100); }
html.ui-new #viewSettings .ps-ask[hidden], html.ui-new #viewSettings .ps-err[hidden] { display: none; }
html.ui-new #viewSettings .ps-ask span { flex: 1 1 260px; }
html.ui-new #viewSettings .ps-err { color: #B3261E; margin-top: 8px; }

/* Tools & checks: one line per background sync, coloured by GET /syncs/health's level */
html.ui-new .ps-sync { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; }
html.ui-new .ps-sync-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #A8A4B6; transform: translateY(-1px); }
html.ui-new .ps-sync-ok .ps-sync-dot { background: #16A34A; }
html.ui-new .ps-sync-amber .ps-sync-dot { background: #D97706; }
html.ui-new .ps-sync-red .ps-sync-dot { background: #DC2626; }
html.ui-new .ps-sync-red b { color: #B91C1C; }
html.ui-new .ps-syncs { margin-bottom: 14px; }
/* Possibly already in Teamtailor → Review and link: each pair side by side (settings.js _psTtReview) */
html.ui-new .ps-ttr-box { margin: 8px 0 12px 18px; max-width: 820px; }
html.ui-new .ps-ttr { border: 1px solid #E6E3EE; border-radius: 8px; padding: 10px 12px; margin: 0 0 8px; background: #fff; }
html.ui-new .ps-ttr-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-bottom: 6px; }
html.ui-new .ps-ttr-pill { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: #FEF3C7; color: #92400E; white-space: nowrap; }
html.ui-new .ps-ttr-pill-ok { background: #DCFCE7; color: #166534; }
html.ui-new .ps-ttr-t { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
html.ui-new .ps-ttr-t th, html.ui-new .ps-ttr-t td { text-align: left; padding: 3px 6px; vertical-align: top; overflow-wrap: anywhere; }
html.ui-new .ps-ttr-t thead th { font-size: 11px; color: #6B6880; font-weight: 600; }
html.ui-new .ps-ttr-t tbody th { width: 84px; color: #6B6880; font-weight: 500; }
html.ui-new .ps-ttr-t td.ps-ttr-same { background: #F0FDF4; }
html.ui-new .ps-ttr-t td.ps-ttr-diff { background: #FFFBEB; }
html.ui-new .ps-ttr-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
html.ui-new .ps-ttr-bulk { margin: 0 0 10px; }
html.ui-new .bell-red h3 span:first-child { color: #B91C1C; }
/* The Searches list (#searches, static/js/searches_list.js) is the portal's /team/roles page,
   dressed by its own extracted <style> (static/portal/css/roles_inline.css). The one thing it
   adds: a search the board cannot open keeps its name as plain text, so it must not light up
   like the portal's link does on hover. */
html.ui-new #viewSearchesList span.rl-name:hover { color: var(--ink-900); cursor: default; }
/* A search's client filters the list to that client (names are links). */
html.ui-new #viewSearchesList a.rl-client { color: inherit; text-decoration: none; }
html.ui-new #viewSearchesList a.rl-client:hover, html.ui-new #viewSearchesList a.rl-client:focus-visible { color: var(--hr-purple, #9140b0); text-decoration: underline; }
/* The chat header and the one-line reply box (Tania's picture, 2026-10-21). */
html.ui-new .pp-chathead { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--paper-200, #e7e4ee); margin-bottom: 16px; }
html.ui-new .pp-chathead-av { flex: 0 0 48px; width: 48px; height: 48px; font-size: 16px; background: var(--hr-purple, #9140b0); }
html.ui-new .pp-chathead-who { min-width: 0; }
html.ui-new .pp-chathead-who h1 { margin: 0; font-size: 22px; line-height: 1.2; }
html.ui-new .pp-chathead-who .sub { margin: 2px 0 0; color: var(--ink-500); font-size: var(--text-sm); }
html.ui-new .pp-chathead-right { margin-left: auto; display: inline-flex; gap: 10px; align-items: center; }
html.ui-new .pp-stagepill { padding: 5px 14px; border-radius: 999px; background: #e8eefc; color: #2f5bd3; font-size: var(--text-sm); font-weight: 500; }
html.ui-new .pp-chatbody { margin-top: 0; }
html.ui-new .pp-via { flex: 0 0 auto; height: 44px; padding: 0 10px; border: 1px solid var(--paper-200, #e7e4ee); border-radius: 22px; background: var(--white, #fff);
  font: inherit; font-size: var(--text-sm); color: var(--ink-700, #333); display: inline-flex; align-items: center; gap: 6px; }
html.ui-new .pp-replybar textarea { min-height: 44px; }
/* The channel pick keeps its own size: the portal's base gives every select width:100%, which pushed the
   message box off the right edge (owner, 2026-10-24: "there is button or text box at the right i dont understand"). */
html.ui-new .pp-replybar .pp-via { width: auto; max-width: 160px; }
html.ui-new .pp-replybar textarea { width: auto; }
html.ui-new .pp-replybar { align-items: flex-end; }   /* a tall message keeps the pick and Send on its last line */
/* Still squeezed on the person page (owner, 2026-10-25: "this is stil not usable"): the row is a grid, so no
   select or textarea width from any other sheet can push the message box into a circle. Pick and buttons
   take their own size; the message takes the rest. Scoped by id so nothing outranks it. */
html.ui-new #ppRepForm .pp-replybar { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-auto-flow: column; grid-auto-columns: auto; gap: 10px; align-items: end; }
html.ui-new #ppRepForm .pp-replybar > .pp-via { width: auto; max-width: 160px; min-width: 0; }
html.ui-new #ppRepForm .pp-replybar > textarea { width: 100%; min-width: 0; }
/* On a phone the message gets its own full-width line; pick, Send and the clock sit under it. */
@media (max-width: 640px) {
  html.ui-new #ppRepForm .pp-replybar { grid-template-columns: minmax(0, 1fr) auto auto; grid-auto-flow: row; }
  html.ui-new #ppRepForm .pp-replybar > textarea { grid-column: 1 / -1; grid-row: 1; }
}
/* Which teammate's chat the box answers, when the person talks to two of us (owner, 2026-10-26). */
html.ui-new .pp-chats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 10px; font-size: var(--text-sm); }
html.ui-new .pp-chats-h { color: var(--ink-500, #666); margin-right: 2px; }
html.ui-new .pp-chatpick { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--paper-200, #e7e4ee); border-radius: 999px;
  background: #fff; font: inherit; font-size: var(--text-sm); color: var(--ink-700, #333); cursor: pointer; }
html.ui-new .pp-chatpick:hover { border-color: var(--hr-purple, #9140b0); }
html.ui-new .pp-chatpick.is-on { border-color: var(--hr-purple, #9140b0); background: var(--hr-purple-50, #f7f1fb); color: var(--ink-900, #111); font-weight: 600; }
html.ui-new .pp-chatpick .pp-ch { width: 18px; height: 18px; font-size: 10px; border-radius: 4px; }
html.ui-new .pp-chatpick-n { color: var(--ink-500, #666); font-weight: 400; font-size: var(--text-xs); }
/* Reply options up front (owner, 2026-10-24: "shouldnt it give me options?"). */
html.ui-new .pp-opts { margin: 0 0 10px; }
html.ui-new .pp-opts-h { margin: 0 0 6px; font-size: var(--text-sm); font-weight: 600; color: var(--ink-800, #222); }
html.ui-new .pp-opts-h .hint { font-weight: 400; margin-left: 6px; }
html.ui-new .pp-opts-list { display: flex; flex-direction: column; gap: 6px; }
html.ui-new .pp-opt { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; width: 100%; padding: 8px 12px; border: 1px solid var(--paper-200, #e7e4ee);
  border-radius: 10px; background: #fff; text-align: left; cursor: pointer; font: inherit; font-size: var(--text-sm); color: var(--ink-700, #333); }
html.ui-new .pp-opt:hover { border-color: var(--hr-purple, #9140b0); background: var(--hr-purple-50, #f7f1fb); }
html.ui-new .pp-opt-name { flex: 0 0 190px; font-weight: 600; color: var(--ink-900, #111); }
html.ui-new .pp-opt-body { flex: 1 1 220px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-500, #666); }
html.ui-new .pp-opt-ai .pp-opt-name { color: var(--hr-purple-700, #6b2d86); }
html.ui-new .pp-replybar > .btn { height: 44px; border-radius: 22px; white-space: nowrap; }
html.ui-new .pp-repfoot { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; margin-top: 8px; font-size: var(--text-xs); color: var(--ink-500); }
html.ui-new .pp-repfoot .pp-repnote { margin: 0; font-size: var(--text-xs); flex: 1 1 260px; }
html.ui-new .pp-repfoot-acts { display: inline-flex; flex-wrap: wrap; gap: 12px; }
html.ui-new .pp-linkbtn { border: 0; background: none; padding: 0; font: inherit; font-size: var(--text-xs); color: var(--ink-700, #333); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
html.ui-new .pp-linkbtn.pp-ai-lbl { color: var(--orbit-green, #2f9e6f); text-decoration: none; font-weight: 600; }
html.ui-new .pp-mailnote { margin: 6px 0 0; }
html.ui-new #ppRepAnchor .rep-box { padding: 10px 12px; }

/* The person page by lane (2026-10-21): red flags first, the action bar, Next steps as buttons. */
html.ui-new .pp-rf { border-radius: 14px; padding: 12px 16px; margin: var(--space-4) 0 var(--space-3); border: 1px solid var(--line-300); background: var(--paper-50); }
html.ui-new .pp-rf.has { background: var(--danger-bg, #fbe9e5); border-color: #f2c4b9; }
html.ui-new .pp-rf.ok { background: var(--success-bg, #e6f5ec); border-color: #bfe3cc; }
html.ui-new .pp-rf-h { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--text-sm); color: var(--ink-800); }
html.ui-new .pp-rf.has .pp-rf-h { color: var(--danger, #c2452d); }
html.ui-new .pp-rf.ok .pp-rf-h { color: var(--success, #2fa25b); }
html.ui-new .pp-rf-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
html.ui-new .pp-rf-list li { font-size: var(--text-sm); line-height: 1.45; }
html.ui-new .pp-rf-list strong { color: var(--ink-900); margin-right: 6px; }
html.ui-new .pp-rf-why { color: var(--ink-600); }
html.ui-new .pp-rf-ok, html.ui-new .pp-rf-warn { margin: 6px 0 0; font-size: var(--text-sm); color: var(--ink-600); }
html.ui-new .pp-actbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 var(--space-3); }
html.ui-new .pp-actbar-acts { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
html.ui-new .pp-lane { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; font-weight: 700; font-size: var(--text-sm); background: var(--hr-purple-100); color: var(--hr-purple-700); }
html.ui-new .pp-lane-archived, html.ui-new .pp-lane-none { background: var(--paper-100); color: var(--ink-600); }
html.ui-new .pp-tag { background: var(--paper-100); color: var(--ink-700); }
html.ui-new #pp-next .next-steps { margin-top: 4px; }
html.ui-new .pp-ns-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
html.ui-new .pp-ns-label { flex: 1 1 auto; min-width: 0; }
html.ui-new .pp-ns-btn { flex: 0 0 auto; }
html.ui-new #pp-next li.is-done .pp-ns-label { color: var(--ink-500); }
html.ui-new .pp-ns-fold { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: var(--paper-50); }
html.ui-new .pp-ns-fold > summary { cursor: pointer; font-size: var(--text-sm); color: var(--ink-600); }
html.ui-new .pp-ns-fold .next-steps { margin-top: 8px; }
/* Next steps as a checklist: tick circle · step + due/owner line · its one action, tools on hover */
html.ui-new .pp-todos { list-style: none; margin: 4px 0 0; padding: 0; }
html.ui-new .pp-td { display: flex; align-items: flex-start; gap: 12px; padding: 10px 8px; border-radius: 10px; }
html.ui-new .pp-td + .pp-td { border-top: 1px solid var(--paper-100); }
html.ui-new .pp-td:hover { background: var(--paper-50); }
html.ui-new .pp-td-box { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--ink-300, #c9c9cf); background: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; color: var(--ink-500); padding: 0; }
html.ui-new button.pp-td-box { cursor: pointer; }
html.ui-new button.pp-td-box:hover { border-color: var(--hr-purple-600, #7b3fbf); background: var(--hr-purple-100); }
html.ui-new button.pp-td-box:hover::after { content: "✓"; color: var(--hr-purple-700); }
html.ui-new .pp-td-box.is-info { visibility: hidden; }
html.ui-new .pp-td-box.is-on { background: var(--hr-purple-600, #7b3fbf); border-color: var(--hr-purple-600, #7b3fbf); color: #fff; }
html.ui-new .pp-td-box.is-next { border-color: var(--hr-purple-600, #7b3fbf); box-shadow: 0 0 0 3px var(--hr-purple-100); }
html.ui-new .pp-td-body { flex: 1 1 auto; min-width: 0; }
html.ui-new .pp-td-label { color: var(--ink-900); line-height: 1.35; }
html.ui-new .pp-td-meta { margin-top: 2px; font-size: var(--text-sm); color: var(--ink-500); }
html.ui-new .pp-td-meta.is-late { color: var(--danger, #c2452d); font-weight: 600; }
html.ui-new .pp-td.is-done .pp-td-label { color: var(--ink-500); text-decoration: line-through; }
html.ui-new .pp-td.is-skipped { opacity: .55; }
html.ui-new .pp-td-acts { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; }
html.ui-new .pp-td-tools { display: inline-flex; gap: 2px; opacity: .35; transition: opacity .12s; }
html.ui-new .pp-td:hover .pp-td-tools, html.ui-new .pp-td-tools:focus-within { opacity: 1; }
html.ui-new .pp-td-ic { width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-600); cursor: pointer; font-size: 14px; }
html.ui-new .pp-td-ic:hover { background: var(--paper-100); color: var(--ink-900); }
html.ui-new .pp-td-ic[data-ppnext="remove"]:hover { color: var(--danger, #c2452d); }
html.ui-new .pp-td-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; padding: 6px 8px; border: 1px dashed var(--paper-200, #e3e3e8); border-radius: 10px; }
html.ui-new .pp-td-add:focus-within { border-style: solid; border-color: var(--hr-purple-600, #7b3fbf); }
html.ui-new .pp-td-add .btn { flex: 0 0 auto; }
html.ui-new .pp-td-add .pp-td-box { border-style: dashed; color: var(--ink-400, #9a9aa3); }
html.ui-new .pp-td-add input, html.ui-new .pp-td-add select { min-width: 0; height: 32px; box-shadow: none; border: 0; background: transparent; font: inherit; font-size: var(--text-sm); color: var(--ink-700); outline: none; }
html.ui-new .pp-td-add #ppStepAdd { flex: 1 1 200px; min-width: 120px; font-size: inherit; color: var(--ink-900); }
html.ui-new .pp-td-add #ppStepDue, html.ui-new .pp-td-add #ppStepWho { flex: 0 0 auto; width: auto; max-width: 170px; margin: 0; padding: 0 6px; border-radius: 8px; background: var(--paper-50); }
/* Not linked to Teamtailor: the reason, the match, the two ways out */
html.ui-new #pp-ttfix .pp-ttm { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--paper-200, #e3e3e8); }
html.ui-new #pp-ttfix .pp-ttm-h { margin: 0 0 6px; font-weight: 600; }
html.ui-new #pp-ttfix .pp-ttm-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; }
html.ui-new #pp-ttfix .pp-ttm-row + .pp-ttm-row { border-top: 1px solid var(--paper-100); }
html.ui-new #pp-ttfix .pp-ttm-acts { display: inline-flex; flex-wrap: wrap; gap: 6px; }
html.ui-new #pp-ttfix .pp-ttw { margin-top: 12px; }
html.ui-new #pp-ttfix .pp-ttw-h { font-size: var(--text-sm); font-weight: 600; color: var(--ink-700); margin-bottom: 6px; }
html.ui-new #pp-ttfix .pp-ttw-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
html.ui-new #pp-ttfix .pp-ttw-row .field-input { flex: 1 1 220px; width: auto; margin: 0; }
html.ui-new #pp-ttfix .pp-ttsaid { margin-top: 6px; }
/* The person header, tighter (owner, 2026-10-22: "improve … the use of the space"): less air above
   and below, a smaller name and fit number, Teamtailor as a round door like LinkedIn, and the
   screening as its own chip with Change / Log it. */
html.ui-new .pp-pframe .cand-hero { padding-top: var(--space-4); padding-bottom: var(--space-4); }
html.ui-new .pp-pframe .ch-row { margin-top: 0; }
html.ui-new .pp-pframe .cand-hero-name { font-size: clamp(1.9rem, 3.2vw, 2.6rem); margin-top: 4px; }
html.ui-new .pp-pframe .cand-hero-role { margin-top: 6px; }
html.ui-new .pp-pframe .cand-hero-facts { margin-top: 12px; }
html.ui-new .pp-pframe .ch-fit b { font-size: clamp(2.4rem, 3.6vw, 3.2rem); }
html.ui-new .pp-pframe .ch-side { gap: 10px; }
html.ui-new .ch-btn.tt { background: #e8336d; }
html.ui-new .ch-btn.tt > svg { width: 22px; height: 22px; }
html.ui-new .cand-hero-facts .pp-meet { display: inline-flex; align-items: center; gap: 6px; border-color: var(--hr-purple-200, #dcc6ea); background: var(--hr-purple-50, #faf5fd); }
html.ui-new .cand-hero-facts .pp-meet svg { color: var(--hr-purple-700, #6b2d86); flex: none; }
html.ui-new .cand-hero-facts .pp-meet em { font-style: normal; color: var(--ink-600); }
html.ui-new .cand-hero-facts .pp-meet.is-past { background: #fff; border-color: var(--paper-200, #e6e1ea); }
html.ui-new .cand-hero-facts .pp-meet.is-missing { background: #fff7ed; border-color: #f3d39a; color: #8a5a00; }
html.ui-new .pp-meet-btn { margin-left: 4px; padding: 1px 10px; border: 1px solid currentColor; border-radius: 999px; background: transparent; color: var(--ink-700); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
html.ui-new .pp-meet-btn:hover { background: #fff; color: var(--ink-900); }
html.ui-new .pp-meetform { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 12px; padding: 12px; border: 1px solid var(--paper-200, #e6e1ea); border-radius: 12px; background: #fff; max-width: 720px; }
html.ui-new .pp-meetform label { display: grid; gap: 4px; font-size: var(--text-sm); font-weight: 600; color: var(--ink-700); }
html.ui-new .pp-meetform label.grow { flex: 1 1 220px; }
html.ui-new .pp-meetform input { height: 34px; padding: 0 10px; border: 1px solid var(--paper-200, #e6e1ea); border-radius: 8px; font: inherit; font-weight: 400; }
html.ui-new .pp-meetform .hint { flex-basis: 100%; margin: 0; }
html.ui-new .pp-fit-flags { list-style: none; margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: #fdecec; color: #8a1f1f; font-size: var(--text-sm); }
html.ui-new .pp-fit-flags li + li { margin-top: 4px; }
html.ui-new .pp-fit-src { margin: 0 0 12px; }
html.ui-new .pp-fit-said { margin: 0; padding-left: 18px; font-size: var(--text-sm); color: var(--ink-700, #3f3f46); font-style: italic; }
html.ui-new .pp-fit-old { margin: 6px 0 0; color: #92400e; }
html.ui-new .pp-pframe .pp-pbar { padding-top: 12px; }
html.ui-new .pp-pframe .pp-pbar .eyebrow { margin-bottom: 4px !important; }
/* the header's right column: fit + doors on one line, then the stage and its actions */
html.ui-new .pp-pframe .ch-row.no-photo { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px 32px; }
html.ui-new .pp-pframe .ch-row.no-photo > .cand-hero-inner { flex: 1 1 420px; }
html.ui-new .pp-pframe .ch-side { display: flex; flex-direction: column; align-items: flex-end; justify-items: end; gap: 12px; }
html.ui-new .pp-pframe .ch-side-top { display: flex; align-items: center; gap: 16px; }
html.ui-new .pp-pframe .ch-side .ch-fit { padding: 0; justify-items: end; }
html.ui-new .pp-pframe .ch-side .pp-actbar { margin: 0; justify-content: flex-end; }
html.ui-new .pp-pframe .ch-side .pp-actbar-acts { margin-left: 0; }
html.ui-new .pp-pframe .pp-pwrap { padding-top: 8px; }
html.ui-new .pp-pframe .pp-pwrap > .subnav:first-child, html.ui-new .pp-pframe .pp-pwrap > .pp-rf + .subnav { margin-top: 4px; }
/* the Screening scheduled tag: its state by colour and icon, the slot on hover, a click to change it */
html.ui-new .pp-lane.pp-lane-screening { position: relative; gap: 6px; border: 1px solid transparent; font: inherit; font-size: var(--text-sm); font-weight: 700; cursor: pointer; }
html.ui-new .pp-lane.pp-meet-set { background: var(--hr-purple-100, #f1e6f8); color: var(--hr-purple-700, #6b2d86); }
html.ui-new .pp-lane.pp-meet-pending { background: #fff4e0; color: #8a5a00; border-color: #f3d39a; }
html.ui-new .pp-lane.pp-meet-done { background: #e7f6ec; color: #1f7a3d; }
html.ui-new .pp-lane.pp-lane-screening:hover { filter: brightness(.97); }
html.ui-new .pp-meet-tip { display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; min-width: 220px; padding: 8px 12px; border-radius: 10px; background: var(--ink-900, #18181b); color: #fff; text-align: left; white-space: nowrap; font-weight: 400; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
html.ui-new .pp-meet-tip b { display: block; font-weight: 700; }
html.ui-new .pp-meet-tip small { display: block; opacity: .75; margin-top: 2px; }
html.ui-new .pp-lane-screening:is(:hover, :focus-visible) .pp-meet-tip { display: block; }
/* the rail's stage box moves the card */
html.ui-new .pp-move { display: flex; align-items: center; gap: 8px; white-space: nowrap; margin: 10px 0 4px; font-size: var(--text-sm); font-weight: 600; color: var(--hr-purple-700, #6b2d86); }
html.ui-new .pp-move select { flex: 1 1 auto; min-width: 0; height: 34px; padding: 0 10px; border: 1px solid var(--hr-purple-200, #dcc6ea); border-radius: 8px; background: #fff; color: var(--ink-900); font: inherit; font-weight: 500; cursor: pointer; }
html.ui-new .pp-move select:hover { border-color: var(--hr-purple-600, #7b3fbf); }
html.ui-new .pp-rf.wait { background: var(--paper-50, #fafafa); border-color: var(--paper-200, #e6e1ea); color: var(--ink-500); }
html.ui-new .pp-rf.wait .pp-rf-h { color: var(--ink-500); font-weight: 600; }
html.ui-new .ch-fit-wait { color: var(--ink-400, #9a9aa3); }
/* past the handoff with nothing owed: the reply box folds into one line with the way to Teamtailor */
html.ui-new .pp-quietbox { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 16px; border: 1px solid var(--paper-200, #e6e1ea); border-radius: 14px; background: var(--paper-50, #fafafa); }
html.ui-new .pp-quietbox p { margin: 0; flex: 1 1 320px; color: var(--ink-700); }
html.ui-new .pp-quietbox-acts { display: inline-flex; flex-wrap: wrap; gap: 8px; }
/* the add-a-step form: an action, its words, From, When, whose */
html.ui-new .pp-addform { margin-top: 10px; padding: 14px 16px; border: 1px solid var(--hr-purple-200, #dcc6ea); border-radius: 14px; background: #fff; }
html.ui-new .pp-af-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
html.ui-new .pp-af-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 14px; }
html.ui-new .pp-af-f { display: grid; gap: 4px; font-size: var(--text-sm); font-weight: 600; color: var(--ink-700); }
html.ui-new .pp-af-wide { grid-column: 1 / -1; }
html.ui-new .pp-af-f input, html.ui-new .pp-af-f select, html.ui-new .pp-af-f textarea { width: 100%; min-height: 36px; padding: 6px 10px; border: 1px solid var(--paper-200, #e6e1ea); border-radius: 8px; font: inherit; font-weight: 400; color: var(--ink-900); background: #fff; }
html.ui-new .pp-af-f textarea { min-height: 90px; resize: vertical; }
html.ui-new .pp-af-f input[type="file"] { padding: 6px; }
html.ui-new .pp-af-when { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; grid-column: 1 / -1; }
html.ui-new .pp-af-when > span { flex-basis: 100%; }
html.ui-new .pp-af-when select, html.ui-new .pp-af-when input { width: auto; }
html.ui-new .pp-af-when #ppAfIn { width: 80px; }
html.ui-new .pp-af-hint { margin: 10px 0 0; }
/* When / Who does it / Cancel it if: one labelled line each, read top to bottom */
html.ui-new .pp-af-q { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 10px; font-size: var(--text-sm); }
html.ui-new .pp-af-ql { flex: 0 0 110px; font-weight: 600; color: var(--ink-700); }
html.ui-new .pp-af-qv { flex: 1 1 260px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
html.ui-new .pp-af-qv label { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
html.ui-new .pp-af-qv select, html.ui-new .pp-af-qv input[type="number"], html.ui-new .pp-af-qv input[type="datetime-local"] { min-height: 36px; padding: 6px 10px; border: 1px solid var(--paper-200, #e6e1ea); border-radius: 8px; font: inherit; color: var(--ink-900); background: #fff; }
html.ui-new .pp-af-qv #ppAfIn { width: 72px; }
html.ui-new .pp-af-fixed { color: var(--ink-700); }
html.ui-new #ppAfSum { padding: 8px 12px; border-radius: 10px; background: var(--paper-100, #f6f3f8); color: var(--ink-800, #2b2b2b); }
html.ui-new .pp-af-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 10px; }
html.ui-new .pp-af-foot .hint { margin-left: auto; }
/* WHAT KIND OF STEP, AND WHETHER IT GOES BY ITSELF (Tania 2026-10-27 16:00: "visually see in the todos if those are task,
   linkeidn actions, emails etc, maybe with an icon. Also … if those are automatic or clickable"). step_kind.js; the To-dos
   tab's .po-kind is the same chip. */
html.ui-new .sk-kind { display: inline-flex; align-items: center; gap: 5px; vertical-align: 1px; margin-right: 6px; 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, 600); white-space: nowrap; }
html.ui-new .sk-kind svg { flex: 0 0 18px; width: 18px; height: 18px; padding: 3px; border-radius: 999px; background: var(--white, #fff); color: var(--hr-purple-500, #6A4BC4); box-sizing: border-box; }
html.ui-new .sk-kind-li svg { background: #2867B2; color: var(--white, #fff); }
html.ui-new .sk-kind-mail svg { color: #D9473A; }
html.ui-new .sk-kind-eye svg, html.ui-new .sk-kind-chat svg { color: #2867B2; }
html.ui-new .sk-kind-clock svg { color: var(--ink-500); }
html.ui-new .sk-kind-flag svg { color: var(--danger, #e0454b); }
html.ui-new .sk-kind-star svg { color: var(--energy-yellow-600, #d3a32f); }
html.ui-new .sk-how { display: inline-block; margin-left: 8px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: var(--fw-semibold, 600); vertical-align: 1px; white-space: nowrap; }
html.ui-new .sk-how-auto { background: var(--success-bg, #e6f5ec); color: var(--success, #2fa25b); }
html.ui-new .sk-how-hand { background: var(--hr-purple-100, #f1e6f8); color: var(--hr-purple-700, #6b2d86); }
html.ui-new .pp-td.is-done .sk-kind { opacity: .6; }
html.ui-new .pp-td-fix { flex-wrap: wrap; }
html.ui-new .pp-td-fix .pp-td-acts { flex: 1 0 100%; padding-left: 34px; }
html.ui-new .pp-td-fix .pp-td-acts .exc-racts { display: inline-flex; flex-wrap: wrap; gap: 6px; }
/* a failed Teamtailor push is a To fix row: its ways out (link, or add the email and send) fill the row */
html.ui-new .pp-td-fix .pp-td-acts > .pp-ttfix { flex: 1 1 100%; min-width: 0; }
html.ui-new .pp-td-fix .pp-ttfix > :first-child { margin-top: 2px; }
html.ui-new .pp-td-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
html.ui-new .pp-td-files a { font-size: var(--text-sm); color: var(--ink-700); text-decoration: none; padding: 1px 8px; border: 1px solid var(--paper-200, #e6e1ea); border-radius: 999px; }
html.ui-new .pp-td-files a:hover { border-color: var(--ink-400, #9a9aa3); }
/* the stages as circles you can press: a line through them, the name under each */
html.ui-new .pp-stepper { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; margin: 4px 0 2px; }
html.ui-new .pp-stepper::before { content: ""; position: absolute; left: 8%; right: 8%; top: 10px; height: 2px; background: var(--hr-purple-200, #dcc6ea); }
html.ui-new .pp-stp { position: relative; display: grid; justify-items: center; gap: 4px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--ink-600); }
html.ui-new .pp-stp[disabled] { cursor: default; }
html.ui-new .pp-stp-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--hr-purple-200, #dcc6ea); background: #fff; transition: transform .12s, box-shadow .12s; }
html.ui-new .pp-stp.filled .pp-stp-dot { background: var(--hr-purple-600, #7b3fbf); border-color: var(--hr-purple-600, #7b3fbf); }
html.ui-new .pp-stp.current .pp-stp-dot { border-color: var(--hr-purple-600, #7b3fbf); box-shadow: 0 0 0 4px var(--hr-purple-100, #f1e6f8); background: #fff; }
html.ui-new .pp-stp:not([disabled]):hover .pp-stp-dot, html.ui-new .pp-stp.is-open .pp-stp-dot { transform: scale(1.15); box-shadow: 0 0 0 4px var(--hr-purple-100, #f1e6f8); }
html.ui-new .pp-stp-lbl { font-size: 10.5px; font-weight: 600; line-height: 1.1; text-align: center; }
html.ui-new .pp-stp.current .pp-stp-lbl { color: var(--hr-purple-700, #6b2d86); }
html.ui-new .pp-stp-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 2px; padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--hr-purple-200, #dcc6ea); }
html.ui-new .pp-stp-pick-h { font-size: var(--text-sm); font-weight: 600; color: var(--ink-700); }
html.ui-new .pp-stp-pick .pp-td-ic { margin-left: auto; }

/* ── profile loading skeleton (person.js _ppSkeleton) ── */
html.ui-new .pp-skel { padding: 20px 16px; }
html.ui-new .pp-sk { display: block; height: 12px; border-radius: 6px; margin: 8px 0;
  background: linear-gradient(90deg, var(--gray-100, #eef0f3) 25%, var(--gray-50, #f7f8fa) 50%, var(--gray-100, #eef0f3) 75%);
  background-size: 200% 100%; animation: pp-sk-shine 1.3s ease-in-out infinite; }
html.ui-new .pp-sk-hero { display: flex; gap: 16px; align-items: center; }
html.ui-new .pp-sk-av { width: 56px; height: 56px; border-radius: 50%; margin: 0; flex: none; }
html.ui-new .pp-sk-lines { flex: 1; min-width: 0; }
html.ui-new .pp-sk-lines > .pp-sk:first-child { height: 18px; }
html.ui-new .pp-sk-chips, html.ui-new .pp-sk-tabs, html.ui-new .pp-sk-dots { display: flex; gap: 8px; flex-wrap: wrap; }
html.ui-new .pp-sk-chips .pp-sk { height: 22px; border-radius: 11px; margin: 4px 0 0; }
html.ui-new .pp-sk-tabs { margin: 20px 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--gray-100, #eef0f3); }
html.ui-new .pp-sk-tabs .pp-sk { height: 14px; margin: 0; }
html.ui-new .pp-sk-body { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; margin-top: 12px; }
html.ui-new .pp-sk-gap { height: 14px; }
html.ui-new .pp-sk-dots { justify-content: space-between; margin-bottom: 12px; }
html.ui-new .pp-sk-dot { width: 22px; height: 22px; border-radius: 50%; margin: 0; }
html.ui-new .pp-skel .pp-opening { margin-top: 18px; text-align: center; }
/* friendlier: the skeleton fades in (a fast open never flashes it), the shimmer is soft, the
   caption slides in with each new line */
html.ui-new .pp-skel { animation: pp-sk-fade .35s ease-out .15s both; }
html.ui-new .pp-sk { background: linear-gradient(90deg, #eef0f5 0%, #f6f4fd 45%, #eef0f5 90%); background-size: 220% 100%;
  animation-duration: 1.6s; }
html.ui-new .pp-sk-av { background: linear-gradient(135deg, #ece8fb, #f4f2fd); }
html.ui-new .pp-skel .pp-opening { display: flex; justify-content: center; align-items: center; gap: 8px; color: var(--gray-500, #6b7280); }
html.ui-new .pp-skel .pp-opening::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--purple, #7c5cff);
  animation: pp-sk-pulse 1.2s ease-in-out infinite; }
html.ui-new .pp-sk-say { display: inline-block; }
html.ui-new .pp-sk-in { animation: pp-sk-say .35s ease-out; }
/* six names don't fit under six circles in the rail: only the stage they're on is named, and the
   circle under the pointer (or the one opened) names itself in its place */
html.ui-new .pp-stepper { padding-bottom: 18px; }
html.ui-new .pp-stp-lbl { position: absolute; top: 26px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .12s; }
html.ui-new .pp-stp:first-child .pp-stp-lbl { left: 0; transform: none; }
html.ui-new .pp-stp:last-child .pp-stp-lbl { left: auto; right: 0; transform: none; }
html.ui-new .pp-stp.current .pp-stp-lbl, html.ui-new .pp-stp.is-open .pp-stp-lbl,
html.ui-new .pp-stp:hover .pp-stp-lbl, html.ui-new .pp-stp:focus-visible .pp-stp-lbl { opacity: 1; }
html.ui-new .pp-stepper:hover .pp-stp.current:not(:hover) .pp-stp-lbl,
html.ui-new .pp-stepper:has(.is-open) .pp-stp.current:not(.is-open) .pp-stp-lbl { opacity: 0; }
/* the skeleton wears the page's own colours: the grey hero band, the lilac stage card */
html.ui-new .pp-skel .pp-sk-hero { background: #f6f6f8; margin: -20px -16px 0; padding: 22px 24px; }
html.ui-new .pp-skel .pp-sk-rail { background: #f4effc; border: 1px solid #e6dcf6; border-radius: 14px; padding: 14px 16px; align-self: start; }
html.ui-new .pp-skel .pp-sk-main { border: 1px solid #eceef2; border-radius: 14px; padding: 16px 20px; }
html.ui-new .pp-skel .pp-sk-dot { background: #e2d6f6; }
html.ui-new .pp-skel .pp-opening { font-size: 14px; margin-top: 28px; }
/* the screening's "with whom" picker, inline on the call's line */
html.ui-new .pp-who-form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
html.ui-new .pp-who-form .field-input { width: auto; max-width: 180px; margin: 0; padding: 4px 8px; font-size: var(--text-sm); }
/* schedule send: the clock by Send, and Gmail's choices under the box */
html.ui-new .pp-later { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--gray-200, #e5e7eb); background: #fff;
  color: var(--ink-600, #555); display: inline-grid; place-items: center; cursor: pointer; }
html.ui-new .pp-later:hover, html.ui-new .pp-later.is-open { border-color: var(--hr-purple-600, #7b3fbf); color: var(--hr-purple-700, #6b2d86); }
html.ui-new .pp-later-pop { margin: 8px 0 0; padding: 8px; border: 1px solid var(--gray-100, #eef0f3); border-radius: 12px; background: #fff;
  box-shadow: 0 6px 20px rgba(20, 20, 40, .08); max-width: 360px; }
html.ui-new .pp-later-h { font-weight: 700; font-size: var(--text-sm); padding: 4px 8px 6px; }
html.ui-new .pp-later-opt { display: flex; justify-content: space-between; gap: 12px; width: 100%; padding: 8px; border: 0; border-radius: 8px;
  background: none; font: inherit; text-align: left; cursor: pointer; }
html.ui-new .pp-later-opt:hover { background: var(--hr-purple-50, #f7f1fb); }
html.ui-new .pp-later-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px; border-top: 1px solid var(--gray-100, #eef0f3); margin-top: 4px; }
html.ui-new .pp-later-pick label { width: 100%; margin: 0; }
html.ui-new .pp-later-pick .field-input { margin: 0; width: auto; flex: 1; min-width: 0; }
/* WHERE THEY ARE, AT A GLANCE (owner, 2026-10-22: "shouldnt he be on the screening stage? as is
   scheduled?"): the stage they are on is a filled circle with a ring and always keeps its name; the
   stages ahead are empty. A circle pressed names itself in the "Move to" box, never under the row. */
html.ui-new .pp-stp.current .pp-stp-dot { background: var(--hr-purple-600, #7b3fbf); border-color: var(--hr-purple-600, #7b3fbf);
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--hr-purple-600, #7b3fbf); }
html.ui-new .pp-stp.current .pp-stp-lbl { opacity: 1 !important; font-weight: 700; }
html.ui-new .pp-stp:not(.current) .pp-stp-lbl { opacity: 0 !important; }
html.ui-new .pp-stp.is-open:not(.current) .pp-stp-dot { box-shadow: 0 0 0 4px var(--hr-purple-100, #f1e6f8); }


/* Tools & checks in three groups: a small heading per group, and a closed fold for the technical ones */
html.ui-new .ps-root .ps-sub { margin: 18px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-500, #6b7280); }
html.ui-new .ps-root .ps-tech, html.ui-new #viewSettings .ps-tech { margin: 14px 0 0; border-top: 1px solid var(--gray-100, #eef0f3); padding-top: 10px; }
html.ui-new .ps-root .ps-tech > summary, html.ui-new #viewSettings .ps-tech > summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
html.ui-new .ps-root .ps-tech[open] > summary, html.ui-new #viewSettings .ps-tech[open] > summary { margin-bottom: 8px; }

/* ── SETTINGS AS CARDS, NOT A PAGE OF LINKS (owner, 2026-10-22: "improve the ux ui, right now looks
   like a page with links"). Each row is a card: its name in bold, what it is underneath, an arrow;
   the whole card opens it, and an open one joins the panel that unfolds under it. A strip of the
   groups sits on top to jump between them. Markup unchanged (the smoke pins it); _psDecorate adds
   the strip and the whole-card press. ── */
html.ui-new .ps-root .panel { padding: 22px 22px 14px; }
html.ui-new .ps-root .panel > h3 { display: flex; align-items: center; gap: 10px; font-size: 17px; margin-bottom: 14px; scroll-margin-top: 80px; }
html.ui-new .ps-root .panel > h3 .ps-h-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: var(--hr-purple-100, #f1e6f8); color: var(--hr-purple-700, #6b2d86); font-size: 15px; }
html.ui-new .ps-root .panel > p:has(> a), html.ui-new .ps-root .ps-tech > p:has(> a) {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center;
  margin: 0 0 8px; padding: 12px 14px; border: 1px solid var(--gray-100, #eceef2); border-radius: 12px;
  background: #fff; cursor: pointer; transition: border-color .12s, background .12s, box-shadow .12s; }
html.ui-new .ps-root .panel > p:has(> a):hover, html.ui-new .ps-root .ps-tech > p:has(> a):hover {
  border-color: var(--hr-purple-200, #dcc6ea); background: var(--hr-purple-50, #faf6fd); }
html.ui-new .ps-root .panel > p:has(> a) > a, html.ui-new .ps-root .ps-tech > p:has(> a) > a {
  grid-column: 1; color: var(--ink-900, #111); font-weight: 650; text-decoration: none; }
html.ui-new .ps-root .panel > p:has(> a) > .hint, html.ui-new .ps-root .ps-tech > p:has(> a) > .hint {
  grid-column: 1; grid-row: 2; display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; }
html.ui-new .ps-root .panel > p:has(> a)::after, html.ui-new .ps-root .ps-tech > p:has(> a)::after {
  content: "›"; grid-column: 2; grid-row: 1 / span 2; font-size: 22px; line-height: 1; color: var(--ink-400, #9ca3af);
  transition: transform .15s; }
html.ui-new .ps-root .panel > p:has(> a[href^="/"])::after, html.ui-new .ps-root .ps-tech > p:has(> a[href^="/"])::after { content: "↗"; font-size: 15px; }
/* an open row and its panel read as one card */
html.ui-new .ps-root .panel > p:has(+ .ps-body:not([hidden])), html.ui-new .ps-root .ps-tech > p:has(+ .ps-body:not([hidden])) {
  margin-bottom: 0; border-color: var(--hr-purple-300, #c9a8e0); border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  background: var(--hr-purple-50, #faf6fd); }
html.ui-new .ps-root .panel > p:has(+ .ps-body:not([hidden]))::after { transform: rotate(90deg); color: var(--hr-purple-600, #7b3fbf); }
html.ui-new .ps-root .panel > .ps-body:not([hidden]), html.ui-new .ps-root .ps-tech > .ps-body:not([hidden]) {
  margin: 0 0 10px; padding: 14px; border: 1px solid var(--hr-purple-300, #c9a8e0); border-top: 0;
  border-radius: 0 0 12px 12px; background: #fff; }
html.ui-new .ps-root .ps-sub { margin: 16px 0 8px 2px; }
html.ui-new .ps-root .ps-tech > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border: 1px dashed var(--gray-200, #e5e7eb); border-radius: 12px; color: var(--ink-700, #374151); }
html.ui-new .ps-root .ps-tech > summary::-webkit-details-marker { display: none; }
html.ui-new .ps-root .ps-tech > summary::before { content: "›"; font-size: 18px; transition: transform .15s; }
html.ui-new .ps-root .ps-tech[open] > summary::before { transform: rotate(90deg); }
html.ui-new .ps-root .ps-tech { border-top: 0; padding-top: 0; }
/* the strip of groups */
html.ui-new .ps-root .ps-nav { position: sticky; top: 64px; z-index: 5; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px;
  padding: 8px 0; background: var(--page-bg, #fafafb); }
html.ui-new .ps-root .ps-nav a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--gray-200, #e5e7eb); background: #fff;
  color: var(--ink-700, #374151); font-size: 13px; font-weight: 600; text-decoration: none; }
html.ui-new .ps-root .ps-nav a:hover, html.ui-new .ps-root .ps-nav a.is-on { border-color: var(--hr-purple-600, #7b3fbf); color: var(--hr-purple-700, #6b2d86); }
/* ── SETTINGS, ONE GROUP AT A TIME (owner, 2026-10-27: "i asked you to improve settings navigation and
   s still bad"): the groups as a short list on the left, the picked one on the right; a phone gets them
   as a strip on top. What needs a person leads the page, or one green "All good" line. Each item shows
   its one action as a small button on the right (data-do). ── */
html.ui-new .ps-root .ps-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: start; }
html.ui-new .ps-root .ps-side { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 2px; }
html.ui-new .ps-root .ps-side[hidden] { display: none; }
html.ui-new .ps-root .ps-layout:has(> .ps-side[hidden]) { grid-template-columns: minmax(0, 1fr); }
html.ui-new .ps-root .ps-side a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px;
  color: var(--ink-700, #374151); font-size: 14px; font-weight: 600; text-decoration: none; }
html.ui-new .ps-root .ps-side a:hover { background: var(--hr-purple-50, #faf6fd); }
html.ui-new .ps-root .ps-side a.is-on { background: var(--hr-purple-100, #f1e6f8); color: var(--hr-purple-700, #6b2d86); }
html.ui-new .ps-root .ps-side a.ps-side-quiet { margin-top: 14px; color: var(--ink-500, #6b7280); font-weight: 500; font-size: 13px; }
html.ui-new .ps-root .ps-side a.ps-side-quiet.is-on { color: var(--hr-purple-700, #6b2d86); }
html.ui-new .ps-root .ps-side-ic { width: 20px; text-align: center; font-size: 15px; }
html.ui-new .ps-root .ps-main > section.ps-off { display: none; }
html.ui-new .ps-root .ps-main > section.panel { margin-top: 0; }
html.ui-new .ps-root .ps-check-intro { margin: -6px 0 14px; }
/* the action on each item, where the arrow was */
html.ui-new .ps-root .panel > p[data-do]:has(> a)::after { content: attr(data-do); font-size: 13px; font-weight: 600; line-height: 1;
  padding: 7px 12px; border: 1px solid var(--gray-200, #e5e7eb); border-radius: 8px; color: var(--ink-700, #374151); background: #fff; }
html.ui-new .ps-root .panel > p[data-do]:has(> a[href^="/"])::after { content: attr(data-do) " ↗"; font-size: 13px; }
html.ui-new .ps-root .panel > p[data-do]:has(> a):hover::after { border-color: var(--hr-purple-600, #7b3fbf); color: var(--hr-purple-700, #6b2d86); }
html.ui-new .ps-root .panel > p[data-do]:has(+ .ps-body:not([hidden]))::after { content: "Close"; transform: none; }
/* what needs you */
html.ui-new .ps-root .ps-needs { margin: 0 0 20px; }
html.ui-new .ps-root .ps-needs:empty { display: none; }
html.ui-new .ps-root .ps-needs-ok { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 16px; border-radius: 12px;
  background: #ecf8f0; color: #1d6b3a; font-size: 14px; }
html.ui-new .ps-root .ps-needs-ok .ps-sync-dot { background: #2fa25b; }
html.ui-new .ps-root .ps-needs-h { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8a5a0a; }
html.ui-new .ps-root .ps-need { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 8px;
  padding: 12px 16px; border-radius: 12px; background: #fff7e6; border: 1px solid #f3dfb4; }
html.ui-new .ps-root .ps-need-red { background: #fdeeee; border-color: #f2c9cb; }
html.ui-new .ps-root .ps-need-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html.ui-new .ps-root .ps-need-t .hint { font-size: 13px; line-height: 1.4; }
html.ui-new .ps-root .ps-need .btn { flex: 0 0 auto; }
html.ui-new .ps-root .ps-fold > summary { cursor: pointer; list-style: none; }
html.ui-new .ps-root .ps-fold > summary::-webkit-details-marker { display: none; }
@media (max-width: 820px) {
  html.ui-new .ps-root .ps-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  html.ui-new .ps-root .ps-side { position: static; flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
  html.ui-new .ps-root .ps-side a { flex: 0 0 auto; padding: 7px 12px; border: 1px solid var(--gray-200, #e5e7eb); background: #fff; font-size: 13px; }
  html.ui-new .ps-root .ps-side a.ps-side-quiet { margin-top: 0; }
  html.ui-new .ps-root .ps-need { flex-direction: column; align-items: flex-start; }
}
/* stop conditions on the step form, and the paused line on Next steps */
html.ui-new .pp-af-stops { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 4px 0 0; font-size: var(--text-sm); }
html.ui-new .pp-af-stops label { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
html.ui-new .pp-af-auto { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: var(--text-sm); font-weight: 600; }
html.ui-new .pp-paused { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: #fff7e6; color: #8a5a0a; font-size: var(--text-sm); }
html.ui-new .pp-fromline { margin: 0 0 10px; font-size: var(--text-sm); color: var(--gray-600, #555); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
html.ui-new .pp-fromline select { width: auto; max-width: 260px; margin: 0; }
/* THE CARD, TIGHTER (owner, 2026-10-22: "make sure you do a good use of the space inside the card"):
   a smaller face, the chips on one row across the whole card under it, side by side */
html.ui-new .board-card { gap: 8px 10px; }
html.ui-new .board-card .card-face { width: 36px; height: 36px; font-size: 13px; }
html.ui-new .board-card .card-chips { grid-column: 1 / -1; gap: 4px; margin-top: 0; }
html.ui-new .board-card .card-chips > .badge { flex: 0 1 auto; }
html.ui-new .board-card .name { line-height: 1.2; }
/* "they said no" leads the reply box with the archive door */
html.ui-new .pp-saidno { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; background: #fef3f2; color: #8a1f17; font-size: var(--text-sm); }

/* Teammate avatars on a card: who on the team is already a LinkedIn connection (board.js _bdConnAvatars). */
html.ui-new .bd-conn { display: inline-flex; align-items: center; vertical-align: middle; position: relative; padding-right: 6px; line-height: 1; }
html.ui-new .bd-av { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; font-size: 8.5px; font-weight: 700; letter-spacing: .02em; border: 1.5px solid #fff; box-sizing: border-box; }
html.ui-new .bd-av + .bd-av { margin-left: -6px; }
html.ui-new .bd-av-more { background: var(--gray-200, #e5e5e5); color: var(--gray-700, #444); }
html.ui-new .bd-av-tick { position: absolute; right: 0; bottom: -2px; width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 1.5px #fff; }
html.ui-new .bd-conn-big .bd-av { width: 26px; height: 26px; font-size: 10px; }
html.ui-new .bd-conn-big .bd-av-tick { width: 13px; height: 13px; }
html.ui-new .pp-connlist { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--gray-600, #555); }
html.ui-new .pp-connlist li { display: inline-flex; align-items: center; gap: 6px; }
html.ui-new .pp-book ol { margin: 6px 0 0; padding-left: 18px; color: var(--ink-700); }
html.ui-new .pp-book li { margin: 4px 0; }
/* What they told us, as tags to save on the card (Tania 10-27: "all the info that we could use to match them") */
html.ui-new .pp-learned { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
html.ui-new .pp-learned-h { font-size: var(--text-xs); color: var(--ink-600); margin-right: 2px; }
html.ui-new .pp-askhint { margin: 6px 0 0; padding: 6px 10px; border-radius: var(--radius-sm, 6px); background: var(--warning-bg); color: var(--warning-ink); font-size: var(--text-xs); }
html.ui-new .pp-askhint[hidden] { display: none; }
html.ui-new .pp-learn { font-size: var(--text-xs); font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px dashed var(--brand-purple-400, #9b7bd4); background: var(--white); color: var(--brand-purple-700, #5b3b9c); cursor: pointer; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
html.ui-new .pp-learn:hover { border-style: solid; }
html.ui-new .pp-learn:disabled { opacity: .5; cursor: default; }
html.ui-new .ps-root .ps-slowpages { margin: 2px 0 4px 18px; border-collapse: collapse; font-size: 12px; }
html.ui-new .ps-root .ps-slowpages th, html.ui-new .ps-root .ps-slowpages td { padding: 2px 10px 2px 0; text-align: left; vertical-align: top; }
html.ui-new .ps-root .ps-slowpages th { color: var(--gray-500); font-weight: 600; }
html.ui-new .ps-root .ps-slowpages code { font-size: 11.5px; }
/* a page's Round trips number opens into the statements it ran (2026-10-27) */
html.ui-new .ps-root .ps-heads > summary { cursor: pointer; text-decoration: underline dotted; }
html.ui-new .ps-root .ps-heads-t { margin: 4px 0 6px 0; }

/* The process line under Slow pages (2026-10-27): three dots, one per thing that can hold a cheap call */
html.ui-new .ps-process .ps-sync-dot { display: inline-block; margin: 0 2px 0 4px; }
html.ui-new .ps-process .ps-dot-green { background: #16A34A; }
html.ui-new .ps-process .ps-dot-amber { background: #D97706; }
html.ui-new .ps-process .ps-dot-red { background: #DC2626; }
html.ui-new .ps-process .ps-dot-grey { background: var(--gray-400, #9CA3AF); }
/* Score again on the Fit card: the press shows it is working, then what it moved or why not. */
html.ui-new .pp-spin { display: inline-block; width: 11px; height: 11px; margin-right: 4px; vertical-align: -1px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
html.ui-new .pp-score-note { margin: 4px 0 0; }
html.ui-new .pp-score-note.busy { color: var(--ink-500, #6b7280); }
html.ui-new .pp-score-note.ok { color: #166534; }
html.ui-new .pp-score-note.err { color: #b91c1c; }