/* ============================================================================
   WHAT PORTFOLIO ADDS TO THE PORTAL'S (2026-10-20) — behind "Try the new screens".
   ----------------------------------------------------------------------------
   The page is the portal's own markup (static/js/portfolio.js): internal/portfolio.html, its
   Priority, Table and Meetings tabs, and my_searches.html's head for a sourcer. Each is dressed
   by that template's own <style> block, extracted as written into static/portal/css/ and linked
   by app.js under the switch only. This file only fits them into this app's page where our
   data has fewer parts than the portal's. Every rule is scoped under html.ui-new; with the
   switch off none applies.
   ============================================================================ */

/* The page's own room: the portal's .wrap pads it, as on the search page. */
html.ui-new .pf-root { min-height: calc(100vh - 66px); }

/* The ledger has no third column here: the portal's "Open client →" and "+ New search" have
   no counterpart (searches are made in the portal, and this app has no client page). The
   work queue uses the same two columns: the kind where the company sits. */
html.ui-new .pf-ledger { --tp-cols: minmax(170px, .62fr) minmax(0, 2.2fr); }
html.ui-new .pf-queue { margin-bottom: var(--space-6, 32px); }

/* Priority: the lane is the AM's (set in the portal), so the list has no drag handle and its
   grid drops the handle's 36px column. */
html.ui-new .pf-tq { margin-bottom: var(--space-5, 24px); }
html.ui-new .pf-tq .tq-row { grid-template-columns: 34px minmax(0, 1fr) 130px 200px 64px; padding-left: 14px; }
@media (max-width: 700px) {
  html.ui-new .pf-tq .tq-row { grid-template-columns: 26px minmax(0, 1fr) 48px; padding-left: 10px; }
}

/* Table: the cells are read-only here (priority, status and dates are the portal's), so the
   handle and Edit columns never show; the handle cell stays in the row so the portal's
   phone rules, which count cells, land on the same columns. */
html.ui-new .pf-tt .tt-h-handle, html.ui-new .pf-tt .tt-c-handle { display: none; }
html.ui-new .pf-tt td.tt-c-pri { font-weight: var(--fw-semibold, 600); color: var(--ink-800); }
@media (max-width: 760px) {
  html.ui-new .pf-tt .tt-row { grid-template-columns: 56px minmax(0, 1fr) 48px; padding-left: 10px; }
  html.ui-new .pf-tt .tt-c-pri { grid-column: 1; } html.ui-new .pf-tt .tt-c-title { grid-column: 2; }
  html.ui-new .pf-tt .tt-c-day { grid-column: 3; }
  html.ui-new .pf-tt td:nth-child(7) { display: none; }
}

/* Start 20 is a button wearing the portal's badge. */
html.ui-new .portal button.badge { border: 0; font: inherit; font-size: var(--text-xs, 12px); font-weight: var(--fw-semibold, 600); cursor: pointer; }
html.ui-new .portal button.badge:disabled { opacity: .6; cursor: default; }

/* ONE ROW PER SEARCH (2026-10-21, Tania: "rethink the experience"). The portal's row is
   main · one pill · one link; the name keeps one line, the pill never wraps, and the link
   column is wide enough for "Follow up →". Who is on it is initials (the portal's .avatar). */
html.ui-new .pf-ledger .pf-row { grid-template-columns: minmax(0, 1fr) auto 104px; }
html.ui-new .pf-ledger .pf-t { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
html.ui-new .pf-ledger .tp-state { flex-wrap: nowrap; }
html.ui-new .pf-meta { display: flex; align-items: center; gap: 8px; min-width: 0; }
html.ui-new .pf-meta > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ui-new .pf-avs { display: inline-flex; flex: none; }
html.ui-new .pf-av { width: 22px; height: 22px; font-size: 10px; box-shadow: 0 0 0 2px var(--white); }
html.ui-new .pf-avs .pf-av + .pf-av { margin-left: -5px; }
html.ui-new .tp-amwho .pf-av { width: 26px; height: 26px; font-size: 11px; vertical-align: middle; margin-right: 4px; }
html.ui-new .pf-go-btn { background: none; border: 0; font-family: inherit; cursor: pointer; }
/* the pill's panel: every clock on the search, then the people behind the headline */
html.ui-new .pf-pd { position: absolute; top: 100%; right: 0; z-index: 6; width: min(300px, calc(100vw - 48px)); margin-top: 6px;
  padding: 6px 12px 10px; background: var(--white); border: 1px solid var(--paper-200); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md, 0 6px 20px rgba(0,0,0,.12)); font-size: var(--text-xs); text-align: left; }
html.ui-new .pf-pd .tp-names { position: static; width: auto; margin: 0; padding: 0; border: 0; box-shadow: none; max-height: 220px; }
html.ui-new .pf-pd .tp-names li { flex-direction: row; justify-content: space-between; gap: 10px; }
html.ui-new .pf-pd-h { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--paper-200); font-weight: var(--fw-semibold); color: var(--ink-700); }
/* paused searches fold away under their company */
html.ui-new .pf-paused-row { display: block; min-height: 0; }
html.ui-new .pf-paused > summary { list-style: none; cursor: pointer; font-size: var(--text-xs); color: var(--ink-500); padding: 4px 0; }
html.ui-new .pf-paused > summary::-webkit-details-marker { display: none; }
html.ui-new .pf-paused[open] > summary .tp-open { display: inline-block; transform: rotate(180deg); }
html.ui-new .pf-paused .pf-row { opacity: .75; }
@media (max-width: 700px) {
  html.ui-new .pf-ledger .pf-row { grid-template-columns: minmax(0, 1fr) auto; }
  html.ui-new .pf-pd { position: static; width: auto; box-shadow: none; }
}

/* Table: the portal's facts locked with the door to change them there; sourcers editable. */
html.ui-new .pf-locked { white-space: nowrap; }
html.ui-new .pf-lock { font-size: 10px; opacity: .55; }
html.ui-new .pf-lock-go { display: block; font-size: 11px; font-weight: var(--fw-medium, 500); color: var(--hr-purple); opacity: 0; white-space: nowrap; }
html.ui-new .pf-tt tr:hover .pf-lock-go, html.ui-new .pf-lock-go:focus-visible { opacity: 1; }
html.ui-new .pf-edit select { font: inherit; font-weight: var(--fw-semibold, 600); border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; padding: 2px 4px; cursor: pointer; }
html.ui-new .pf-tt tr:hover .pf-edit select { border-color: var(--paper-200); background: var(--white); }
html.ui-new .pf-who { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
html.ui-new .pf-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 1px; border-radius: 999px; background: var(--paper-100); font-size: var(--text-xs); }
html.ui-new .pf-add { width: 22px; height: 22px; border-radius: 50%; border: 1px dashed var(--ink-300, #bbb); background: var(--white); color: var(--ink-600); cursor: pointer; line-height: 1; opacity: 0; }
html.ui-new .pf-tt tr:hover .pf-add, html.ui-new .pf-add:focus-visible { opacity: 1; }
html.ui-new .pf-addbox { display: flex; flex-direction: column; gap: 6px; min-width: 200px; }
html.ui-new .pf-addbox select { font: inherit; padding: 4px 6px; border: 1px solid var(--paper-200); border-radius: var(--radius-md); }
html.ui-new .pf-addline { font-size: var(--text-xs); color: var(--ink-700); }
html.ui-new .pf-addbtns { display: flex; gap: 6px; }

/* Screenings: who sourced each person, and the filters above the week. */
html.ui-new .pf-src { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; color: var(--ink-700); font-weight: var(--fw-medium, 500); }
html.ui-new .pf-mt-src { display: block; margin-top: 4px; }
html.ui-new .pf-mt-src .pf-src { font-size: 11px; }
html.ui-new .pf-mfilter { margin-top: calc(-1 * var(--space-2, 8px)); }
html.ui-new .pf-mfilter select { max-width: 220px; }
html.ui-new .pf-mt-rule { margin: -6px 0 var(--space-3, 12px); }
html.ui-new .pf-older { margin-top: var(--space-5, 24px); }
html.ui-new .pf-older > summary { list-style: none; cursor: pointer; color: var(--ink-600); }
html.ui-new .pf-older > summary::-webkit-details-marker { display: none; }
html.ui-new .pf-older[open] > summary .tp-open { display: inline-block; transform: rotate(180deg); }

/* Clean %: the scored people with no red flag; under half reads in the portal's late colour. */
html.ui-new .pf-clean { color: var(--ink-700); font-weight: var(--fw-medium, 500); text-decoration: none; }
html.ui-new .pf-clean:hover { color: var(--hr-purple-700); text-decoration: underline; }
html.ui-new .pf-clean.is-low { color: var(--orbit-pink-700); }
html.ui-new .pf-num { color: inherit; text-decoration: none; }
html.ui-new .pf-num:hover { color: var(--hr-purple-700); text-decoration: underline; }

/* Tania, 2026-10-23: "this should be clickable, riht?" The company name, its "N late" and every
   search title are doors, so they say so: an underline on hover, the hand cursor, the brand
   colour. The late list opens under the company, left-aligned (the pill's panel opens right). */
html.ui-new .pf-ledger a.tp-name, html.ui-new .pf-ledger a.tp-t { cursor: pointer; text-decoration: none; }
html.ui-new .pf-ledger a.tp-name:hover, html.ui-new .pf-ledger a.tp-t:hover { color: var(--hr-purple-700); text-decoration: underline; text-underline-offset: 3px; }
html.ui-new .pf-co-late { display: inline-block; }
html.ui-new .pf-co-late > summary { cursor: pointer; }
html.ui-new .pf-co-late > summary:hover .tp-stall { text-decoration: underline; text-underline-offset: 3px; }
html.ui-new .pf-co-late .tp-open { font-size: 10px; color: var(--ink-500); }
html.ui-new .pf-co-late[open] .tp-open { display: inline-block; transform: rotate(180deg); }
html.ui-new .pf-pd.pf-pd-left { left: 0; right: auto; width: min(340px, calc(100vw - 48px)); }
html.ui-new .pf-pd-h.pf-pd-h0 { margin-top: 2px; padding-top: 0; border-top: 0; }
html.ui-new .pf-pd .tp-names li.pf-late-s { flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 0; }
html.ui-new .pf-late-s > a { color: var(--ink-900); font-weight: var(--fw-medium); }
html.ui-new .pf-late-s > a:hover { color: var(--hr-purple-700); text-decoration: underline; }
html.ui-new .pf-late-first { color: var(--ink-500); }

/* THE STRIP IS SIX SOURCING CLOCKS (Tania, 2026-10-24: "clients are not in the scope of the
   app"). The portal's five columns had one for what waits on the client; here three of the six
   are clocks (replies, accepts, interested), each a door that filters the ledger. */
html.ui-new .pf-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1000px) {
  html.ui-new .pf-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.ui-new .pf-strip .tp-cell:last-child { grid-column: auto; border-left: 1px solid var(--paper-200); }
}
@media (max-width: 760px) {
  html.ui-new .pf-strip .tp-us { grid-column: auto; order: 0; border-top: 1px solid var(--paper-200) !important; }
  html.ui-new .pf-strip .tp-cell:nth-child(odd) { border-left: 0 !important; }
  html.ui-new .pf-strip .tp-cell:nth-child(even) { border-left: 1px solid var(--paper-200) !important; }
  html.ui-new .pf-strip .tp-cell:nth-child(-n+2) { border-top: 0 !important; }
}
/* A picked clock's people, above Companies (portfolio.js peopleHtml): a plain list, one row each. */
html.ui-new .tp-names.pf-people { position: static; width: auto; max-height: none; margin: 0 0 var(--space-5, 20px); padding: 4px 16px;
  border: 1px solid var(--line, var(--ink-200)); border-radius: var(--radius-md, 12px); box-shadow: none; background: var(--white); }
html.ui-new .tp-names.pf-people li { display: flex; flex-direction: row; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line, var(--ink-200)); }
html.ui-new .tp-names.pf-people li:last-child { border-bottom: 0; }
/* A board opened at one lane (?lane=, Portfolio's "N in conversation"): the lane is marked for a moment. */
html.ui-new [data-lane].bd-lane-focus { outline: 2px solid var(--hr-purple); outline-offset: 2px; transition: outline-color .6s; }