(styled via .home-strip-h h3 above) carrying its own count badge. The
.home-tabs/.home-tab rules that styled the old segmented control are gone with it. */
/* the nav buttons stay hard right */
.home-strip-h .home-strip-nav{margin-left:auto;}
/* ---------------- v9.9.2: the "Mine" toggle ----------------
Sits beside the hot star on a board card. A filled dot rather than a second star, so the two
read as different questions at a glance — "is this hot?" and "am I on it?" — and never as two
of the same control. Deliberately quieter than the star: hot is a priority signal, mine is a
fact about who is on the deal. */
.board-mine{position:absolute;top:5px;right:26px;border:none;background:transparent;cursor:pointer;
font-size:13px;line-height:1;padding:2px;color:var(--line-strong);
transition:color .12s,transform .12s;}
.board-mine:hover{color:var(--accent);transform:scale(1.18);}
.board-mine.on{color:var(--accent);}
/* the strip carries its own corner control, same as it does for the star */
.home-hot .board-mine{display:none;}
/* .home-unmine (the strip's own "remove me" dot) was removed with the My Projops tab in V11
Task 3 — .board-mine above still covers the Board/Archive/Today card control. */
/* the panel button, matching the Hot button's own on-state */
#pj-mine.on{border-color:var(--accent);color:var(--accent);}
/* v9.9.3: voice notes — the recorder inside the central "+ Add note" picker, and the Play
button a recorded/saved clip renders as in the Info tab and the Log tab's per-Projop rows. */
.voice-rec-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.voice-time{font-variant-numeric:tabular-nums;color:var(--muted);font-size:12.5px;}
/* v9.9.4: these were #an-voice-preview/#an-voice-rec (id-scoped to the Contact picker only)
until voiceRecorderHtml() became a shared widget (Projop Log tab, Actions tab too) — class
selectors now, so every recorder instance gets the same look regardless of its id prefix. */
.voice-preview{display:block;width:100%;margin-bottom:6px;}
.voice-rec-btn{color:var(--danger);border-color:var(--danger);}
.voice-rec-btn:hover{background:var(--danger-soft);}
.voice-play-btn{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line-strong);border-radius:7px;background:#fff;color:var(--ink);font-size:12.5px;padding:3px 9px;cursor:pointer;}
.voice-play-btn:hover{border-color:var(--accent);color:var(--accent);}
/* v12.99.0: compact, independent playback. It deliberately does not use #modal-root, so playing
a voice note from an edit form cannot replace that form. */
.voice-player-popup{position:fixed;right:18px;bottom:18px;z-index:90;width:min(350px,calc(100vw - 24px));
padding:10px 12px 12px;border:1px solid var(--line-strong);border-radius:12px;background:var(--panel);
box-shadow:var(--shadow-lg);}
.voice-player-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px;
color:var(--ink);font-size:13px;}
.voice-player-close{border:0;background:transparent;color:var(--muted);font-size:21px;line-height:1;
min-width:24px;min-height:24px;padding:0;cursor:pointer;}
.voice-player-close:hover{color:var(--danger);}
.voice-player-audio{display:block;width:100%;height:36px;}
/* v9.9.5: legibility pass on the Projop panel — Costas: fonts/UI reading too small. Tab labels
were 12.5px, action-row buttons (Report/Map/Research/Tidy/Edit/Delete etc, all .btn-sm inside
.detail-actions) were 13px/29px-tall. Bumped a notch; appended last so it wins the cascade,
same discipline every other override pass in this file has used. Scoped to the sidebar panel
specifically, not every .btn-sm app-wide (toolbar/modal buttons are a different context and
weren't part of this complaint). */
#side-body .pj-tab-btn{font-size:14px;padding:8px 12px;}
#side-body .pj-tab-btn.active{padding:9px 13px;}
#side-body .detail-actions .btn-sm{min-height:32px;padding:0 12px;font-size:14px;}
/* v10.2.0/v10.3.0: Home's Market info AND "New log notes" cards, both grouped by Projop — one
header per Projop (its own name, not a generic type badge) instead of repeating it on every
row. Shared rules: the two card's groups look identical on purpose. */
/* v12.77.0 — .home-mkt-grp / .home-mkt-grp-h moved to the accordion block at the end of this
file. They used to share these rules with the log-notes card, including `color:var(--pc)` —
a variable defined only on `.home-card.tone-*`, which these groups stopped living inside in
v12.69.0, so the heading had no colour of its own. The .home-note-* half is untouched. */
.home-note-grp{margin-bottom:8px;}
.home-note-grp-h{display:flex;align-items:center;gap:5px;margin:10px 9px 2px;font-size:11px;
font-weight:700;color:var(--pc);text-transform:uppercase;letter-spacing:.02em;}
.home-note-grp:first-child .home-note-grp-h{margin-top:4px;}
/* The Team Execution card header opens the full Actions page (wireDueCardOpen) — needs to read
as clickable like the rest of Home's interactive rows. V11 Task 3 renamed the card from
"Actions Due" (#home-card-due) to "Team Execution" (#home-card-exec); selector updated to match. */
#home-card-exec .home-card-h{cursor:pointer;}
#home-card-exec .home-card-h:hover{background:#f7f9fb;}
/* ===================== TODAY (v10.6.0) =====================
V11 P0 Task 2. Today deliberately does NOT look like Home: Home is a grid of four fixed-height
panel cards you read, Today is a stack of full-width bands you work, and every row ends in a
primary verb button (.today-do). Reuses .home-row / .home-row-t / .home-row-s / .home-urg-grp /
.home-empty / .home-n / .board-card verbatim — none of those are scoped to the Home cards, and
reusing them is what keeps a row looking like a row everywhere in this app. Appended last,
same discipline every other override pass in this file uses; nothing above was edited. */
.today-head{display:flex;align-items:flex-start;gap:12px;margin:0 2px 12px;}
.today-head-l{min-width:0;}
.today-head .board-title{margin:0;}
.today-sub{margin-top:3px;font-size:12px;color:var(--muted);}
.today-head .board-canvas-link{margin-left:auto;flex:0 0 auto;padding-top:4px;}
/* No "Me" contact set — Today cannot tell which work is yours, so it says so instead of
silently rendering three empty bands and looking broken. */
.today-nome{margin:0 2px 12px;padding:10px 12px;border:1px dashed var(--line-strong);border-radius:10px;
background:var(--panel);font-size:12px;color:var(--muted);line-height:1.6;}
.today-band{margin:0 2px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);
overflow:hidden;box-shadow:var(--shadow);}
.today-band-h{display:flex;align-items:center;gap:9px;padding:10px 13px;border-bottom:1px solid var(--line);}
.today-band-t{font-size:13px;font-weight:700;color:var(--ink);}
.today-band-b{padding:6px;max-height:420px;overflow-y:auto;scrollbar-width:thin;}
.today-band-b::-webkit-scrollbar{width:8px;}
.today-band-b::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px;}
/* .today-cols is unused as of v12.66.0 — People to Contact and My Signals became tabs rather
than two side-by-side bands. Kept because it costs nothing and the two-column band layout may
return elsewhere; delete it freely if it is still unreferenced later. */
.today-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px;}
@media (max-width:1000px){ .today-cols{grid-template-columns:1fr;} }
/* v12.66.0 — Today's three tabs (Do Now · People to Contact · My Signals) and the Do Now sort
bar. The tab strip deliberately reuses the band's own frame so the tabbed section reads as
one panel below the Projop scroller rather than as a third kind of container. */
.today-tabwrap{border:1px solid var(--line);border-radius:10px;background:var(--card);margin-top:10px;overflow:hidden;}
.today-tabstrip{display:flex;gap:2px;padding:6px 6px 0;border-bottom:1px solid var(--line);flex-wrap:wrap;background:var(--bg);}
.today-tab{
border:1px solid transparent;border-bottom:none;background:transparent;color:var(--muted);
font-size:12.5px;font-weight:600;cursor:pointer;padding:7px 12px;border-radius:8px 8px 0 0;
display:inline-flex;align-items:center;gap:6px;
}
/* v12.76.0 — Costas: "when i am in an active tab or hover over another they should become white
for better UI". The strip is the grey ground, the tab you are on and the tab under the cursor
are white. The active tab keeps its -1px bottom overlap so it merges into the pane below. */
.today-tab:hover{color:var(--ink);background:var(--card);border-color:var(--line);border-bottom-color:transparent;}
.today-tab.on{background:var(--card);border-color:var(--line);color:var(--ink);margin-bottom:-1px;border-bottom:1px solid var(--card);}
.today-pane .today-band-b{max-height:520px;}
.today-sortbar{
display:flex;align-items:center;gap:8px;padding:2px 4px 8px;
border-bottom:1px solid var(--line);margin-bottom:6px;
}
.today-sort-n{font-size:12px;color:var(--muted);margin-right:auto;}
.today-sort-l{font-size:11.5px;color:var(--muted);}
.today-sort{font-size:12px;padding:3px 6px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--ink);}
/* Importance as ACTION_PRIORITY's own symbol, not a fourth coloured pill — a flat list of many
actions has to stay scannable. */
.today-prio{flex:none;font-weight:800;font-size:12px;letter-spacing:-0.5px;width:22px;text-align:center;}
/* The verb button. This is the visible difference from Home's read-only Actions card, so it has
to look like something you press, not like a chip. */
.today-row{align-items:center;}
.today-do{flex:0 0 auto;align-self:center;border:1px solid var(--line-strong);background:var(--panel);
color:var(--ink);border-radius:8px;padding:5px 11px;font-size:11.5px;font-weight:600;cursor:pointer;
white-space:nowrap;transition:background .13s,border-color .13s,color .13s;}
.today-do:hover{background:var(--accent);border-color:var(--accent);color:#fff;}
.today-row:hover{transform:none;} /* the button is the affordance here, not a row nudge */
/* The two scope sub-groups inside each due bucket — "On my Projops" / "Not on a Projop".
Deliberately quieter than the bucket heading above them: the deadline is the primary
grouping, ownership is the secondary one. */
.today-scope{margin:0 0 2px;}
.today-scope-h{display:flex;align-items:center;gap:6px;padding:3px 9px 2px;font-size:10.5px;
font-weight:600;color:var(--muted);opacity:.85;}
.today-scope-h .home-n{margin-left:auto;}
.today-urg-gap .home-urg-h{color:#7a5cc4;}
/* The honest footnote: open actions that sit on Projops you are not on are counted, not shown —
Today is a personal screen, and hiding them silently would make it under-report. */
.today-elsewhere{padding:8px 10px 4px;font-size:11px;color:var(--muted);line-height:1.6;}
.today-elsewhere a{color:var(--accent);}
/* My ProjOps: the SAME boardCardHtml() card as the Pipeline, Archive and Home strip. The
only Today-specific thing is the footer; the card markup itself is untouched. No age line and
no stale badge — nothing on Today judges a Projop's relevance (see js/reports.js). */
.today-opps-track{align-items:stretch;}
.today-opp .board-card{border-radius:12px;padding:11px 12px;border-color:#e7c96b;box-shadow:var(--shadow);
transition:transform .16s cubic-bezier(.2,.7,.3,1),box-shadow .16s;}
.today-opp:hover .board-card{transform:translateY(-3px);box-shadow:var(--shadow-lg);}
.today-opp-foot{font-weight:600;color:#7a5cc4;}
/* v12.114.0 — My ProjOps is a five-column, two-visible-row grid. More than ten cards stay
directly underneath and are reached with the grid's compact vertical scrollbar. */
.projop-scroller.is-grid{display:block;}
.projop-scroller.is-grid .projop-scroll-arrow{display:none!important;}
.projop-scroller.is-grid .today-opps-track{
display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:186px;
gap:10px 12px;max-height:382px;overflow-x:hidden;overflow-y:auto;padding:3px 8px 3px 2px;
scroll-snap-type:y proximity;scrollbar-width:thin;align-items:stretch;
}
.projop-scroller.is-grid .today-opps-track::-webkit-scrollbar{width:8px;height:0;}
.projop-scroller.is-grid .today-opps-track .projop-scroll-item{
width:100%;min-width:0;max-width:none;height:186px;scroll-snap-align:start;
}
.projop-scroller.is-grid .pjc-compact .pjc-media{height:112px;}
.projop-scroller.is-grid .pjc-compact .pjc-body{padding:7px 9px;gap:0;}
.projop-scroller.is-grid .pjc-compact .pjc-name{font-size:12px;}
.projop-scroller.is-grid .pjc-compact .pjc-ref{font-size:9.5px;padding:1px 5px;}
@media (max-width:980px){
.projop-scroller.is-grid .today-opps-track{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:620px){
.projop-scroller.is-grid .today-opps-track{grid-template-columns:repeat(2,minmax(0,1fr));}
}
/* ===================== HOME REDESIGN (V11 Task 3, v10.7.0) =====================
Pipeline Overview (full width) -> Priority ProjOps strip (unchanged) -> a two-column
Team Execution / Portfolio Health row -> Market Signals (full width, unchanged body).
Appended last, same last-wins-the-cascade convention as every other override pass in this
file. */
/* ---- Pipeline Overview ---- */
.home-card.home-pipeline{min-height:0;margin-bottom:16px;}
.home-pipe-stat{flex:1 1 160px;min-width:150px;border:1px solid var(--line);border-radius:10px;
padding:10px 12px;cursor:pointer;transition:background .13s,border-color .13s;}
.home-pipe-stat:hover{background:#f7f9fb;border-color:var(--pc,var(--accent));}
.home-pipe-v{display:block;font-size:19px;font-weight:700;color:var(--ink);
font-variant-numeric:tabular-nums;letter-spacing:-.3px;}
.home-pipe-l{display:block;margin-top:2px;font-size:11.5px;color:var(--muted);}
.home-pipe-funnel{display:flex;flex-wrap:wrap;gap:8px;padding:10px 13px 13px;cursor:pointer;}
.home-pipe-stage{flex:1 1 100px;min-width:88px;text-align:center;border-radius:9px;padding:8px 6px;
background:color-mix(in srgb,var(--pc,var(--line-strong)) 10%,#fff);
border:1px solid color-mix(in srgb,var(--pc,var(--line-strong)) 30%,#fff);
transition:transform .13s;}
.home-pipe-funnel:hover .home-pipe-stage{transform:translateY(-1px);}
.home-pipe-stage-n{display:block;font-size:16px;font-weight:700;color:var(--pc,var(--ink));
font-variant-numeric:tabular-nums;}
.home-pipe-stage-l{display:block;margin-top:1px;font-size:10.5px;color:var(--muted);
text-transform:uppercase;letter-spacing:.02em;}
/* ---- Team Execution / Portfolio Health two-column row ---- */
.home-row2col{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:stretch;margin-bottom:16px;}
@media (max-width:900px){ .home-row2col{grid-template-columns:1fr;} }
.home-row2col .home-card{min-height:0;}
.home-stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:8px;}
.home-stat-tile{border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;
transition:background .13s,border-color .13s;}
.home-stat-tile:hover{background:#f7f9fb;border-color:var(--pc,var(--accent));}
.home-stat-n{display:block;font-size:20px;font-weight:700;color:var(--ink);
font-variant-numeric:tabular-nums;letter-spacing:-.4px;}
.home-stat-n.zero{color:var(--muted);}
.home-stat-n.danger{color:var(--danger);}
.home-stat-l{display:block;margin-top:2px;font-size:11.5px;color:var(--muted);}
/* Market Signals is now the sole full-width card at the bottom — no grid sibling to stretch
against, so it should not carry the old four-up card's fixed min-height. */
#home-card-market{min-height:0;}
/* ===================== HOME KPI STRIP (V11 Task 3 correction, still v10.7.0) =====================
Five leading-indicator tiles above Pipeline Overview — a fast executive summary. Reuses
.home-stat-tile/.home-stat-n/.home-stat-l verbatim (already generic, not scoped to a
.home-card), so a tile here looks identical to one inside Team Execution/Portfolio Health.
Appended last, same last-wins-the-cascade convention as every other override pass here. */
/* v12.67.0 — THREE pills, not six (Actions Due / No Next Action / Decision-Maker Gaps removed),
so the grid is three columns rather than six. */
.home-kpi-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:12px 13px 4px;margin:0;}
@media (max-width:640px){ .home-kpi-strip{grid-template-columns:repeat(2,minmax(0,1fr));} }
/* The "narrower strip" Costas asked for. Pipeline Overview moved BELOW the Projop scroller in
v12.67.0, so it is supporting context rather than the lead: same information, less vertical
weight, smaller numerals. Nothing is hidden — only the scale changes. */
.home-pipeline-slim .home-kpi-strip{padding:8px 10px 2px;gap:6px;}
.home-pipeline-slim .home-pipe-stat{padding:7px 10px;}
.home-pipeline-slim .home-pipe-v{font-size:16px;}
.home-pipeline-slim .home-pipe-l{font-size:11px;}
.home-pipeline-slim .home-stat-n{font-size:18px;}
.home-pipeline-slim .home-pipe-funnel{padding-top:4px;}
.home-kpi-tile{background:var(--panel);box-shadow:none;min-width:0;}
.home-pipeline-summary .home-pipe-stat{min-width:0;background:var(--panel);}
.home-budget-kpi{border-color:color-mix(in srgb,var(--accent) 35%,var(--line));}
.home-budget-kpi .home-pipe-l{font-weight:600;color:var(--accent);}
/* ===================== PROJOP WORKSPACE/EDIT-FORM MERGE (v12.0.0) =====================
Every Overview/Info field is now inline-editable rather than living in a separate Edit modal
— .pj-field wraps a plain label + input/select/textarea (.pj-field-input, styled by the
existing #side-body .pj-tab-panel input/select/textarea rules above, unchanged); .pj-field-grid
lays a group's fields out two-up, .pj-field-wide spans both columns for a long text field
(Name, Brief, Description, Executive summary, etc). Appended last, same last-wins-the-cascade
convention as every other override pass in this file. */
.pj-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;padding:2px 0 6px;}
@media (max-width:520px){ .pj-field-grid{grid-template-columns:1fr;} }
.pj-field{display:flex;flex-direction:column;gap:3px;min-width:0;}
.pj-field-wide{grid-column:1 / -1;}
.pj-field label{font-size:10.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);}
.pj-field-input.pj-field-saving{opacity:.6;}
.pj-field-value{min-height:28px;padding:5px 0;color:var(--ink);line-height:1.45;white-space:normal;overflow-wrap:anywhere;}
.pj-field-empty{color:var(--muted);}
.pj-preview-mode .pj-field-grid{padding-bottom:7px;}
.pj-preview-mode .pj-field{gap:1px;}
.pj-preview-mode .pj-inline-field-sec{margin-bottom:5px;}
.pj-preview-mode .pj-field.pj-field-inline label{padding-top:6px;}
/* v12.0.6 — Name/Location/Brief are single-field rows: one label on the left, control on the
right. They deliberately have no duplicate .pjb-sec-t heading. */
.pj-inline-field-sec{margin:0 0 8px;}
.pj-field.pj-field-inline{display:grid;grid-template-columns:132px minmax(0,1fr);gap:12px;align-items:start;}
.pj-field.pj-field-inline label{padding-top:8px;}
.pj-field.pj-field-inline .pj-field-input{width:100%;min-width:0;}
@media (max-width:520px){
.pj-field.pj-field-inline{grid-template-columns:78px minmax(0,1fr);gap:8px;}
}
/* ---- v12.3.0 — ONE layout rule for every field on the Projop workspace ------------------
Costas: "use as much as you can the rule label on the left, info/field on the right", and
remove the section headings that repeated a field's own label. Every field on Overview and
Info is now a .pj-inline-field-sec, so these rules cover the whole surface rather than the
three rows v12.0.6 introduced them for. A hairline under each row is what makes a stack of
label/value pairs readable without the headings that used to separate them. */
.pj-tab-panel .pj-inline-field-sec{border-bottom:1px solid var(--line);padding-bottom:6px;}
.pj-tab-panel .pj-inline-field-sec:last-child{border-bottom:0;}
.pj-tab-panel .pj-field.pj-field-inline label{
font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);}
/* The mode tint. Preview = pale grey (read), Edit = pale yellow (Costas: "to alert the editor").
Applied to ALL FIVE panels via showProjopDetails()'s modeCls, not only the two with fields. */
#side-body .pj-tab-panel.pj-preview-mode,
#side-body .pj-tab-panel.pj-edit-mode{
border:1px solid var(--line);border-radius:10px;padding:12px 14px;}
#side-body .pj-tab-panel.pj-preview-mode{background:#f4f6f9;}
#side-body .pj-tab-panel.pj-edit-mode{background:#fdf7dd;border-color:#e6d9a2;}
#side-body .pj-tab-panel.pj-edit-mode .pj-inline-field-sec{border-bottom-color:#e6d9a2;}
#side-body .pj-tab-panel.pj-edit-mode .pj-field-input{background:#fff;}
/* Profile-only controls that are richer than one input (organization picker, photo/logo and
Archived) obey the same label-left/control-right grid as every .pj-inline-field-sec row. */
#side-body .pj-tab-panel.pj-edit-mode > .field{display:grid;grid-template-columns:132px minmax(0,1fr);
gap:4px 12px;align-items:start;margin:0 0 8px;padding:0 0 6px;border-bottom:1px solid #e6d9a2;}
#side-body .pj-tab-panel.pj-edit-mode > .field > label:first-child{margin:0;padding-top:8px;
color:var(--muted);font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;}
#side-body .pj-tab-panel.pj-edit-mode > .field > :not(label:first-child){grid-column:2;min-width:0;}
#side-body .pj-tab-panel .of-archive-check{display:flex;align-items:center;justify-self:start;gap:8px;
margin:0;padding:7px 10px;border:1px solid var(--line-strong);border-radius:7px;background:#fff;
color:var(--ink);cursor:pointer;}
#side-body .pj-tab-panel .of-archive-check input{width:15px;height:15px;min-height:0;margin:0;accent-color:var(--accent);}
#side-body .pj-tab-panel .of-archive-check span{display:flex;align-items:baseline;gap:8px;}
#side-body .pj-tab-panel .of-archive-check b{font-size:12px;}
#side-body .pj-tab-panel .of-archive-check small{color:var(--muted);font-size:10.5px;font-weight:400;}
@media(max-width:520px){
#side-body .pj-tab-panel.pj-edit-mode > .field{grid-template-columns:78px minmax(0,1fr);gap:4px 8px;}
}
/* Base success button; semantic action colours below keep verbs consistent. */
.btn-success{background:var(--ok);border-color:var(--ok);color:#fff;}
.btn-success:hover{background:#13803f;border-color:#13803f;color:#fff;}
.btn-saved-pale{background:#e5e7eb;border-color:#aeb6c0;color:#4b5563;}
/* v12.106.0 — verbs have one colour everywhere. These semantic classes are applied to buttons
from their visible label by syncActionButtonStyles(), including buttons created after load. */
button.action-save{background:#189a55!important;border-color:#137c45!important;color:#fff!important;}
button.action-save:hover{background:#137c45!important;border-color:#0f6738!important;color:#fff!important;}
button.action-edit{background:#e58a1f!important;border-color:#bd6d12!important;color:#fff!important;}
button.action-edit:hover{background:#cb7517!important;border-color:#a85d0d!important;color:#fff!important;}
button.action-delete{background:#d23b3b!important;border-color:#ae2929!important;color:#fff!important;}
button.action-delete:hover{background:#b83232!important;border-color:#962525!important;color:#fff!important;}
button.btn-danger{background:#d23b3b!important;border-color:#ae2929!important;color:#fff!important;}
button.btn-danger:hover{background:#b83232!important;border-color:#962525!important;color:#fff!important;}
button.action-add{background:#3a63b8!important;border-color:#28417a!important;color:#fff!important;}
button.action-add:hover{background:#315499!important;border-color:#1f3562!important;color:#fff!important;}
button.action-done{background:#e5e7eb!important;border-color:#aeb6c0!important;color:#4b5563!important;cursor:default;}
/* Flags row — Hot/Mine/Archived as inline toggle chips, replacing the old pj-pin/pj-mine action
buttons and the Edit form's Archived checkbox. Plain chip look, same family as .pjf-fs/.badge. */
.pj-flags-row{display:flex;flex-wrap:wrap;gap:6px;padding:2px 0 6px;}
.pj-flag-chip{font-size:12px;padding:4px 11px;border-radius:9px;border:1px solid var(--line);
background:var(--bg);color:var(--muted);cursor:pointer;font-weight:600;}
.pj-flag-chip:hover{border-color:var(--accent);color:var(--accent);}
.pj-flag-chip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);}
/* v12.0.2 — Flags moved OUT of Overview's body and into the action-button row itself, right-
aligned, per Costas: "move it on the right side of the row with the action buttons." The
buttons keep their own left-aligned group so wrapping (narrow sidebar) puts flags on their own
line rather than interleaving with Report/Map/Research/Delete. */
.pj-actions-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;}
.pj-actions-btns{display:flex;gap:8px;flex-wrap:wrap;}
.pj-flags-inline{display:flex;flex:none;}
.pj-flags-inline .pj-flags-row{padding:0;}
/* v12.0.2 — Sector badge, same family as .side-ref-badge, sitting top-right next to Stage. Both
Ref and Sector are click-to-edit here now (wireHeaderBadgeEdit(), js/ui.js) — the separate
Overview body fields were removed as a duplicate. An empty one shows a muted "+ Ref"/
"+ Sector" placeholder rather than hiding, since this is the only way to set either value. */
.side-sector-badge{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:22px;
padding:0 8px;border-radius:6px;background:var(--accent-soft);color:var(--accent);
font-size:11.5px;font-weight:700;letter-spacing:.02em;flex:none;margin-right:6px;cursor:pointer;}
.side-ref-badge{cursor:pointer;}
.side-ref-badge.empty,.side-sector-badge.empty{background:transparent;border:1px dashed var(--line);color:var(--muted);font-weight:600;}
.side-ref-badge:hover,.side-sector-badge:hover{border-color:var(--accent);}
.side-badge-input{width:84px;height:20px;font-size:11.5px;font-weight:600;padding:0 4px;
border-radius:5px;border:1px solid var(--accent);background:var(--bg);color:var(--fg);}
/* ==========================================================================
v12.3.1 — the Projop/record popup is a fixed rectangle and scrolls inside.
The title bar (.side-head) is outside #side-body and so is already fixed; the
action buttons and the tab strip are INSIDE it (setSide() writes them as part
of the body), so they are pinned with position:sticky rather than by moving
them out into the head — moving them would mean every non-Projop caller of
setSide() (org, contact, link, path finder) suddenly had to populate a shared
header region it knows nothing about. They sit on the panel's own ground
colour so scrolled content passes cleanly underneath.
========================================================================== */
.pj-popup-panel #side-body .pj-sticky-head{
position:sticky;top:0;z-index:5;background:var(--side-bg);
margin:-8px -10px 0;padding:8px 10px 0;border-bottom:1px solid var(--line);
box-shadow:0 5px 8px rgba(30,45,65,.08);}
.pj-popup-panel #side-body .pj-sticky-head .pj-actions-row{margin-bottom:10px;}
.pj-popup-panel #side-body .pj-tab-panel{padding-top:10px;}
/* ==========================================================================
v12.4.0 — the Players tab, grouped by SIDE and condensed.
Six groups in Costas' order (Key players first, then the five PLAYER_SIDES),
companies as accordion heads with their people nested one line each:
photo · LAST first · title, controls hard right. Appended last so it wins
over the earlier .stake-row sizing.
========================================================================== */
.stake-side{margin:0 0 14px;}
.stake-side:last-child{margin-bottom:0;}
.stake-side-t{
font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
color:var(--pc,var(--muted));padding:0 0 4px;margin:0 0 6px;
border-bottom:2px solid var(--pc,var(--line));}
.stake-side-empty{margin:2px 0 6px;}
.stake-grp-empty{margin:2px 0 4px 6px;font-size:12px;}
.stake-side .stake-grp{margin-bottom:4px;}
/* One line per person: the name/title block takes the slack, controls stay hard right. */
.stake-row.stake-pn{padding:3px 8px;gap:7px;}
.stake-row.stake-co{padding:4px 8px;}
.stake-person{display:flex;align-items:baseline;gap:7px;flex:1;min-width:0;}
.stake-person .stake-name{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.stake-person .stake-name b{font-weight:700;}
.stake-title{
flex:1 1 auto;min-width:0;font-size:11.5px;color:var(--muted);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.stake-count{
flex:none;font-size:11px;font-weight:700;color:var(--muted);
background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:1px 7px;}
.stake-count-key{color:var(--accent);}
/* v12.4.1 — the ⓘ on a person row: quiet until the person actually has notes on this Projop. */
.stake-info{
flex:none;border:1px solid transparent;background:none;cursor:pointer;
font-size:13px;line-height:1;color:var(--muted);padding:2px 5px;border-radius:7px;
display:inline-flex;align-items:center;gap:3px;}
.stake-info:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft);}
.stake-info.has{color:var(--accent);}
.stake-info-n{font-size:10px;font-weight:700;}
/* ==========================================================================
v12.5.0 — the Log tab: composer on top in its own frame, the stream below,
and one line per entry (date · who · note · edit/delete).
========================================================================== */
.log-composer{
background:var(--panel);border:1px solid var(--line-strong);border-radius:10px;
padding:10px 12px;margin:0 0 4px;}
.log-composer .nc-add{margin:0;}
.log-stream{border-top:2px solid var(--line-strong);padding-top:10px;margin-top:12px;}
.log-head,.log-row{
display:grid;grid-template-columns:74px 132px minmax(0,1fr) 54px;
gap:10px;align-items:start;}
.log-head{
font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
color:var(--muted);padding:0 8px 5px;border-bottom:1px solid var(--line);}
.log-row{
padding:7px 8px;border-bottom:1px solid var(--line);background:none;border-radius:0;
margin:0;}
.log-row .log-when,.log-row .log-who,.log-row .log-body,.log-row .log-acts{align-self:start;margin-top:0;padding-top:0;}
.log-row .log-body{font-size:13px;font-weight:400;line-height:1.4;color:#5686ad;}
.log-row .log-who,.log-row .who-cell{align-items:flex-start;}
.log-row:last-child{border-bottom:0;}
.log-row:hover{background:var(--accent-soft);}
.log-when{font-size:11.5px;color:var(--muted);white-space:nowrap;padding-top:2px;}
.log-who{min-width:0;overflow:hidden;}
.log-body{min-width:0;overflow-wrap:anywhere;}
/* v12.128.0 — the entry's own title, back in the listing. Heavier than the body so a scan down
the column reads as headlines, and the only thing on the row when nothing else was typed. */
.log-title{font-weight:700;color:var(--ink);margin:0 0 2px;}
/* An attached file: one chip, the icon says what it is, the click opens it. Deliberately a
button and not a link — the address is signed at click time and would be stale in an href. */
.note-attach{display:inline-flex;align-items:center;gap:6px;max-width:100%;margin:5px 0 0;
padding:3px 10px 3px 7px;border:1px solid var(--line-strong);border-radius:999px;
background:var(--panel);color:var(--ink);font:inherit;font-size:11.5px;cursor:pointer;
text-align:left;transition:background .14s,border-color .14s;}
.note-attach:hover{background:#eef3fb;border-color:var(--accent);}
.note-attach-ico{font-size:13px;line-height:1;flex:0 0 auto;}
.note-attach-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;}
.note-attach-size{color:var(--muted);flex:0 0 auto;}
.note-attach-static{cursor:default;}
.note-attach-static:hover{background:var(--panel);border-color:var(--line-strong);}
/* The paperclip in the composer, and the chip that confirms what you picked before you press Add. */
.nc-attach{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:8px;
border:1px solid var(--line-strong);background:var(--panel);cursor:pointer;font-size:13px;
align-self:flex-start;}
.nc-attach:hover{border-color:var(--accent);}
.nc-attach-sm{font-size:12px;padding:2px 7px;}
.nc-attach-chosen{display:flex;align-items:center;gap:6px;margin:6px 0 0;font-size:11.5px;color:var(--ink);}
.nc-attach-x{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:14px;line-height:1;padding:0 2px;}
.nc-attach-x:hover{color:var(--danger);}
.nc-e-attach{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 0;font-size:11.5px;}
.nc-e-attach-rm-l{display:inline-flex;align-items:center;gap:4px;color:var(--muted);cursor:pointer;}
.log-acts{display:flex;gap:2px;justify-content:flex-end;align-items:flex-start;}
/* An entry being edited in place drops the grid — the inline form needs the full width. */
.log-row.nc-editing{display:block;}
@media (max-width:560px){
.log-head{display:none;}
.log-row{grid-template-columns:1fr auto;grid-template-areas:"when acts" "who who" "body body";}
.log-when{grid-area:when;} .log-who{grid-area:who;} .log-body{grid-area:body;} .log-acts{grid-area:acts;}
}
/* Shared "who" cell — the Log tab now, the Actions list from v12.6.0. */
.who-cell{display:inline-flex;align-items:center;gap:5px;min-width:0;font-size:12px;}
.who-cell .who-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.who-none{color:var(--muted);}
.who-av{width:20px;height:20px;border-radius:50%;object-fit:cover;flex:none;}
.who-av.ini{
display:inline-flex;align-items:center;justify-content:center;background:var(--line-strong);
color:var(--ink);font-size:9px;font-weight:700;}
/* Manage Team */
.team-row{
display:flex;align-items:center;gap:10px;padding:6px 8px;border:1px solid var(--line);
border-radius:8px;margin-bottom:6px;}
.team-row .who-cell{flex:1;min-width:0;}
.team-title{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* ==========================================================================
v12.6.0 — the Actions tab: add form on top, then one group per responsible.
Row: assignee photo · assigner photo · date · importance · task · edit/delete
· status hard right (Costas' own left-to-right order).
========================================================================== */
.act-composer{
display:grid;grid-template-columns:minmax(0,1fr) 118px 118px 92px 130px auto auto;
gap:6px;align-items:center;
background:var(--panel);border:1px solid var(--line-strong);border-radius:10px;
padding:10px 12px;margin:0 0 4px;}
.act-composer input,.act-composer select{min-width:0;}
.act-composer .ac-new-sum{font-weight:600;}
@media (max-width:640px){ .act-composer{grid-template-columns:1fr 1fr;} .act-composer .ac-new-sum{grid-column:1 / -1;} }
.act-stream{border-top:2px solid var(--line-strong);padding-top:10px;margin-top:12px;}
.act-grp{margin:0 0 12px;}
.act-grp-t{
display:flex;align-items:center;gap:8px;padding:0 0 4px;margin:0 0 5px;
border-bottom:1px solid var(--line);font-size:12px;font-weight:700;}
.act-grp-t .act-grp-n{
margin:0;font-size:10px;font-weight:700;color:var(--muted);
background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:1px 6px;}
/* v12.91.0 — Costas' column order: created · date · what needs doing · responsible · notify ·
buttons · progress. He also asked to "remove border from actions and just use alternating color
backgrounds to have a more condensed ui", so the row separator is gone and the banding does the
work — which is also why the header row has to be excluded from the striping (:nth-of-type
would otherwise count it and flip every band). */
/* v12.91.2 — Costas' revised order: FROM (creator) · date · TO (responsible) · what needs doing ·
notify · buttons · progress. The two faces sit together at the left so a row reads "from X, on
this date, to Y"; the header labels collided before because RESPONSIBLE and NOTIFY were being
asked to fit inside 26px avatar columns. */
/* v12.91.3 — EVERY track is a fixed width except the task. This is the fix for the header sitting
over the wrong columns: each .action-row is its OWN grid container, so any `auto` or
content-sized track resolves per row — the header's widths came from its words, the rows' from
their avatars, and the two never lined up. Fixed tracks make every row compute identically.
The first column is wide enough for the word "From" rather than clipping it to "FR…". */
.action-row{
display:grid;grid-template-columns:44px 78px 30px minmax(0,1fr) 104px 78px 112px;
gap:8px;align-items:center;padding:4px 8px;border-bottom:0;
background:none;border-radius:0;margin:0;}
.act-stream .action-row:not(.act-head-row):nth-of-type(even){background:var(--bg);}
.action-row:hover{background:var(--accent-soft);}
/* the header: same grid, so every label sits over its own column */
.act-head-row{position:sticky;top:0;z-index:2;background:var(--card);
font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);
border-bottom:1px solid var(--line-strong);padding-top:6px;padding-bottom:6px;}
.act-head-row:hover{background:var(--card);}
/* a label must never spill into the next column — that overlap is what made the header unreadable */
.act-head-row > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* v12.91.2 — importance is a coloured dot, not punctuation: red urgent, orange medium, blue low.
The label stays in title/aria-label, so nothing is lost to anyone who cannot see the colour. */
.ar-prio{display:inline-block;width:8px;height:8px;border-radius:50%;flex:0 0 auto;
background:var(--pc);margin-right:6px;vertical-align:middle;cursor:pointer;}
/* the task line: smaller and quieter, so the row reads as one line rather than a headline */
/* v12.91.6 — two lines: the action's name, then its optional details underneath. Both clamp to a
single line so the condensed row height Costas asked for in v12.91.2 survives; the full text is
in the row's title attribute and in the Preview. */
.ar-task{display:flex;flex-direction:column;gap:1px;min-width:0;cursor:pointer;}
.ar-task-t{font-size:12.5px;line-height:1.35;color:var(--ink);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ar-task-d{font-size:11px;line-height:1.3;color:var(--muted);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ar-task:hover .ar-task-t{text-decoration:underline;}
/* the composer's second line: one full-width optional box under the toolbar */
.act-composer-2{margin-top:-4px;}
.act-composer-2 .ac-new-desc{flex:1;width:100%;}
/* the avatars sit hard left under their label, not centred in the track */
.ar-notify{display:flex;align-items:center;justify-content:flex-start;gap:2px;overflow:hidden;}
.ar-notify .who-av{margin:0;}
.ar-notify-more{font-size:10.5px;color:var(--muted);margin-left:2px;}
/* v12.98.0 - the Edit action modal's Notify list. One chip per recipient with its own remove
cross, plus an Add button opening the same player picker the Actions composer uses. */
.a-notify{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.a-notify-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.a-notify-none{color:var(--muted);font-size:13px;}
.a-notify-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 6px 3px 3px;
border:1px solid var(--line);border-radius:999px;background:var(--card);}
.a-notify-chip .who-av{margin:0;}
.a-notify-nm{font-size:12.5px;color:var(--ink);max-width:160px;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap;}
.a-notify-x{border:0;background:none;color:var(--muted);cursor:pointer;font-size:16px;
line-height:1;padding:0 2px;min-height:0;width:auto;}
.a-notify-x:hover{color:var(--danger);}
.notify-cand-list{display:flex;flex-direction:column;gap:7px;max-height:460px;overflow-y:auto;padding-right:3px;}
.notify-cand-group{display:flex;flex-direction:column;gap:1px;}
.notify-cand-company{position:sticky;top:0;z-index:1;padding:4px 7px 3px;border-bottom:1px solid var(--accent);
background:var(--panel);color:var(--field-ink);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;}
.notify-cand-person{display:flex;align-items:center;gap:8px;margin:0;padding:4px 7px;border:0;border-radius:5px;background:transparent;min-height:34px;}
.notify-cand-person:hover{background:var(--accent-soft);}
.notify-cand-person input{flex:0 0 auto;margin:0;}
.notify-cand-person .who-av{width:25px;height:25px;min-width:25px;margin:0;font-size:9px;}
.notify-cand-person b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;font-weight:600;color:var(--ink);}
/* v12.117.0 — compact action preview: two-column facts, full-width narrative/Notify rows and
editable recipient chips. This is the eye/notes window, not the full action form. */
.act-preview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;}
.act-preview-grid .detail-kv{margin:0;padding:0;border:0;min-width:0;}
.act-preview-grid .detail-kv.wide{grid-column:1/-1;}
.act-preview-grid .detail-kv .k{margin:0 0 2px;font-size:9.5px;font-weight:800;letter-spacing:.055em;color:#718096;}
.act-preview-grid .detail-kv .v{font-size:13.5px;line-height:1.38;color:#24364b;}
.act-preview-grid .detail-kv.wide .v{line-height:1.45;}
.act-preview-grid .detail-kv:has(.act-preview-notify-chips) .v{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.act-preview-notify-chips{gap:4px;}
.act-preview-notify-chips .a-notify-chip{padding:2px 5px 2px 2px;background:#f5f8fc;}
.act-preview-notify-add{margin-left:2px;}
.act-preview ~ .nc-add{margin-top:7px;}
@media (max-width:560px){.act-preview-grid{grid-template-columns:1fr;}.act-preview-grid .detail-kv.wide{grid-column:auto;}}
.ar-acts{display:flex;align-items:center;justify-content:flex-start;gap:2px;}
.ar-view{background:none;border:0;cursor:pointer;font-size:13px;line-height:1;padding:2px 4px;opacity:.75;}
.ar-view:hover{opacity:1;}
/* the per-responsible tab strip */
.act-tabs{display:flex;flex-wrap:wrap;gap:2px;margin:8px 0 4px;border-bottom:1px solid var(--line-strong);}
.act-tab{background:none;border:0;border-bottom:2px solid transparent;padding:6px 10px;cursor:pointer;
font-size:12.5px;font-weight:600;color:var(--muted);display:inline-flex;align-items:center;gap:6px;}
.act-tab.on{color:var(--ink);border-bottom-color:var(--accent);}
.act-tab-n{font-size:10.5px;font-weight:700;color:var(--muted);background:var(--bg);
border-radius:20px;padding:1px 6px;}
.act-orphans{margin-top:10px;padding-top:6px;border-top:1px dashed var(--line);}
.ar-when{font-size:11.5px;color:var(--muted);white-space:nowrap;}
.ar-prio{
font-weight:800;font-size:12px;color:var(--pc,var(--muted));text-align:center;
cursor:pointer;letter-spacing:-1px;}
.ar-prio:hover{filter:brightness(.8);}
.ar-task{min-width:0;overflow-wrap:anywhere;cursor:pointer;}
.ar-task:hover{text-decoration:underline;}
.ar-due{font-size:11px;color:var(--muted);margin-left:6px;white-space:nowrap;}
.ar-due.overdue{color:var(--danger);font-weight:700;}
.ar-notes{font-size:11px;color:var(--muted);margin-left:6px;white-space:nowrap;}
.ar-acts{display:flex;gap:2px;}
.ar-edit{
border:1px solid transparent;background:none;cursor:pointer;color:var(--muted);
font-size:12px;padding:2px 5px;border-radius:6px;}
.ar-edit:hover{color:var(--accent);border-color:var(--accent);}
.ar-status{font-size:11.5px;}
.who-av.ini.none{background:var(--bg);color:var(--muted);border:1px dashed var(--line-strong);}
@media (max-width:640px){
.action-row{grid-template-columns:24px 24px minmax(0,1fr) auto;
grid-template-areas:"who by task task" "when prio acts status";}
.ar-who{grid-area:who;} .ar-by{grid-area:by;} .ar-task{grid-area:task;}
.ar-when{grid-area:when;} .ar-prio{grid-area:prio;} .ar-acts{grid-area:acts;} .ar-status{grid-area:status;}
}
/* v12.8.0 — Market Signals has two tabs: the shortlist (Mine & Hot) and everything else. */
.home-mkt-tabs{display:flex;gap:4px;margin:0 0 10px;border-bottom:1px solid var(--line);}
.home-mkt-tab{
border:1px solid transparent;border-bottom:none;background:none;cursor:pointer;
font-size:12px;font-weight:600;color:var(--muted);padding:6px 12px;border-radius:8px 8px 0 0;
display:inline-flex;align-items:center;gap:6px;margin-bottom:-1px;}
.home-mkt-tab:hover{color:var(--ink);background:var(--accent-soft);}
.home-mkt-tab.active{background:var(--panel);border-color:var(--line);color:var(--ink);}
.home-mkt-n{
font-size:10px;font-weight:700;background:var(--bg);border:1px solid var(--line);
border-radius:8px;padding:0 6px;}
.home-mkt-tab.active .home-mkt-n{background:var(--accent-soft);border-color:var(--accent-soft);color:var(--accent);}
.home-mkt{cursor:pointer;display:flex;align-items:flex-start;gap:8px;border-radius:8px;}
.home-mkt-media{flex:0 0 112px;width:112px;height:104px;min-height:0;max-height:104px;align-self:flex-start;margin:-8px 0 -8px -9px;border-radius:8px 0 0 8px;overflow:hidden;background:#dfe8f2;display:flex;align-items:center;justify-content:center;}
.home-mkt-thumb{display:block;width:100%;height:104px;min-height:0;max-height:104px;object-fit:cover;object-position:center top;}
.home-mkt-media-fallback{font-size:28px;font-weight:700;color:#6f87a4;}
/* v12.76.0 — "Check links & pictures" is a .ai-pill now; see the end of this file. */
.home-mkt:hover{background:#f5f8fc;}
.home-mkt.fresh{background:#e9f7ef;}
.home-mkt.fresh:hover{background:#e1f3e8;}
.home-mkt.noteworthy{background:#f2e8f5;}
.home-mkt.noteworthy:hover{background:#ecdff0;}
.home-mkt-link{color:var(--ink);text-decoration:none;}
.home-mkt-link:hover{color:var(--accent);text-decoration:underline;}
.home-mkt-edit{flex:0 0 auto;border:1px solid var(--line-strong);border-radius:999px;background:#fff;color:var(--accent);cursor:pointer;padding:3px 9px;font:500 10.5px/1.2 inherit;}
.home-mkt-edit:hover{border-color:var(--accent);background:var(--accent-soft);}
.home-mkt-star{flex:0 0 auto;border:0;background:transparent;color:#bcc4cc;cursor:pointer;padding:3px 7px;font-size:22px;line-height:1;transition:transform .14s,color .14s;}
.home-mkt-star:hover{transform:scale(1.15);color:#d5a100;}
.home-mkt-star.on{color:#d5a100;}
.home-mkt-star:disabled{opacity:.5;cursor:wait;}
@media(max-width:640px){.home-mkt-media{flex-basis:82px;}}
/* v12.9.0 — two label-left fields per row on Overview, and full-width stacked long text on Info. */
.pj-field-pair{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;}
.pj-field-pair > .pj-inline-field-sec{margin-bottom:0;}
.pj-field-pair .pj-field.pj-field-inline{grid-template-columns:106px minmax(0,1fr);gap:8px;}
@media (max-width:600px){ .pj-field-pair{grid-template-columns:1fr;} }
.pj-field-trio{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 12px;}
.pj-field-trio > .pj-inline-field-sec{margin-bottom:0;}
.pj-field-trio .pj-field.pj-field-inline,.pj-field-trio .pj-kv{grid-template-columns:minmax(58px,auto) minmax(0,1fr);gap:6px;}
/* v12.112.2 — the contact's top row is not three equal text fields: Warmth needs room for seven
pills. Give it half the row and keep every label/value pair on one shared centreline. */
/* v12.127.0 — four cells now: Contact level, Status, Key contact, Warmth. Key contact takes the
narrow slice a checkbox needs and Warmth keeps the room its pills need. */
.contact-profile-topline{grid-template-columns:minmax(190px,24%) minmax(120px,15%) minmax(104px,12%) minmax(340px,49%);align-items:center;}
.pj-field-quad{grid-template-columns:repeat(4,1fr);}
@media (max-width:760px){ .pj-field-quad{grid-template-columns:1fr;} }
.ckey-toggle{display:inline-flex;align-items:center;min-height:22px;cursor:pointer;}
.ckey-toggle input{width:16px;height:16px;margin:0;cursor:pointer;accent-color:var(--accent);}
.ckey-toggle input:disabled{opacity:.5;cursor:progress;}
/* A contact detail you can act on: the same blue the rest of the card uses for a value, but it
behaves like a link, so the underline only appears when you are on it. */
.pj-field-link{color:var(--accent);text-decoration:none;overflow-wrap:anywhere;}
.pj-field-link:hover{text-decoration:underline;}
.contact-profile-topline > .pj-inline-field-sec,.contact-profile-topline > .field{align-self:stretch;display:flex;align-items:center;min-width:0;}
.contact-profile-topline .pj-field.pj-field-inline{width:100%;grid-template-columns:max-content minmax(0,1fr);align-items:center;}
.contact-profile-topline .pj-field-value{white-space:nowrap;}
.contact-profile-topline .pj-kv{display:flex;align-items:center;gap:8px;width:100%;grid-template-columns:none;}
.contact-profile-topline .pj-kv .k{flex:0 0 auto;white-space:nowrap;}
.contact-profile-topline .pj-kv .v{flex:1 1 auto;min-width:0;}
.contact-profile-topline .wslider{width:100%;}
@media (max-width:820px){
.contact-profile-topline{grid-template-columns:1fr;}
.contact-profile-topline > .pj-inline-field-sec,.contact-profile-topline > .field{display:block;}
}
@media (max-width:760px){ .pj-field-trio{grid-template-columns:1fr;} }
.pj-field.pj-field-stacked{display:block;}
.pj-field.pj-field-stacked label{display:block;padding:0 0 4px;}
.pj-field.pj-field-stacked .pj-field-input,
.pj-field.pj-field-stacked .pj-field-value{width:100%;min-width:0;}
/* Costas: "i want the font in the content of description to be smaller". Applies to the value in
preview and to the box in edit, so the two modes read at the same size. */
.pj-field.pj-field-stacked .pj-field-value,
.pj-field.pj-field-stacked textarea.pj-field-input{font-size:12.5px;line-height:1.5;}
/* v12.10.0 — Costas: "clean up and condense the space that each company takes in the list
(forget the borders)". The boxes go; separation now comes from the side headings and the
indent under a company, which is what the eye was using anyway. */
/* v12.119.2 — THE STAKEHOLDER POPUP: LABELS LEFT, FIELDS RIGHT, CONDENSED.
Costas: "make the popup more condensed. one more time labels left-fields right". Same 132px
label column as every profile field since v12.89.3, so this form reads like the rest of the app
instead of stacking a label above every control. Scoped to .stake-form so no other modal moves. */
.stake-form .field{display:grid;grid-template-columns:132px minmax(0,1fr);
gap:2px 12px;align-items:center;margin:0 0 7px;}
.stake-form .field > label:first-child{margin:0;padding:0;font-size:11.5px;font-weight:600;
color:var(--muted);line-height:1.25;}
.stake-form .field > :not(label:first-child){grid-column:2;min-width:0;}
.stake-form .field input,.stake-form .field select{min-height:34px;padding:5px 9px;font-size:13px;}
.stake-form .grid2{display:grid;grid-template-columns:1fr;gap:0;}
.stake-form .sc-field{align-items:start;}
.stake-form .sc-field > label:first-child{padding-top:6px;}
/* The per-contact Active/Key editor. One line per person; the list scrolls rather than growing the
modal, which is what "more condensed" is asking for on a company with twenty staff. */
/* v12.131.0 — with the wider card there is room to show ~8 people before scrolling instead of
~6, which is the difference between reading a company's list and hunting through it. */
.sc-edit{border:1px solid var(--line);border-radius:8px;background:#fff;max-height:300px;overflow:auto;padding:0 6px 6px;}
/* v12.133.0 — this box now holds the SAME grouped list as the company's Contacts tab. Two things
have to be said here and only here: the rows do not navigate inside a modal, and the
.stake-form's own "every input is 34px tall" rule must not inflate the Active/Key boxes.
That second one is the v12.15.1/v12.119.3 trap for the third time — a later, more specific
rule wins over the list's own, so the override has to carry .stake-form's weight. */
.sc-edit .of-contact-row{cursor:default;}
.sc-edit .of-contact-row:hover{background:#e9eff8;}
.sc-edit .of-contact-level-head{padding-top:8px;}
.stake-form .field .of-contact-projop-controls input[type=checkbox]{
width:14px;height:14px;min-height:0;margin:0;padding:0;}
.stake-form .field .of-contact-projop-controls label{font-size:11px;font-weight:600;}
.stake-form .field .of-contact-row .nm{font-size:12px;}
.sc-row{display:grid;grid-template-columns:22px minmax(0,1fr) auto auto;gap:8px;align-items:center;
padding:3px 8px;border-bottom:1px solid var(--line);}
.sc-row:last-child{border-bottom:0;}
.sc-row .who-av{width:20px;height:20px;margin:0;}
.sc-who{min-width:0;display:flex;flex-direction:column;line-height:1.2;}
.sc-who b{font-size:12.5px;font-weight:600;color:var(--ink);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sc-who small{font-size:10.5px;color:var(--muted);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* v12.119.3 — THE TICK LABELS MUST CARRY .field IN THEIR SELECTOR, OR LINE 291 WINS.
`.field label{font-weight:600;font-size:14px;margin-bottom:5px}` is (0,1,1); a bare `.sc-tick`
is (0,1,0) and loses however far below it is written, so "Active" and "Key" rendered at 14px
bold — the third time this exact rule has enlarged a label nested inside a .field (v12.82.0's
Archived label, v12.100.1's checkbox, now this). Name display, font-size, font-weight, colour
AND margin-bottom explicitly: line 291 sets all of them. */
.field label.sc-tick,.sc-tick{display:flex;align-items:center;gap:4px;margin:0 0 0 0;
white-space:nowrap;font-size:11px;font-weight:500;color:var(--muted);cursor:pointer;}
/* v12.100.1 — a checkbox inside a .field inherits the 44px full-width input rule and becomes a
giant empty square. Width, height, min-height AND padding all have to be named — and the
selector needs .stake-form .field weight, since `.stake-form .field input` (0,2,1) beats a
plain `.sc-tick input[type=checkbox]` (0,1,2) and would put 34px back under every row. */
.stake-form .field .sc-tick input[type="checkbox"],
.sc-tick input[type="checkbox"]{width:13px;height:13px;min-height:0;margin:0;padding:0;flex:0 0 auto;}
.sc-tick input[type="checkbox"]:disabled{opacity:.4;cursor:not-allowed;}
/* v12.119.0 — EVERY RULE BELOW CARRIES THE #side-body PREFIX, AND THAT IS THE WHOLE FIX.
Costas: "i had the contacts aligned with nice small fonts". They were written in v12.10.0 as
class-only selectors and therefore LOST to two v8-era ID rules ~950 lines above:
#side-body .stake-row.stake-pn{padding:6px 9px 6px 22px}
#side-body .stake-av{width:24px;height:24px}
An #id selector outranks a class-only one however far below it is written, so the condensed
layout never applied inside the popup, which is where the Players tab actually lives. This is
precisely the trap v12.15.1 recorded — "Any override of the Players list must carry the
#side-body prefix" — and these rules were written in breach of it. */
#side-body .stake-side{margin-bottom:10px;}
#side-body .stake-side .stake-grp{margin-bottom:2px;}
#side-body .stake-side .stake-row,
#side-body .stake-side .stake-row.stake-co,
#side-body .stake-side .stake-row.stake-pn{
border:0;border-radius:6px;margin-bottom:0;}
#side-body .stake-side .stake-row.stake-co{padding:3px 6px;font-size:13px;}
#side-body .stake-side .stake-row.stake-pn{padding:2px 6px 2px 8px;font-size:12.5px;}
#side-body .stake-side .stake-grp-body{margin:0 0 0 12px;padding-left:10px;border-left:1px solid var(--line);}
#side-body .stake-side .stake-grp-empty{margin:1px 0 3px 6px;font-size:11.5px;}
#side-body .stake-side-empty{margin:1px 0 4px;font-size:11.5px;}
#side-body .stake-side .stake-av{width:20px;height:20px;}
#side-body .stake-side .stake-av.sq{width:22px;height:22px;}
.stake-more{
border:0;background:none;cursor:pointer;color:var(--muted);font-size:11px;
padding:2px 6px;margin:1px 0 2px;border-radius:6px;}
.stake-more:hover{color:var(--accent);background:var(--accent-soft);}
/* ===== v12.135.0 — TICKS YOU CAN SEE, AND ROWS THAT LINE UP =====
(a) "i want the checked boxes to be blue instead of grey do that they can be more easily
visible." accent-color does NOT survive `disabled` — every browser greys a disabled box out,
and half the ticks in these lists are disabled on purpose (a Key tick before Active, an
archived person). So the box is drawn here instead of by the browser: same size, blue when
ticked, a paler blue when ticked-and-disabled, and the tick mark stays white in both.
(b) "i told you 100 times to make all the fonts and rows nice small and horizontally
aligned." The labels were inline-wrapping under their boxes on a narrow row. Each is now a
no-wrap flex pair with a fixed column width, so Active and Key line up down the whole list. */
.stake-active,.stake-key,.of-contact-projop-controls label{
display:inline-flex;align-items:center;gap:5px;white-space:nowrap;flex:0 0 auto;
font-size:11px;font-weight:600;line-height:1.1;}
.stake-active,.stake-key{min-width:62px;}
.stake-active>span,.stake-key>span{display:inline-block;}
.stake-chk,.stake-key-chk,
.of-contact-projop-controls input[type=checkbox],
.sc-tick input[type="checkbox"],.adm-key-chk,.ckey-toggle input{
appearance:none;-webkit-appearance:none;
width:14px;height:14px;min-height:0;margin:0;padding:0;flex:0 0 auto;
border:1.5px solid #9fb0c4;border-radius:3.5px;background:#fff;cursor:pointer;
position:relative;transition:background .1s,border-color .1s;}
.stake-chk:checked,.stake-key-chk:checked,
.of-contact-projop-controls input[type=checkbox]:checked,
.sc-tick input[type="checkbox"]:checked,.adm-key-chk:checked,.ckey-toggle input:checked{
background:var(--accent);border-color:var(--accent);}
/* the tick itself, drawn so it is white on blue in every state including disabled */
.stake-chk:checked::after,.stake-key-chk:checked::after,
.of-contact-projop-controls input[type=checkbox]:checked::after,
.sc-tick input[type="checkbox"]:checked::after,.adm-key-chk:checked::after,.ckey-toggle input:checked::after{
content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;
border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg);}
/* Disabled is COMMUNICATED, not hidden: a ticked-but-locked box stays blue, just softer, which
is the whole of Costas' complaint — the grey ones read as unticked at a glance. */
.stake-chk:disabled,.stake-key-chk:disabled,
.of-contact-projop-controls input[type=checkbox]:disabled,
.sc-tick input[type="checkbox"]:disabled,.adm-key-chk:disabled{
cursor:default;border-color:#c6d2e0;background:#fff;opacity:1;filter:none;}
.stake-chk:disabled:checked,.stake-key-chk:disabled:checked,
.of-contact-projop-controls input[type=checkbox]:disabled:checked,
.sc-tick input[type="checkbox"]:disabled:checked,.adm-key-chk:disabled:checked{
background:#8fb4ef;border-color:#8fb4ef;opacity:1;}
/* v12.11.0 — a finding row: publisher mark on the left, and a pale green ground while it is
fresh (filed in the last month), so the last Research run stands out from the back catalogue. */
.doc-row{display:flex;align-items:flex-start;gap:9px;}
.doc-fav{width:20px;height:20px;border-radius:5px;flex:none;margin-top:2px;object-fit:contain;background:var(--bg);}
.doc-fav.ini{
display:inline-flex;align-items:center;justify-content:center;
background:var(--line-strong);color:var(--ink);font-size:10px;font-weight:700;}
.doc-row.fresh{background:#e9f7ef;border-color:#bfe5cd;}
.doc-row.noteworthy{background:#f3eafb;border-color:#c6a5df;box-shadow:inset 4px 0 0 #a875c7;}
.doc-noteworthy{display:flex;align-items:center;justify-content:center;width:34px;height:30px;cursor:pointer;color:#9aa5b1;}
.doc-noteworthy input{position:absolute;opacity:0;pointer-events:none;}
.doc-noteworthy span{font-size:0;line-height:1;}
.doc-noteworthy span::before{content:"☆";font-size:24px;line-height:1;}
.doc-noteworthy input:checked + span{color:#d4a800;filter:drop-shadow(0 1px 1px rgba(104,75,0,.2));}
.doc-noteworthy input:checked + span::before{content:"★";}
#pj-research-docs{margin-top:8px;}
/* v12.12.0 — "Added by" on the composer and on the inline editor, so every column a log entry
SHOWS can also be set when adding and when editing. */
.nc-add-author,.nc-e-author-l{
display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);margin:0 0 6px;}
.nc-add-author select,.nc-e-author select{font-size:12px;min-height:28px;flex:0 1 200px;}
/* v12.12.1 — Costas: "in the preview i want the info to be in dark blue fonts to be distinct
from the dark grey of the labels." Preview only: in Edit the values sit in real input boxes,
which already separates them from their labels. The label colour is untouched. */
.pj-preview-mode .pj-field-value{color:var(--field-ink);font-weight:600;}
.pj-preview-mode .pj-field-value .pj-field-empty,
.pj-preview-mode .pj-field-empty{color:var(--muted);font-weight:400;}
/* v12.121.0 — the bright blue above is right for a value you read at a glance (a date, a
budget, a stage) and punishing for forty lines of researched prose, which is what Executive
summary / Description / Competition / Risks hold once something is pasted into them. Those
four carry .pj-field-prose and read as body text: normal ink, normal weight, room between
paragraphs, and links that look like links. Every other field keeps the blue. */
.pj-preview-mode .pj-field-value.pj-field-prose{color:var(--ink);font-weight:400;}
/* v12.124.0 — "MAke it more report like and more condensed." Was 13px/1.6 with a
between
every line, which is how a pasted answer became a wall of evenly-spaced text with no shape.
mdLiteProse() now emits real blocks and this is their spacing: a tight measure, small gaps
INSIDE a block and larger ones between blocks, so the eye can find the headings. */
.pj-field-prose{max-width:78ch;font-size:12.5px;line-height:1.45;}
.pj-field-prose p{margin:0 0 7px;}
.pj-field-prose p:last-child{margin-bottom:0;}
.pj-field-prose .prose-h{margin:11px 0 5px;font-size:12.5px;font-weight:800;color:var(--ink);
letter-spacing:0;text-transform:none;}
.pj-field-prose .prose-h:first-child{margin-top:0;}
.pj-field-prose .prose-list{margin:0 0 7px;padding-left:15px;}
.pj-field-prose .prose-list li{margin:0 0 3px;padding-left:1px;}
.pj-field-prose b{color:var(--field-ink);}
.pj-field-prose a{color:var(--accent);text-decoration:underline;overflow-wrap:anywhere;}
/* A citation marker is a footnote, so it reads like one: small, grey, raised, out of the way of
the sentence it is attached to. */
.pj-field-prose .md-cite{font-size:9px;font-weight:700;color:var(--muted);vertical-align:super;
line-height:0;margin-left:2px;letter-spacing:.02em;}
/* The Sources block: the site's NAME, one compact line each, the address behind the link. */
.pj-field-prose .prose-src-h{margin:10px 0 4px;font-size:9.5px;font-weight:800;letter-spacing:.07em;
text-transform:uppercase;color:var(--muted);}
.pj-field-prose .prose-src{margin:0;padding:0 0 0 22px;font-size:11.5px;color:var(--muted);}
.pj-field-prose .prose-src li{margin:0 0 2px;}
.pj-field-prose .prose-src li::marker{color:var(--muted);font-weight:700;}
.pj-field-prose .prose-src a{text-decoration:none;font-weight:600;}
.pj-field-prose .prose-src a:hover{text-decoration:underline;}
/* v12.124.0 — THE APP'S OWN SECTION LABELS, told apart from what you pasted under them. Costas:
"find a way to make the default section in the info tab to be more easily visible that the
rest of the copy pasted text. maybe put them in a dark blue pill like ui." Pasted text now
carries its own bold headings, so a small grey uppercase label no longer outranks anything on
that screen — EXECUTIVE SUMMARY and DESCRIPTION were reading as the quietest things on a page
of research. The pill is on the STACKED fields only (the long-text sections); the label-left
rows keep the quiet grey, where nothing competes with them. */
.pj-field.pj-field-stacked>label,.pj-sec-pill{display:inline-block;margin:0 0 6px;padding:3px 11px;
border-radius:999px;background:#14335c;color:#fff;
font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;}
/* v12.130.0 — .pj-sec-pill is the same pill for a section whose body is a LIST rather than a
field (Market Info). One rule, so the two can never drift into two shades of navy. */
.pj-sec-pill{margin-bottom:8px;}
/* v12.12.2 — Costas: "keep one line for each company, reduce the padding. just leave a row no
extra bordered box." A company head is now a single line — logo, caret, name, influence stars,
count, pencil, × — with no frame of its own. The box came from the base .stake-row rule
(border + radius + margin), which every earlier Players layout inherited; these overrides are
deliberately explicit about border, background AND radius so a future base-rule change cannot
quietly bring the box back. */
.stake-side .stake-row,
.stake-side .stake-row.stake-co,
.stake-side .stake-row.stake-pn{
border:0;border-radius:0;box-shadow:none;background:none;margin:0;}
.stake-side .stake-row.stake-co{padding:2px 4px;font-size:13px;}
.stake-side .stake-row.stake-pn{padding:1px 4px;}
.stake-side .stake-row.stake-co:hover,
.stake-side .stake-row.stake-pn:hover{background:var(--accent-soft);border-radius:6px;}
/* One line: the name and the stars sit side by side instead of stacking. */
.stake-side .stake-co .stake-co-content{
flex-direction:row;align-items:center;gap:8px;min-width:0;}
.stake-side .stake-co .stake-name{
display:inline;width:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
flex:0 1 auto;font-size:13.5px;}
.stake-side .stake-co .stake-co-meta{flex:none;}
.stake-side .stake-grp{margin-bottom:0;}
.stake-side .stake-grp-body{margin:0 0 2px 10px;padding-left:9px;}
/* v12.13.0 — the stakeholder role note, surfaced. Amber ground so it reads as a standing note
about the person rather than another timeline entry. */
.role-note{
border:1px solid #e6d9a2;background:#fdf7dd;border-radius:9px;
padding:8px 10px;margin:0 0 12px;}
.role-note-h{
display:flex;align-items:center;gap:7px;
font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
color:var(--muted);margin:0 0 5px;}
.role-note-h .role-note-edit{margin-left:auto;}
.role-note-body{font-size:13px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere;}
.role-note-empty{color:var(--muted);font-style:italic;}
.role-note .nc-edit-form{margin:0;}
.role-note textarea{width:100%;}
/* v12.14.0 — who wrote a note, beside when. Same treatment everywhere a note is listed. */
.nc-who{font-weight:600;color:var(--muted);}
.role-note-by{
font-size:10.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted);
margin-left:2px;}
.role-note .nc-add-author{margin:6px 0 0;}
/* ==========================================================================
v12.15.1 — Costas: "too many horizontal lines, remove the rounded corner box."
The box was NOT the .stake-row rules this file already overrode — it came from the v8-era
`#side-body .stake-grp` / `.stake-grp-h` / `.stake-row.stake-pn` block (~line 1425), whose id
selector outranks every `.stake-side …` rule appended since. These overrides carry the same
#side-body prefix so they actually win. Only the vertical guide under a company survives:
it is what shows the nesting, and it is not one of the lines being complained about.
========================================================================== */
#side-body .stake-side .stake-grp{
border:0;border-radius:0;background:none;margin-bottom:0;overflow:visible;}
#side-body .stake-side .stake-grp-h{
background:none;border-bottom:0;padding:0;}
#side-body .stake-side .stake-row.stake-co{
border:0;border-radius:6px;background:none;padding:3px 6px;}
#side-body .stake-side .stake-row.stake-pn{
border:0;border-bottom:0;border-radius:6px;background:none;padding:2px 6px 2px 8px;}
#side-body .stake-side .stake-independent{background:none;margin-top:0;}
#side-body .stake-side .stake-row.stake-co:hover,
#side-body .stake-side .stake-row.stake-pn:hover{background:var(--accent-soft);}
#side-body .stake-side .stake-grp-body{
margin:0 0 2px 12px;padding-left:10px;border-left:1px solid var(--line);}
/* The logo tile: bigger, and the whole mark inside it rather than cropped by object-fit:cover. */
#side-body .stake-side .stake-av.sq{
width:32px;height:32px;border-radius:7px;object-fit:contain;background:#fff;padding:2px;}
#side-body .stake-side .stake-av.sq.stake-logo-none{
padding:0;color:var(--muted);background:var(--bg);}
.stake-logo-none svg{display:block;}
/* v12.16.0 — a finding row: thumbnail left, headline with its date right after it, and the
publisher underneath only when there is a real one to name. */
.doc-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.doc-head .doc-open{flex:0 1 auto;min-width:0;}
.doc-when{
flex:none;font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap;}
.doc-row .doc-fav{width:34px;height:34px;border-radius:7px;margin-top:1px;}
.doc-row .doc-fav.ini{font-size:14px;color:#fff;letter-spacing:0;border:0;}
/* v12.17.0 — the real thumbnail. Wider than the icon tile it replaces, cropped to a consistent
shape so a column of findings lines up regardless of what each publisher's image is. */
.doc-thumb{
width:64px;height:48px;flex:none;border-radius:7px;object-fit:cover;margin-top:1px;
background:var(--bg);border:1px solid var(--line);}
.doc-row{align-items:flex-start;}
.doc-head{min-width:0;}
.doc-head .doc-open,.doc-head .doc-title{display:block;max-width:100%;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis;font-size:13.5px;font-weight:600;}
.doc-meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.doc-note{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.doc-thumbs-btn{margin-top:8px;}
.doc-tools{display:flex;gap:6px;align-items:center;margin-top:8px;}
.doc-tools .doc-thumbs-btn{margin-top:0;}
@media (max-width:520px){ .doc-thumb{width:52px;height:40px;} }
/* ==========================================================================
v12.19.0 — the Projop card used on Home's Priority strip and on Today.
Picture on top (sector top-left, stage top-right), then ref + title, the
ELECNET budget, the brief, and the key players. Costas' own order.
========================================================================== */
.projop-card{padding:0;overflow:hidden;display:flex;flex-direction:column;}
.pjc-media{position:relative;width:100%;aspect-ratio:16/9;background:var(--bg);flex:none;}
.pjc-img{width:100%;height:100%;object-fit:cover;display:block;}
.pjc-img-none{
display:flex;align-items:center;justify-content:center;
background:var(--pc,#2f6df6);color:#fff;font-size:34px;font-weight:800;letter-spacing:1px;}
.pjc-tl,.pjc-tr{position:absolute;top:7px;max-width:60%;}
.pjc-tl{left:7px;} .pjc-tr{right:7px;}
.pjc-sector{
display:inline-block;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
background:rgba(255,255,255,.92);color:#1b2530;border-radius:8px;padding:2px 8px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}
.pjc-stage{background:rgba(255,255,255,.92);}
.pjc-camera{
position:absolute;right:7px;bottom:7px;border:0;cursor:pointer;font-size:12px;line-height:1;
background:rgba(255,255,255,.9);border-radius:8px;padding:4px 6px;opacity:0;transition:opacity .12s;}
.projop-card:hover .pjc-camera,.pjc-camera:focus{opacity:1;}
.pjc-body{padding:9px 11px 11px;display:flex;flex-direction:column;gap:5px;min-width:0;}
.pjc-head{display:flex;align-items:baseline;gap:7px;min-width:0;}
.pjc-ref{
flex:none;font-size:10.5px;font-weight:800;color:var(--accent);
background:var(--accent-soft);border-radius:8px;padding:1px 7px;}
.pjc-name{
font-size:13.5px;font-weight:800;letter-spacing:-.1px;text-transform:uppercase;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.pjc-budget{font-size:14px;font-weight:800;color:var(--field-ink);}
.pjc-brief{
font-size:12px;color:var(--muted);line-height:1.4;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.pjc-players{display:flex;flex-wrap:wrap;gap:4px;margin-top:1px;}
.pjc-player{
font-size:10.5px;font-weight:600;background:var(--bg);border:1px solid var(--line);
border-radius:8px;padding:1px 7px;color:var(--ink);max-width:100%;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pjc-more{color:var(--muted);}
/* ==========================================================================
v12.19.2 — Costas: "all the pics same height, all the cards same width, the
private and lead pills same size and aligned."
The strip already sets a fixed 252px track item; what broke the look was
`.home-hot .board-card{padding:11px 12px}` (0,2,0) outranking `.projop-card`
(0,1,0), so the picture sat inside padding and the body was padded twice.
These overrides carry the same two-class weight and come later.
========================================================================== */
.home-hot .projop-card,
.today-opp .projop-card{padding:0;width:100%;}
/* One fixed picture height for every card — an aspect-ratio box varies with width,
which is exactly what made the pictures different heights. */
.projop-card .pjc-media{aspect-ratio:auto;height:132px;}
/* Both pills, one row, identical box. */
.pjc-pills{
position:absolute;top:8px;left:8px;right:8px;
display:flex;align-items:center;justify-content:space-between;gap:8px;pointer-events:none;}
.pjc-pill{
flex:0 1 auto;min-width:0;max-width:48%;
height:19px;line-height:19px;padding:0 9px;border-radius:10px;
font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
background:rgba(255,255,255,.94);color:#1b2530;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
box-shadow:0 1px 2px rgba(16,24,40,.18);}
.pjc-pill:empty{display:none;}
.pjc-pill-stage{color:var(--pc,#1b2530);}
.pjc-stage-cluster{display:flex;align-items:center;justify-content:flex-end;gap:3px;min-width:0;}
/* v12.123.0 — the star moved to the LEFT of this row, into the slot the sector pill used to
hold, and the stage pill stays on the right on its own. The slot is always present even when
the card is drawn without a star (the Funnel board), because justify-content:space-between
needs two children to keep the stage pinned right; empty, it takes no width. */
.pjc-hot-slot{display:flex;align-items:center;gap:3px;flex:0 0 auto;}
.pjc-hot-slot .home-unpin{position:static;flex:0 0 auto;width:19px;height:19px;padding:0;border:0;
border-radius:50%;background:rgba(255,255,255,.94);font-size:12px;line-height:19px;text-align:center;
box-shadow:0 1px 2px rgba(16,24,40,.18);color:#b9c3cf;
/* .pjc-pills is pointer-events:none so the pills never swallow a click meant for the card.
The star is the one thing in that row you can actually press, and it had inherited the
none — every click on it fell through and opened the Projop instead of toggling Hot. */
pointer-events:auto;}
.pjc-hot-slot .home-unpin.on{color:#e0a800;}
.pjc-hot-slot .home-unpin:hover{transform:scale(1.18);}
/* Hot, made visible: the pale purple that says why these cards sort to the front of the strip.
Set on the CARD, so it tints the body under the picture and the border agrees with it. */
.projop-card.is-hot{background:#f3effd;border-color:#c4b2ea;}
.projop-card.is-hot .pjc-body{background:transparent;}
.home-hot .board-card.is-hot,.today-opp .board-card.is-hot{border-color:#c4b2ea;}
/* The Projop's picture, on the workspace Overview. */
.pj-overview-hero-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;
align-items:stretch;margin:0 0 12px;min-height:210px;}
.pj-overview-visual{min-width:0;}
.pj-overview-side{display:flex;flex-direction:column;min-width:0;}
.pj-img-row{display:flex;flex-direction:column;align-items:stretch;gap:7px;min-width:0;height:100%;}
.pj-img-thumb{width:100%;height:210px;border-radius:10px;object-fit:cover;flex:none;
background:var(--bg);border:1px solid var(--line);}
.pj-img-thumb.pj-img-none{
display:flex;align-items:center;justify-content:center;
font-size:10.5px;color:var(--muted);font-style:italic;}
.pj-overview-attention{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;
gap:8px;padding:6px 4px;}
.pj-overview-attention .pj-gaps{justify-content:flex-end;margin:0;}
.pj-overview-attention .pj-next{align-self:stretch;margin:0;}
.pj-overview-brief{width:100%;margin:0 0 12px;}
.pj-overview-brief .pjb-sec{margin:0;}
.pj-overview-brief .pj-field-value{min-height:82px;font-weight:500;}
.pj-overview-brief textarea{min-height:82px;resize:vertical;}
@media (max-width:620px){
.pj-overview-hero-row{grid-template-columns:1fr;min-height:0;}
.pj-img-thumb{height:180px;}
.pj-overview-attention{align-items:flex-start;}
.pj-overview-attention .pj-gaps{justify-content:flex-start;}
}
/* v12.66.0 — Players tab: a company with no role of its own, and a person showing their
company's role as a hint.
NOTE THE #side-body PREFIX ON BOTH. The Players list is styled by an ID-prefixed block
(`#side-body .stake-grp`, ~line 1425), and an ID selector outranks a class-only one however
late it is appended — two earlier releases wrote class-only overrides here and changed
nothing on screen. See CLAUDE.md's v12.15.1 note. */
/* A DERIVED chip must never look like a stored one. Dashed, grey, italic — the visual
vocabulary of "inferred", so nobody reads it as a role somebody actually set. */
#side-body .stake-chip-derived{
background:transparent; color:var(--muted); border:1px dashed var(--line);
font-style:italic; font-weight:400;
}
/* v12.68.0 — "I have read this news note" (per person, doc_reads).
A read note is DIMMED, never hidden: Costas' rule is that it leaves Today and stays on its
Projop. Hiding it here would be the opposite of "keep it archived in the relevant projop". */
#side-body .doc-row.is-read{ opacity:.62; }
#side-body .doc-row.is-read:hover{ opacity:1; }
#side-body .doc-pill.doc-read.on{
background:color-mix(in srgb,var(--accent) 12%,transparent);
border-color:color-mix(in srgb,var(--accent) 40%,var(--line));
color:var(--accent);
}
/* Today's quiet reassurance line under My Signals: the list emptying is a filter, not a delete. */
.today-readnote{
padding:6px 8px 2px;font-size:11.5px;color:var(--muted);font-style:italic;
}
/* v12.69.0 — the merged landing page. Today's tab strip now also carries the two Market Signals
controls that used to sit in that card's header, pushed to the right of the tabs. */
.today-tab-ctl{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; padding:0 4px 6px; }
/* v12.70.0 — Mark read as a checkbox pill: a small box with a much smaller label beside it,
per Costas. It is an ACTION, not a state — the row disappears once ticked — so the box is
always empty when you see it. */
.home-mkt-read{
flex:none; display:inline-flex; align-items:center; gap:5px;
border:1px solid var(--line); border-radius:999px; padding:3px 8px 3px 6px;
cursor:pointer; background:transparent; user-select:none;
}
.home-mkt-read:hover{ border-color:var(--accent); }
.home-mkt-read input{ margin:0; width:13px; height:13px; cursor:pointer; }
.home-mkt-read span{ font-size:9.5px; letter-spacing:.02em; color:var(--muted); white-space:nowrap; }
.home-mkt-read:hover span{ color:var(--accent); }
/* Drag the Projop strip left/right by grabbing a card. grab/grabbing is the whole affordance —
without it nobody discovers the gesture. `is-dragging` also suppresses text selection and
pointer events inside the cards for the duration, so a pan never highlights a headline. */
[data-projop-scroller] .home-strip-track{ cursor:grab; touch-action:pan-y; }
[data-projop-scroller] .home-strip-track.is-dragging{ cursor:grabbing; user-select:none; scroll-behavior:auto; }
[data-projop-scroller] .home-strip-track.is-dragging *{ pointer-events:none; }
/* v12.71.0 — the Projop's warning pills, moved from Overview to the top right of the tab strip.
`margin-left:auto` is what pins them right; the strip is already a flex row.
ORANGE, NOT RED. Costas: "recolor them to an orange color and leave the red for more extreme
alert." So --danger red is now RESERVED for a tier he has not defined yet — a new pill should
default to .pj-pill-warn and only go red once he says which alerts are extreme. */
.pj-tabs{align-items:center;}
.pj-tab-alerts{
margin-left:auto; display:inline-flex; align-items:center; gap:5px;
flex-wrap:wrap; justify-content:flex-end; padding-bottom:4px;
}
.pj-pill-warn{
--pc:#e67e22;
font-size:10px; padding:2px 8px; white-space:nowrap;
/* v12.71.1 — BLACK TEXT, overriding .badge.soft's `color:var(--pc)`. Costas asked for it to
improve legibility, and he is right: orange type on a 14%-orange ground is the lowest
contrast combination in the app. The pill still reads as orange — the fill and the border
carry the colour, the text only has to be readable. */
color:var(--ink);
}
/* The strip must never be pushed out of shape by a Projop with every gap at once. */
@media (max-width:820px){
.pj-tabs{flex-wrap:wrap;}
.pj-tab-alerts{margin-left:0; width:100%; justify-content:flex-start; padding:4px 0 0;}
}
/* v12.73.2 — KEY PLAYER CARDS. THE PHOTO BLEEDS TO THE CARD EDGES, exactly like a Projop card.
EVERY SELECTOR HERE IS `#side-body .stake-key-grid .stake-row.stake-card…` — one id plus
three classes — and that is deliberate, not verbosity. The Players tab already carries
ID-prefixed rules with the SAME weight as a plain `#side-body .stake-row.stake-card`, so an
equal-specificity override only wins by being later in the file, which is fragile and is
exactly how the last two attempts lost. The one that mattered:
`#side-body .stake-row.stake-pn{padding:6px 9px 6px 22px}`
— a 22px LEFT indent, which is what pushed the picture off the card's edge. Outranking it
outright is the fix; matching it and hoping to be last is not.
For the bleed itself the recipe is the Projop card's: the CARD owns padding:0 and
overflow:hidden with the radius, and the picture is a plain 100%-wide block. Nothing between
the card edge and the image may carry padding, margin or a border. */
#side-body .stake-key-grid{
display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
gap:10px; padding:8px 2px 4px; align-items:start;
}
#side-body .stake-key-grid .stake-row.stake-card{
display:flex; flex-direction:column; align-items:stretch; gap:0;
padding:0; margin:0; overflow:hidden; cursor:pointer;
border:1px solid var(--line); border-bottom:1px solid var(--line); border-radius:12px;
background:var(--card); box-shadow:var(--shadow); opacity:1;
transition:transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s, border-color .13s;
}
#side-body .stake-key-grid .stake-row.stake-card:hover{
opacity:1; background:var(--card); border-color:var(--accent);
transform:translateY(-3px); box-shadow:var(--shadow-lg);
}
/* The picture: full width, flush to all three edges, clipped by the card's own radius. */
#side-body .stake-key-grid .stake-card .plc-media{
display:block; width:100%; height:86px; margin:0; padding:0; border:0;
background:var(--panel); overflow:hidden; flex:none;
}
#side-body .stake-key-grid .stake-card .plc-img{
display:block; width:100%; height:86px; margin:0; padding:0; border:0;
object-fit:cover; object-position:center 20%;
}
#side-body .stake-key-grid .stake-card .plc-img-none{
display:flex; align-items:center; justify-content:center;
background:var(--pc,#2f6df6); color:#fff; font-size:24px; font-weight:800; letter-spacing:.5px;
}
/* Three lines, one left edge, one scale — name 12, title 11, company 11. */
#side-body .stake-key-grid .stake-card .plc-body{
padding:8px 10px 7px; display:flex; flex-direction:column; gap:1px; min-width:0;
}
#side-body .stake-key-grid .stake-card .plc-name{
font-size:12px; line-height:1.3; color:var(--ink); font-weight:400;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#side-body .stake-key-grid .stake-card .plc-name b{ font-weight:700; }
#side-body .stake-key-grid .stake-card .plc-title,
#side-body .stake-key-grid .stake-card .plc-org{
font-size:11px; line-height:1.35; color:var(--muted);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#side-body .stake-key-grid .stake-card .plc-org{ opacity:.8; }
#side-body .stake-key-grid .stake-card .plc-org:empty{ display:none; }
/* The company name on an ordinary (non-key) person row, where the role chip used to be. */
#side-body .stake-orgname{ flex:none; font-size:10.5px; color:var(--muted);
max-width:38%; padding:0; border:0; background:transparent; font-family:inherit;
text-align:left; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#side-body .stake-orgname:hover{ color:var(--accent); text-decoration:underline; }
/* v12.111.0 — ordinary company-contact rows use fixed columns so photos, names, status controls
and action icons share the same vertical lines from one row to the next. */
#side-body .stake-side .stake-grp-body .stake-row.stake-pn:not(.stake-card){
display:grid;grid-template-columns:20px minmax(0,1fr) 62px 48px 26px 26px;
align-items:center;column-gap:7px;min-height:32px;
}
#side-body .stake-side .stake-grp-body .stake-active,
#side-body .stake-side .stake-grp-body .stake-key{
display:inline-flex;align-items:center;gap:4px;margin:0;color:var(--muted);
font-size:10.5px;font-weight:400;line-height:1;white-space:nowrap;cursor:pointer;
}
#side-body .stake-side .stake-grp-body .stake-active input,
#side-body .stake-side .stake-grp-body .stake-key input{margin:0;width:14px;height:14px;}
#side-body .stake-side .stake-grp-body .stake-info,
#side-body .stake-side .stake-grp-body .stake-pen{justify-self:center;margin:0;}
/* Relationship company names throughout Preview are links to the same organization surface. */
.org-preview-link{ padding:0; border:0; background:transparent; color:var(--accent);
font:inherit; text-align:left; cursor:pointer; }
.org-preview-link:hover{ text-decoration:underline; }
/* v12.75.0 — the news / information note's controls, as four icons in a 2x2 block with the
contributor's photo underneath. Costas: "the star, mark read, edit and delete will all be
icons ... and under the pic of the person that contributed the note."
The same block on Home and on the Projop Info tab, because both draw projopDocRowHtml().
Note these rules carry NO #side-body prefix on purpose — the row now lives in two places and
a prefixed rule would style only one of them (the v12.15.1 finding, in reverse). */
.doc-actions{gap:6px;}
.doc-ico-grid{display:grid;grid-template-columns:repeat(2,25px);gap:4px;}
.doc-ico{
display:flex;align-items:center;justify-content:center;width:25px;height:25px;padding:0;
border:1px solid var(--line-strong);border-radius:7px;background:#fff;color:#8d97a3;
font:400 14px/1 inherit;cursor:pointer;
transition:color .13s,border-color .13s,background .13s;
}
.doc-ico:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);}
.doc-ico:disabled{opacity:.5;cursor:wait;}
.doc-ico.doc-star{font-size:16px;}
.doc-ico.doc-star.on{color:#d4a800;border-color:#e6c65a;background:#fffaea;}
.doc-ico.doc-read.on{
color:var(--accent);
border-color:color-mix(in srgb,var(--accent) 40%,var(--line-strong));
background:color-mix(in srgb,var(--accent) 12%,transparent);
}
.doc-ico.doc-del:hover{border-color:#efb4b4;background:#fff3f3;color:var(--danger);}
/* A read note is DIMMED, never hidden, wherever the row is drawn — the Info tab keeps it, Home
filters it out of its own list instead. Unprefixed for the same reason as above; the older
#side-body copy of this rule is now redundant rather than wrong. */
.doc-row.is-read{opacity:.62;}
.doc-row.is-read:hover{opacity:1;}
/* Home's grouped signal lists get the same 6px rhythm the Info tab's .doc-list already has. */
/* v12.77.0 — superseded by the accordion block at the end of this file. */
/* v12.76.0 — the AI pill. Costas: "MELKA THE aI sUMMARY PILL MORE SEXY. ADD AN ai ICON - THE
GEMINI SINCE THAT WE USE AND FONTS SMALLER. SAME FOR THE Check links & pictures PILL".
ONE class for all three (AI summary, and the two Check links & pictures buttons), because they
are the same kind of control — a small, quiet action that reaches Gemini — and they were
previously three unrelated styles: a blue chip, a .btn .btn-sm, and a bordered pill.
Unprefixed on purpose: these sit on Home AND inside #side-body, the v12.75.0 rule. */
.ai-pill{
flex:none;display:inline-flex;align-items:center;gap:5px;
border:1px solid #cbd8f4;border-radius:999px;
background:linear-gradient(180deg,#fbfcff,#eaf0ff);
color:#3552a8;font:600 9px/1 inherit;letter-spacing:.06em;text-transform:uppercase;
padding:5px 10px 5px 8px;cursor:pointer;white-space:nowrap;
transition:border-color .13s,box-shadow .13s,background .13s,color .13s;
}
.ai-pill:hover{
border-color:#8ea6e8;color:#26408f;
background:linear-gradient(180deg,#ffffff,#e2ebff);
box-shadow:0 1px 4px rgba(58,99,184,.2);
}
.ai-pill:disabled{opacity:.6;cursor:wait;box-shadow:none;}
.ai-pill .gem-ico{flex:none;display:block;}
.ai-pill .ai-pill-t{display:block;}
.doc-tools .ai-pill{margin-top:0;}
/* v12.77.0 — the news/info accordion. One section per Projop, closed at rest.
The header was a
coloured with var(--pc), a variable set only on `.home-card.tone-*`;
since v12.69.0 these groups live in the tab strip and not inside that card, so --pc resolved
to nothing and the heading fell back to plain body ink. It carries its own colour now — the
same undefined-variable trap as --card in v12.76.0, found while making the header clickable. */
.home-mkt-grp{margin-bottom:6px;border:1px solid var(--line);border-radius:9px;background:var(--card);overflow:hidden;}
.home-mkt-grp-h{
display:flex;align-items:center;gap:7px;width:100%;margin:0;
padding:9px 11px;border:0;border-radius:0;background:transparent;
font:700 11px/1.2 inherit;color:#8a6a2f;text-transform:uppercase;letter-spacing:.04em;
text-align:left;cursor:pointer;transition:background .12s,color .12s;
}
.home-mkt-grp-h:hover{background:var(--accent-soft);color:var(--accent);}
.home-mkt-grp.open .home-mkt-grp-h{border-bottom:1px solid var(--line);}
.mkt-caret{
flex:none;display:inline-block;width:11px;font-size:11px;line-height:1;color:var(--muted);
transition:transform .15s ease;
}
.home-mkt-grp.open .mkt-caret{transform:rotate(90deg);}
.mkt-grp-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mkt-grp-n{
flex:none;min-width:20px;padding:2px 7px;border-radius:999px;
background:var(--bg);color:var(--muted);font:600 10px/1.3 inherit;letter-spacing:0;text-align:center;
}
.home-mkt-grp-h:hover .mkt-grp-n{background:#fff;color:var(--accent);}
.home-mkt-grp .doc-list{margin:0;padding:8px;background:var(--bg);}
/* v12.81.1 — the stale-build warning. Deliberately loud and pinned to the top: the failure it
reports made every release invisible for months, so being subtle here would defeat the point. */
#stale-build-banner{position:fixed;top:0;left:0;right:0;z-index:99999;padding:10px 16px;
background:#c0392b;color:#fff;font-size:13.5px;line-height:1.45;text-align:center;
box-shadow:0 2px 10px rgba(0,0,0,.28);}
#stale-build-banner a{color:#fff;text-decoration:underline;font-weight:700;}
/* v12.84.0 — the organization-merge impact preview. */
.om-impact{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);}
.om-impact ul{margin:6px 0 0;padding-left:18px;font-size:13px;line-height:1.6;}
.om-impact li b{color:var(--ink);}
/* v12.90.1 — "Add a person" on an organization's Contacts tab. Same 132px label column as the
rest of the profile fields (v12.89.3), so it lines up with everything above it. */
.of-contact-add{display:grid;grid-template-columns:132px 1fr auto;column-gap:10px;align-items:center;
margin-top:14px;padding-top:12px;border-top:1px solid var(--line);}
.of-contact-add label{margin:0;font-size:11.5px;font-weight:600;color:var(--muted);}
.of-contact-add .fp-wrap{min-width:0;}
/* v12.90.3 — a record's name is printed ONCE. #side-title is the panel chrome and .detail-head-name
is the identity block beside the logo/photo; a company or a person had both. The identity block
wins because it carries the logo, the type badge and the sub-lines. The title element is still
populated for back-navigation and for anything reading it — only hidden. A Projop is untouched:
it has no .detail-head, so its name is the title. */
#side.side-name-in-body #side-title{display:none;}
/* v12.91.1 — the copyable notification report. Plain, email-like typography on purpose: what is
on screen is what gets pasted. */
.notify-report{border:1px solid var(--line);border-radius:8px;padding:12px 14px;background:var(--card);
font-size:13.5px;line-height:1.55;max-height:46vh;overflow:auto;}
.notify-report p{margin:0 0 8px;}
.notify-report ul{margin:0 0 12px;padding-left:20px;}
.notify-report a{color:var(--accent);}
.act-preview{margin-bottom:4px;}
/* v12.91.4 — the report's language switch. Greek is the default; English is one click away. */
.nr-lang{display:flex;gap:4px;margin:0 0 8px;}
.nr-lang-b{background:none;border:1px solid var(--line);border-radius:6px;padding:3px 10px;cursor:pointer;
font-size:11px;font-weight:700;letter-spacing:.4px;color:var(--muted);}
.nr-lang-b.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);}
/* v12.91.7 — the note / link mark on an action row. An inline SVG rather than an emoji, so it can
never fall back to a missing-glyph box; the count only prints when there is more than one. */
.ar-notes{display:inline-flex;align-items:center;gap:2px;color:var(--muted);vertical-align:middle;margin-left:6px;}
.ar-notes svg{display:block;}
.ar-notes-n{font-size:10px;font-weight:700;line-height:1;}
/* v12.92.0 — the name-mismatch mark and its filter count. Orange, not red: the record is not
broken, it just disagrees with itself and wants a human decision. */
.adm-name-warn{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;
margin-left:4px;border-radius:50%;background:#e67e22;color:#fff;font-size:10px;font-weight:800;
line-height:1;vertical-align:middle;cursor:help;flex:0 0 auto;}
.adm-mismatch-n{margin-left:5px;font-size:10px;font-weight:700;color:var(--muted);
background:var(--bg);border-radius:20px;padding:1px 6px;}
/* ===================== SOLUTIONS (v12.93.0) =====================
The Projop Overview's Solutions section: chips in Preview, tick boxes in Edit.
Plain class selectors, no #side-body prefix — nothing in the stylesheet styles these names,
so there is no specificity fight to win here (contrast the Players list, v12.15.1, where an
older ID-scoped rule outranked a later class-only one however late it was appended).
Every colour is a DEFINED custom property: an undefined one invalidates the whole declaration
silently, and jsdom applies no CSS so the suite cannot see it (v12.76.0, v12.77.0). */
.sol-chips{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 4px;}
.sol-chip{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;
border:1px solid var(--line-strong);background:var(--card);font-size:12px;font-weight:600;
line-height:1.5;white-space:nowrap;}
.sol-picks{display:flex;flex-wrap:wrap;gap:4px 14px;margin:2px 0 8px;}
.sol-pick{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;cursor:pointer;
padding:2px 0;min-width:170px;}
.sol-pick input{margin:0;flex:0 0 auto;cursor:pointer;}
.sol-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;}
.sol-pick-t{color:var(--ink);}
.sol-add-row{margin-top:2px;}
.sol-add-hint{margin-top:4px;font-size:11.5px;color:var(--muted);}
.sts-count{flex:0 0 auto;font-size:11px;color:var(--muted);white-space:nowrap;}
/* v12.94.0 — the Edit/Save button's birthplace inside #side. It is normally moved straight into
the popup footer beside Close, which leaves this wrapper empty; :empty hides it so the record
does not end with a stray gap. It only ever renders here if that move failed. */
.profile-foot{display:flex;justify-content:flex-end;padding:8px 0 2px;}
.profile-foot:empty{display:none;}
/* v12.94.3 — the Status select (Active / Archived). Sits in the same 132px label-left grid as
every other field on the profile form (v12.89.3), so it lines up with the boxes above it
rather than shrinking to its own content width. */
.of-archived-field .of-status-select{width:100%;max-width:220px;}
/* ===================== PROFILE PROJOP TILES + TAB ROW (v12.95.0) =====================
Costas: "replace it with a simpler version of the projop card (photo, title) and list them in a
row (or 2 if needed)".
v12.95.2 — THIS COMMENT PREVIOUSLY CONTAINED THE TWO CHARACTERS THAT END A CSS COMMENT, inside
what was meant to be prose about other class names. That closed the comment early, the words
after it were parsed as a selector, and the CSS parser then discarded everything up to and
including the NEXT rule block — which was .pjt-row. So the tiles kept their own styling and
silently lost their container layout, and every one stacked in a single column.
NEVER write a star-slash pair inside a CSS comment, including inside a wildcard class pattern.
The layout is a GRID, not flex: auto-fill wraps to as many rows as it needs (Costas' "or 2 if
needed") and, unlike a flex row, it cannot be quietly defeated by an inherited flex-direction.
jsdom applies no CSS, so none of this is observable from the suite — the guard added in
tools/smoke.test.js checks the STYLESHEET's comment structure instead. */
.pjt-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,116px));
gap:8px;margin:4px 0 2px;align-items:start;}
.pjt{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:8px;
overflow:hidden;background:var(--card);text-decoration:none;color:inherit;cursor:pointer;}
.pjt:hover{border-color:var(--accent);box-shadow:var(--shadow);}
.pjt-img{display:block;width:100%;height:58px;object-fit:cover;background:var(--bg);flex:0 0 auto;}
/* The fallback is a span, so its box is built by hand — object-fit does nothing to a span. */
.pjt-img-none{display:flex;align-items:center;justify-content:center;color:var(--muted);
font-size:15px;font-weight:700;letter-spacing:.04em;}
/* Two lines, hard-capped. The line-clamp trio does the ellipsis where it is supported; max-height
plus overflow is the fallback that clips regardless, so a long name can never spill out of the
tile and over the one below it. */
.pjt-name{padding:5px 7px 7px;font-size:10.5px;font-weight:600;line-height:1.3;color:var(--ink);
word-break:break-word;}
/* The tab strip and the action buttons share one row; the buttons hug the right edge and are
allowed to drop below the tabs on a narrow panel rather than squeezing them. */
.profile-tabbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.profile-tabbar .profile-tabs{flex:1 1 auto;min-width:0;}
.profile-tabbar .profile-actions{flex:0 0 auto;margin:0;}
/* ===================== PROJOP TILE GROUPS + ACTIVITY TAB (v12.96.0) =====================
Costas: "make all projops cards equal in size, height. Organize them in two levels. Active and
Archived." Equal height is a FIXED name box, not a max-height: two lines' worth of space is
reserved whether the name needs one line or two, so every tile in a row ends level.
No wildcard class patterns are named in this comment — see the v12.95.2 rule about the two
characters that end a comment block. */
.pjt-grp{margin:2px 0 8px;}
.pjt-grp-h{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
color:var(--muted);margin:0 0 4px;display:flex;align-items:center;gap:6px;}
.pjt-grp-h span{font-weight:600;color:var(--muted);background:var(--bg);border-radius:20px;
padding:0 6px;font-size:10px;letter-spacing:0;}
/* v12.97.1 — the fixed-height name box is GONE. See the block at the end of this file. */
.cact-grp{margin:0 0 12px;}
.cact-grp-h{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--ink);
border-bottom:1px solid var(--line);padding:0 0 3px;margin:0 0 4px;}
.cact-grp-h a{color:var(--accent);text-decoration:none;cursor:pointer;}
.cact-grp-h a:hover{text-decoration:underline;}
.cact-n{font-weight:600;color:var(--muted);background:var(--bg);border-radius:20px;padding:0 6px;font-size:10px;}
.cact-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:baseline;
padding:4px 6px;border-radius:6px;cursor:pointer;font-size:12px;}
.cact-row:hover{background:var(--accent-soft);}
.cact-row.done .cact-task{text-decoration:line-through;color:var(--muted);}
.cact-task{color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cact-meta{color:var(--muted);font-size:11px;white-space:nowrap;}
.cact-when{color:var(--muted);font-size:11px;white-space:nowrap;}
/* ===================== LOG GROUPS + ROOMIER PROJOP TILES (v12.97.0) =====================
Costas: "make cards big enough or adjust fonts to fit all the projop title", and for the log
"there will be only heading of the different projops for which there is a log". */
.nl-grp{margin:0 0 14px;}
.nl-grp-h{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--ink);
border-bottom:1px solid var(--line);padding:0 0 3px;margin:0 0 6px;}
.nl-grp-n{font-weight:600;color:var(--muted);background:var(--bg);border-radius:20px;
padding:0 6px;font-size:10px;}
/* ===================== EQUAL TILES, WHOLE TITLES (v12.97.1) =====================
Costas, twice: "make cards big enough or adjust fonts to fit ALL the projop title", and the
title was still clipped. Two earlier attempts reserved a FIXED number of lines and clamped the
rest away — two lines, then three. That is the wrong shape of answer: any fixed count is a
guess about the longest name, and when the guess is wrong the title is cut, which is the
complaint. It also made the maths fragile, since `3 * 1.3em` resolves against this element's own
font-size and quietly changes meaning if the font-size line is ever edited.
THE GRID DECIDES THE HEIGHT NOW, NOT THE TEXT. `grid-auto-rows:1fr` makes every row exactly as
tall as its tallest tile, and `.pjt{height:100%}` stretches the others to match. So the name
wraps to however many lines it needs — no clamp, no cap, no overflow rule — and the tiles are
still all identical, which was the other half of the ask. A longer name makes every tile in that
row taller together instead of being truncated.
The picture keeps its fixed 58px so the images stay aligned across the row; the name box takes
whatever is left, which is what `flex:1 1 auto` on it does. */
.pjt-row{grid-template-columns:repeat(auto-fill,minmax(140px,164px));grid-auto-rows:1fr;}
.pjt{height:100%;}
.pjt-name{flex:1 1 auto;}
/* ===================== STAKEHOLDER CONTACT PICKER (v12.100.0) ===================== */
.stake-company-tools{margin:0 0 5px;font-size:11px;color:var(--muted);}
.stake-company-tools a{color:var(--accent);text-decoration:none;font-weight:600;}
.stake-company-tools a:hover{text-decoration:underline;}
.stake-company-contacts{max-height:220px;overflow:auto;border:1px solid var(--line);
border-radius:8px;background:var(--card);padding:3px;}
.field label.stake-company-contact{display:grid;grid-template-columns:14px 24px minmax(0,1fr);gap:7px;
align-items:center;padding:4px 6px;margin:0;border-radius:5px;cursor:pointer;font-size:11.5px;
line-height:1.25;font-weight:400;min-height:32px;}
.stake-company-contact:hover{background:var(--accent-soft);}
.field .stake-company-contact input[type=checkbox]{appearance:auto;width:13px;height:13px;
min-height:0;padding:0;margin:0;flex:0 0 auto;accent-color:var(--accent);}
.stake-company-contact .who-av{width:22px;height:22px;}
.stake-company-contact b{font-size:11.5px;}
.stake-company-contact small{display:inline;color:var(--muted);font-size:10.5px;line-height:1.2;
margin-left:6px;font-weight:400;}
.stake-company-contact.archived{opacity:.55;cursor:not-allowed;}
/* ===================== REPORTS WORKSPACE (v12.102.0) ===================== */
.modal-card.report-builder-modal{max-width:820px;}
.report-builder{font-size:13px;}
.report-builder .field{margin-bottom:10px;}
.report-builder .field label{font-size:12px;}
.report-builder .field select,.report-builder .field input{min-height:34px;padding:5px 8px;font-size:13px;}
.rb-dates{display:flex;gap:7px;align-items:end;}.rb-dates[hidden]{display:none;}
.rb-dates input{width:50%;min-height:34px;border:1px solid var(--line-strong);border-radius:7px;padding:5px 8px;}
.rb-project-head{display:flex;justify-content:space-between;align-items:center;margin:4px 0 5px;}
.rb-project-head span{color:var(--muted);font-size:11px;}
.rb-projects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 8px;max-height:310px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:6px;}
.rb-projects label{display:grid;grid-template-columns:15px minmax(0,1fr);align-items:center;gap:7px;padding:5px 7px;border-radius:5px;font-size:12px;cursor:pointer;}
.rb-projects label:hover{background:var(--accent-soft);}
.rb-projects input[type=checkbox]{width:13px;height:13px;min-height:0;margin:0;padding:0;accent-color:var(--accent);}
.report-builder .hint{font-size:11px;color:var(--muted);margin:9px 0 0;}
@media(max-width:650px){.rb-projects{grid-template-columns:1fr;}}