/* =============================================================================
* ux-app.css — AppViews engineer · additive UX polish for app.js views.
* Linked by index.html AFTER studio-v2.css (so it cascades last). Owns ONLY the
* styles for the AppViews items (calendar / scheduled / feed / settings /
* global). All design tokens reused from styles.css :root — no new palette.
*
* Items styled here:
* #38 global top progress bar (.u-progressbar)
* #69 collapsible world-clock bar (.tz-toggle, .tz-bar.is-collapsed)
* #72 scheduled date-bucket group headers (.sched-group-head)
* #75 scheduled card action row (.card-actions)
* #76 scheduled density toggle + compact mode (.sched-density, .is-compact)
* #84 feed "Seed in Compose" ghost button (inherits .btn — spacing only)
* #37 inline "Testing…" note by the save-token button (.conn-inline-note)
* #29 friendly telemetry labels (.diag-unit units pill)
* ===========================================================================*/
/* --- #38 global top progress bar ----------------------------------------- */
.u-progressbar {
position: fixed;
top: 0;
left: 0;
height: 3px;
width: 0;
background: var(--blue);
z-index: 9999;
opacity: 0;
pointer-events: none;
border-radius: 0 2px 2px 0;
box-shadow: 0 0 6px color-mix(in srgb, var(--blue) 60%, transparent);
transition: width var(--t-fast, 160ms) ease, opacity 200ms ease;
}
.u-progressbar.is-active {
opacity: 1;
}
.u-progressbar.is-done {
/* width is driven to 100% in JS; fade out once full */
opacity: 0;
}
/* --- #69 collapsible world-clock bar ------------------------------------- */
.tz-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
margin-right: 2px;
padding: 0;
border: 1px solid var(--line);
border-radius: var(--radius-sm, 6px);
background: var(--surface-soft);
color: var(--ink-soft);
font-size: 12px;
line-height: 1;
cursor: pointer;
transition: background var(--t-fast, 160ms) ease, color var(--t-fast, 160ms) ease;
}
.tz-toggle:hover {
color: var(--ink);
background: var(--card);
}
/* The collapse-in-place rules are gone (2026-09-13): the bar became a compact
* trigger + popover, so the chips are hidden by .tz-pop.hidden instead. Leaving
* these would hide the popover's contents whenever a stale .is-collapsed class
* survived on the bar. */
/* --- #72 scheduled date-bucket group headers ----------------------------- */
.sched-group-head {
position: sticky;
top: var(--topbar-h, 56px);
z-index: 2;
display: flex;
align-items: center;
gap: 8px;
margin: 18px 0 8px;
padding: 6px 2px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-faint);
background: color-mix(in srgb, var(--surface-soft) 92%, transparent);
backdrop-filter: blur(2px);
border-bottom: 1px solid var(--line);
}
.sched-group-head:first-child {
margin-top: 2px;
}
.sched-group-head .sched-group-count {
font-weight: 600;
color: var(--ink-faint);
letter-spacing: 0;
text-transform: none;
}
/* --- #75 scheduled card action row --------------------------------------- */
/* Right-align the row of actions so the title leads and the controls read as
* secondary, while still wrapping gracefully on narrow widths. */
.card-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
/* Keep destructive/edit buttons from crowding: small breathing room before the
* primary publish control if it ends up first on a wrapped line. */
.card-actions > .btn {
margin: 0;
}
/* --- #76 scheduled density toggle + compact mode ------------------------- */
.sched-density {
display: inline-flex;
align-items: stretch;
border: 1px solid var(--line);
border-radius: var(--radius-sm, 6px);
overflow: hidden;
}
.sched-density button {
appearance: none;
border: 0;
background: var(--surface-soft);
color: var(--ink-soft);
font: inherit;
font-size: 12px;
padding: 5px 10px;
cursor: pointer;
transition: background var(--t-fast, 160ms) ease, color var(--t-fast, 160ms) ease;
}
.sched-density button + button {
border-left: 1px solid var(--line);
}
.sched-density button[aria-pressed="true"] {
background: var(--blue);
color: #fff;
}
.sched-density button:not([aria-pressed="true"]):hover {
color: var(--ink);
background: var(--card);
}
/* Compact: tighten card padding + clamp the body harder so more posts fit. */
#schedule-list.is-compact .card {
padding-top: 10px;
padding-bottom: 10px;
}
#schedule-list.is-compact .card-body {
margin-top: 4px;
margin-bottom: 4px;
}
#schedule-list.is-compact .card-actions {
margin-top: 8px !important;
}
#schedule-list.is-compact .sched-group-head {
margin: 12px 0 6px;
}
/* --- #84 feed "Seed in Compose" button ----------------------------------- */
/* Visual styling comes from the shared .btn/.btn--ghost; just guarantee the
* action row lays its buttons out with a gap when there are now two of them. */
.feed-card-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
/* --- #37 inline "Testing…" note near the save-token button --------------- */
.conn-inline-note {
display: inline-block;
margin-left: 10px;
font-size: 12px;
color: var(--ink-faint);
opacity: 0;
transition: opacity var(--t-fast, 160ms) ease;
}
.conn-inline-note.is-shown {
opacity: 1;
}
/* --- #29 telemetry units pill -------------------------------------------- */
.diag-unit {
display: inline-block;
margin-left: 6px;
font-size: 11px;
color: var(--ink-faint);
}
/* ---- platform badges -------------------------------------------------------
Which platforms a post actually reached, on every Calendar row and on the
grid itself (owner ask 2026-09-18: "so that we know which post has published
where, in case it got published in multiple platforms").
A monogram, not a brand logo: the logos are trademarks and an ![]()
per row
would be a network request per row. Solid + brand colour = it published and
the chip is a link to it; outlined = aimed there but not published yet; red
= it was attempted and failed. */
.plat-badges { display: inline-flex; align-items: center; gap: 4px; }
.plat-badge {
display: inline-flex; align-items: center; justify-content: center;
min-width: 20px; height: 20px; padding: 0 5px;
border-radius: 5px; border: 1px solid transparent;
font-size: 11px; font-weight: 700; line-height: 1;
text-decoration: none; letter-spacing: -.01em;
}
.plat-badge.is-published { color: #fff; }
a.plat-badge.is-published:hover { filter: brightness(1.12); text-decoration: none; }
.plat-badge.is-planned {
background: transparent;
border-color: var(--line, #e6ebf1);
color: var(--ink-soft, #5b6b7b);
opacity: .9;
}
.plat-badge.is-failed {
background: transparent; color: var(--red, #b42318);
border-color: var(--red, #b42318);
}
/* DRAFTED — the file is at the platform but nobody can see it yet (TikTok's
inbox draft). Outlined like 'planned' so it never reads as published, amber
so it never reads as "nothing to do here": there IS a tap owed.
--badge-amber is its own token rather than --amber because --amber (#8a6d00)
measures 4.35:1 on the light app background, and a badge is one of the few
things that lands on --bg as well as on a card. Same mistake as --blue doing
double duty as link ink and button fill; same fix, a separate token.
It is DECLARED in studio-v2.css, not here: this file loads last, so a :root
declared here would out-cascade the dark override and dark mode would get
the light value. */
.plat-badge.is-drafted {
background: transparent; color: var(--badge-amber);
border-color: var(--badge-amber);
}
a.plat-badge.is-drafted:hover { filter: brightness(1.12); text-decoration: none; }
/* On the calendar grid the pills are tiny; shrink to match. */
.plat-badges.is-compact { gap: 2px; margin-right: 4px; vertical-align: middle; }
.plat-badges.is-compact .plat-badge {
min-width: 14px; height: 14px; padding: 0 3px;
font-size: 9px; border-radius: 3px;
}
/* ---- hover a day to see everything on it -----------------------------------
dayMaxEvents collapses a busy day to "+N more", which says HOW MANY and not
WHICH — and the pills truncate the titles that do show. */
.day-hover {
position: fixed; z-index: 1200; max-width: 460px; min-width: 260px;
padding: 8px 10px; border-radius: 10px;
background: var(--card, #ffffff); color: var(--ink, #1b2733);
border: 1px solid var(--line, #cbd5e1);
box-shadow: 0 10px 30px rgba(15, 23, 42, .18);
font-size: 12px; pointer-events: none;
}
.day-hover__head {
font-weight: 700; margin-bottom: 6px; padding-bottom: 5px;
border-bottom: 1px solid var(--line, #e2e8f0);
}
.day-hover__row {
display: flex; align-items: center; gap: 7px; padding: 3px 0;
border-left: 3px solid transparent; padding-left: 6px;
}
.day-hover__time { font-variant-numeric: tabular-nums; opacity: .7; min-width: 58px; }
.day-hover__title {
flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.day-hover__status { opacity: .6; font-size: 11px; text-transform: lowercase; }
/* ---- the event pills: one line, badge and title together -------------------
The badge used to land in .fc-event-main and take a row of its own, pushing
the heading out of a 39px week-view pill. It belongs beside the title. */
.fc-event-title .plat-badges,
.fc-list-event-title .plat-badges { display: inline-flex; vertical-align: middle; }
.fc-daygrid-event .fc-event-title,
.fc-timegrid-event .fc-event-title {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Week view: keep time, badge and heading on one line rather than stacking. */
.fc-timegrid-event .fc-event-main-frame { flex-direction: row; align-items: baseline; gap: 4px; }
.fc-timegrid-event .fc-event-time { flex: 0 0 auto; }
.fc-timegrid-event .fc-event-title-container { flex: 1 1 auto; min-width: 0; }
/* List view: the badge sits before the heading text, not above it. */
.fc-list-event-title a { display: inline; }
/* ---- hovering a post shows the POST ----------------------------------------
The pill holds a truncated heading; the old native tooltip held three lines of
plain text. This holds the post. */
.ev-hover {
position: fixed; z-index: 1300; width: 380px; max-width: calc(100vw - 24px);
padding: 10px 12px; border-radius: 10px;
background: var(--card, #ffffff); color: var(--ink, #1b2733);
border: 1px solid var(--line, #cbd5e1);
box-shadow: 0 12px 34px rgba(15, 23, 42, .20);
font-size: 12px; line-height: 1.45; pointer-events: none;
}
.ev-hover__title { font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.ev-hover__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.ev-hover__pill {
padding: 1px 7px; border-radius: 999px; font-size: 11px;
border: 1px solid var(--line, #cbd5e1); text-transform: lowercase;
}
.ev-hover__media { font-size: 11px; opacity: .8; }
.ev-hover__when { font-size: 11px; opacity: .7; margin-bottom: 7px; }
.ev-hover__body {
white-space: pre-wrap; max-height: 260px; overflow: hidden;
padding-top: 7px; border-top: 1px solid var(--line, #e2e8f0);
}
.ev-hover__body--empty { opacity: .6; font-style: italic; }
.ev-hover__more { margin-top: 5px; font-size: 11px; opacity: .65; }
/* ---- one post, N publications ----------------------------------------------
Owner, 2026-09-19: a post going to LinkedIn and four Facebook Pages must draw
five badges, and hovering one must name THAT Page. Two surfaces do that work:
a named list inside the post card (all destinations at once) and a card for
the single badge under the cursor. */
.ev-hover__dests {
margin: 0 0 7px; padding-top: 6px;
border-top: 1px solid var(--line, #e2e8f0);
display: flex; flex-direction: column; gap: 3px;
}
.ev-hover__dest { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.ev-hover__dest-name {
flex: 1 1 auto; min-width: 0; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap;
}
/* --ink-soft, not an opacity: a composited alpha is invisible to a contrast
audit that reads computed colour, which is how .cmp-dest.is-off shipped at
2.26:1 and survived a 127-defect sweep (2026-09-19). */
.ev-hover__dest-state { flex: 0 0 auto; font-size: 10px; color: var(--ink-soft, #5b6b7b); }
.ev-hover__dest.dest--failed .ev-hover__dest-state { color: var(--red, #b42318); }
.ev-hover__dest.dest--drafted .ev-hover__dest-state { color: var(--badge-amber); }
/* "+3" — the compact strip keeps the pill readable without silently cropping. */
.plat-badge.is-more {
background: transparent; border-color: var(--line, #e6ebf1);
color: var(--ink-soft, #5b6b7b); font-weight: 600;
}
.plat-badges.is-compact .plat-badge.is-more { color: inherit; border-color: currentColor; }
.dest-hover {
position: fixed; z-index: 1320; width: 320px; max-width: calc(100vw - 24px);
padding: 9px 11px; border-radius: 10px;
background: var(--card, #ffffff); color: var(--ink, #1b2733);
border: 1px solid var(--line, #cbd5e1);
box-shadow: 0 12px 34px rgba(15, 23, 42, .20);
font-size: 12px; line-height: 1.45; pointer-events: none;
}
.dest-hover__head { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
.dest-hover__name { font-weight: 700; font-size: 13px; overflow-wrap: anywhere; }
.dest-hover__sub { font-size: 11px; color: var(--ink-soft, #5b6b7b); margin-bottom: 5px; }
.dest-hover__state { font-size: 11px; font-weight: 600; }
.dest-hover__state.dest--failed { color: var(--red, #b42318); }
.dest-hover__state.dest--drafted { color: var(--badge-amber); }
.dest-hover__err {
margin-top: 4px; font-size: 11px; color: var(--red, #b42318); overflow-wrap: anywhere;
}
.dest-hover__note, .dest-hover__link {
margin-top: 4px; font-size: 11px; color: var(--ink-soft, #5b6b7b);
}
/* The submitted snapshot: a quoted excerpt, set apart from the live state above
it, because the two can legitimately disagree (the post was edited since). */
.dest-hover__submitted {
margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--line, #e2e8f0);
}
.dest-hover__submitted-label {
font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
color: var(--ink-soft, #5b6b7b); margin-bottom: 3px;
}
.dest-hover__submitted-text {
white-space: pre-wrap; overflow-wrap: anywhere; max-height: 140px; overflow: hidden;
font-size: 11.5px; line-height: 1.4;
}
.dest-hover__submitted-meta { margin-top: 4px; font-size: 11px; color: var(--ink-soft, #5b6b7b); }
/* ---- the platform badge sits first in every view --------------------------- */
.fc-daygrid-event .plat-badges,
.fc-timegrid-event .plat-badges { margin-right: 4px; flex: 0 0 auto; }
.fc-list-event-plat {
width: 1%; white-space: nowrap; padding-right: 0 !important;
vertical-align: middle; text-align: right;
}
.fc-list-event-plat .plat-badges { justify-content: flex-end; }
/* ---- hover must not strand the text on a colour it was not chosen for -------
The calendar paints each event row with its STATUS colour and picks a text
colour to match (white on the light theme's dark greens/blues; near-black on
the dark theme's bright ones). FullCalendar's list view then paints its hover
background on the , which sits ABOVE the row's background and covers it —
while the text colour, chosen for the status colour, stays put.
Measured in dark mode: row rgb(87,208,138) with rgb(11,22,34) ink, correct;
on hover the td became rgb(15,25,37) and the ink stayed — 1.03 : 1.
So the hover does not REPLACE the background, it tints it. The status colour
and its matching ink stay together, and the row still visibly responds. */
.calendar-wrap .fc .fc-list-event:hover td {
background-color: transparent;
box-shadow: inset 0 0 0 999px rgba(255, 255, 255, .14);
}
/* The day-header rows are not events and have no status colour; give them the
ordinary neutral hover rather than a tint over nothing. */
.calendar-wrap .fc .fc-list-day:hover th { box-shadow: none; }
/* FullCalendar's "+N more" chip is hard-coded #d0d0d0 with an INHERITED text
colour. In dark mode that is light ink on light grey. Give it the theme's own
surface and ink instead. */
.calendar-wrap .fc { --fc-more-link-bg-color: var(--surface-soft, #f6f8fb); }
.calendar-wrap .fc .fc-daygrid-more-link {
color: var(--ink, #1b2733);
background: var(--surface-soft, #f6f8fb);
border: 1px solid var(--line, #e6ebf1);
border-radius: 5px; padding: 0 5px;
}
.calendar-wrap .fc .fc-daygrid-more-link:hover {
background: var(--card, #fff); color: var(--ink, #1b2733);
}
/* The popover FullCalendar opens from that link is a light card by default. */
.calendar-wrap .fc .fc-popover { background: var(--card, #fff); border-color: var(--line, #e6ebf1); }
.calendar-wrap .fc .fc-popover-header { background: var(--surface-soft, #f6f8fb); color: var(--ink, #1b2733); }
.calendar-wrap .fc .fc-popover-body { background: var(--card, #fff); color: var(--ink, #1b2733); }
/* A compact badge sits on an event pill painted with the post's STATUS colour.
It takes that pill's ink, which was already chosen to read against it. */
.plat-badges.is-compact .plat-badge.is-planned,
.plat-badges.is-compact .plat-badge.is-drafted,
.plat-badges.is-compact .plat-badge.is-failed { color: inherit; border-color: currentColor; opacity: .9; }
/* Dark mode: three status colours are LIGHT in this theme (slate, red and, at
the margin, blue), so the white ink inherited from styles.css sat at 2.2:1 on
draft rows and similar on failed ones. Only published/publishing were covered.
Measured, not guessed: draft was rgb(255,255,255) on rgb(159,176,191). */
:root[data-theme="dark"] .calendar-wrap .fc .ev--draft,
:root[data-theme="dark"] .calendar-wrap .fc .ev--draft .fc-event-time,
:root[data-theme="dark"] .calendar-wrap .fc .ev--draft .fc-event-title,
:root[data-theme="dark"] .calendar-wrap .fc .ev--failed,
:root[data-theme="dark"] .calendar-wrap .fc .ev--failed .fc-event-time,
:root[data-theme="dark"] .calendar-wrap .fc .ev--failed .fc-event-title,
:root[data-theme="dark"] .calendar-wrap .fc .ev--scheduled,
:root[data-theme="dark"] .calendar-wrap .fc .ev--scheduled .fc-event-time,
:root[data-theme="dark"] .calendar-wrap .fc .ev--scheduled .fc-event-title { color: #0b1622; }
/* ---- filter the calendar by platform ---------------------------------------
Click an icon to narrow the grid to that platform; click it again to clear.
It COMBINES with the status chips, so "failed on Facebook" is askable. */
.cal-legend-sep {
display: inline-block; width: 1px; height: 18px; margin: 0 6px;
background: var(--line, #e6ebf1); vertical-align: middle;
}
.cal-plat-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 2px 8px 2px 3px; margin-right: 4px;
border: 1px solid var(--line, #e6ebf1); border-radius: 999px;
background: transparent; color: var(--ink-soft, #5b6b7b);
font-size: 12px; cursor: pointer; line-height: 1.6;
}
.cal-plat-chip:hover { border-color: var(--blue, #0a66c2); color: var(--ink, #1b2733); }
.cal-plat-chip.is-active {
border-color: var(--blue, #0a66c2); color: var(--ink, #1b2733);
background: var(--blue-tint, #eaf3fc); font-weight: 600;
}
.cal-plat-chip__mark {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 18px; padding: 0 5px; border-radius: 5px;
color: #fff; font-size: 10px; font-weight: 700; line-height: 1;
}
/* Month view is dense — the mark alone. Week and list have room for the name. */
.cal-plat-chip:not(.is-roomy) { padding: 2px 3px; }
.cal-plat-chip.is-clear {
padding: 2px 9px; color: var(--ink-faint, #7c8c9d); border-style: dashed;
}
/* A platform silenced part of a published video (tools/check-fb-audio.js). */
.ev-hover__mute, .card-mute {
font-size: 11px; font-weight: 600;
color: var(--red, #b42318);
border: 1px solid var(--red, #b42318);
border-radius: 999px; padding: 1px 8px; white-space: nowrap;
}
/* Grouping label inside the destination row ("Facebook" … "Instagram"). */
.cmp-dest-group {
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: .04em; color: var(--ink-faint, #7c8c9d);
margin-left: 4px; margin-right: 2px;
}
/* ---- filled brand surfaces use --blue-fill ---------------------------------
The dark theme lifts --blue to #3b8ee0 so LINKS read on dark backgrounds.
As a FILL behind white text that is 3.42:1. Measured on the calendar's own
toolbar buttons, the skip link and the active Compose tab, 2026-09-19. */
.calendar-wrap .fc .fc-button-primary,
.calendar-wrap .fc .fc-button-primary:disabled {
background-color: var(--blue-fill, #0a66c2);
border-color: var(--blue-fill, #0a66c2);
color: #fff;
}
.calendar-wrap .fc .fc-button-primary:not(:disabled):hover,
.calendar-wrap .fc .fc-button-primary:not(:disabled).fc-button-active {
background-color: var(--blue-dark, #084e96);
border-color: var(--blue-dark, #084e96);
}
.skip-link { background: var(--blue-fill, #0a66c2); color: #fff; }
/* The active Compose tab carried the brand colour as a FILL with ink chosen for
the other theme: dark ink on #0a66c2 (2.67) in light, light ink on #3b8ee0
(2.93) in dark. White on --blue-fill is 5.69 / 5.43. */
.cmp-tab.is-active,
.cmp-tab.is-active .cmp-tab-name,
.cmp-tab.is-active .cmp-tab-ico { color: var(--ink, #1b2733); }
.cmp-tab.is-active { box-shadow: 0 -2px 0 var(--blue-fill, #0a66c2) inset; }
/* Network avatars are hash-coloured, so the INK has to follow the colour rather
than be fixed. hsl(h,52%,46%) with white was 2.62-2.68:1; network.js now
picks the ink from the generated lightness. This is the floor under it. */
.np-avatar { border-width: 1px; border-style: solid; }
/* Selected style chip is a filled brand surface — same reasoning as the
primary button: --blue behind white is 3.42:1 in the dark theme. */
.cmp-style-chip.is-selected,
.cmp-topic-chip.is-selected,
.chip.is-selected,
.pill.is-active {
background: var(--blue-fill, #0a66c2);
border-color: var(--blue-fill, #0a66c2);
color: #fff;
}
/* The status colour is painted on the event, and CHILDREN inherit ink. The
earlier dark-mode rule named the event, its time and its title — but the
platform badge is inserted into neither in the week grid, so it kept the
white it inherited from styles.css and sat at 3.42:1 on the blue pill. The
universal selector is the honest fix: everything inside a pill takes the ink
chosen for that pill's background. */
:root[data-theme="dark"] .calendar-wrap .fc .ev--draft *,
:root[data-theme="dark"] .calendar-wrap .fc .ev--failed *,
:root[data-theme="dark"] .calendar-wrap .fc .ev--scheduled *,
:root[data-theme="dark"] .calendar-wrap .fc .ev--published *,
:root[data-theme="dark"] .calendar-wrap .fc .ev--publishing * { color: #0b1622; }
/* …except a badge that carries its own solid brand colour and white mark. */
:root[data-theme="dark"] .calendar-wrap .fc .plat-badge.is-published { color: #fff; }
/* …and except the "this post will skip a disconnected Page" warning, which
paints its own amber surface and needs its own ink on top of it. The
universal rule above out-specified the badge's own colour (0,4,0 against
0,3,0), so in the dark theme the warning came out #0b1622 on #322a10 —
1.28:1, a warning nobody can see. Measured in the browser, not guessed. */
:root[data-theme="dark"] .calendar-wrap .fc .plat-badge.is-warn { color: var(--amber, #e8c35a); }
/* Density toggle: filled brand surface behind white. */
#sched-density-comfortable[aria-pressed="true"],
#sched-density-compact[aria-pressed="true"],
#sched-density-comfortable.is-active,
#sched-density-compact.is-active {
background: var(--blue-fill, #0a66c2);
border-color: var(--blue-fill, #0a66c2);
color: #fff;
}
/* Dark theme: --blue-tint (#14304a) is a dark wash, so ink meant for a light
tint sits at ~3.9:1 on it. Both of these are body text, not decoration. */
:root[data-theme="dark"] .hint.banner,
:root[data-theme="dark"] .banner .hint { color: var(--ink-soft, #aebccb); }
:root[data-theme="dark"] .pill--scheduled { color: #8fc2f0; }
/* ---- Hits (slice 3) ---------------------------------------------------------- */
.hit-card {
border: 1px solid var(--line, #e2e8f0); border-radius: 10px; padding: 10px 12px; margin: 0 0 10px;
background: var(--card, #ffffff);
}
.hit-card.is-top { border-color: var(--badge-amber); }
.hit-card__head { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.hit-card__brand { font-weight: 700; }
.hit-card__when { margin-left: auto; color: var(--ink-soft, #5b6b7b); }
.hit-card__title { display: block; font-weight: 700; font-size: 14px; margin: 4px 0 2px; color: var(--ink, #1b2733); }
.hit-card__label { font-size: 12px; color: var(--badge-amber); font-weight: 600; }
.hit-card__counts { font-size: 12px; color: var(--ink-soft, #5b6b7b); margin-top: 2px; }
.hit-card__text { font-size: 12.5px; margin-top: 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
.hit-card__actions { margin-top: 8px; }
.hit-card__sheet { margin-top: 6px; padding: 8px 10px; border: 1px solid var(--line, #e2e8f0); border-radius: 8px; display: flex; flex-direction: column; gap: 4px; }
.hit-card__sheet .cmp-dest { display: flex; align-items: center; gap: 6px; }
.hit-card__note { color: var(--ink-soft, #5b6b7b); }
.field--inline { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
/* The app bar is a grid item of .studio, whose 1fr column is minmax(auto, 1fr): with the
default min-width:auto the nav's full width set the PAGE width, so every page scrolled
sideways on a phone (measured 2026-09-30: 488px on a 390px screen). With min-width:0 the
nav scrolls inside the bar, as its own overflow-x:auto always meant it to. */
.appbar { min-width: 0; }
/* ---- Comments on his posts (docs/specs/COMMENT_REPLIES.md) -------------------- */
/* Which posts and which days: wraps to two or three rows on a phone. */
.cm-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin: -6px 0 10px; }
.cm-filters .cm-filter { margin: 0; flex: 0 1 auto; min-width: 0; gap: 4px; }
.cm-filters .cm-filter[hidden] { display: none; }
.cm-filters .field-label { font-size: 11.5px; }
.cm-filters select, .cm-filters input[type="date"] { width: auto; min-width: 0; max-width: 100%; padding: 8px 34px 8px 11px; font-size: 13px; }
.cm-filters input[type="date"] { padding-right: 11px; }
.cm-more-row { display: flex; justify-content: center; margin: 4px 0 18px; }
.cm-more-row .btn[hidden] { display: none; }
.cm-post {
border: 1px solid var(--line, #e2e8f0); border-radius: 10px; padding: 10px 12px; margin: 0 0 10px;
background: var(--card, #ffffff); min-width: 0;
}
.cm-post__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--ink-soft, #5b6b7b); }
.cm-post__when { font-weight: 600; }
.cm-post__open { margin-left: auto; }
.cm-post__title { font-weight: 700; font-size: 14px; margin: 4px 0 6px; color: var(--ink, #1b2733); overflow-wrap: anywhere; }
.cm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cm-comment { border-left: 3px solid var(--line, #e2e8f0); padding: 4px 0 4px 10px; min-width: 0; }
.cm-comment--mine { border-left-color: var(--blue-fill, #0a66c2); }
.cm-comment--none { color: var(--ink-soft, #5b6b7b); font-size: 12.5px; }
.cm-comment--reply { margin-left: 22px; }
.cm-comment__meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; font-size: 12px; }
.cm-comment__who { font-weight: 700; }
.cm-comment__ago { color: var(--ink-soft, #5b6b7b); }
.cm-comment__text { font-size: 13px; margin-top: 2px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink, #1b2733); }
.cm-badge {
font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 999px;
background: var(--blue-fill, #0a66c2); color: #fff;
}
.cm-more-note { margin: 0 0 10px; }
.cm-post__unseen { font-size: 12px; margin: 0 0 6px; color: var(--ink-soft, #5b6b7b); }
.cm-reply { margin: 6px 0 2px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2, #f1f5f9); min-width: 0; }
.cm-reply__status { margin: 0; font-size: 12px; color: var(--ink-soft, #5b6b7b); }
.cm-reply__status--ok { color: var(--ink, #1b2733); font-weight: 600; }
.cm-reply__sent { font-size: 13px; margin-top: 2px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink, #1b2733); }
.cm-reply__hold { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--ink, #1b2733);
border-left: 3px solid var(--badge-amber, #b7791f); padding-left: 8px; }
.cm-reply__text { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; resize: vertical; min-height: 64px; }
.cm-reply__sources { margin: 4px 0 0; font-size: 12px; color: var(--ink-soft, #5b6b7b); overflow-wrap: anywhere; }
.cm-reply__error { margin: 4px 0 0; font-size: 12px; color: var(--red, #b42318); }
/* Not seen whole: his answer may be in the part of the thread the public page hides. */
.cm-reply--checking { border-left: 3px solid var(--badge-amber, #b7791f); }
.cm-reply__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cm-reply__reaction { width: auto; font-size: 12px; }
.cm-auto__box { border: 1px solid var(--line, #e2e8f0); border-radius: 10px; padding: 8px 12px; margin: 0 0 10px; background: var(--card, #ffffff); }
.cm-auto__box.is-on { border-color: var(--blue-fill, #0a66c2); }
.cm-auto__switch { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; cursor: pointer; }
.cm-auto__switch input { width: auto; margin: 0; }
.cm-auto__rule { margin: 4px 0 0; font-size: 12px; color: var(--ink-soft, #5b6b7b); }
.cm-auto__status { margin: 4px 0 0; font-size: 12.5px; color: var(--ink, #1b2733); }
/* ---- Accounts on a phone: its title and three Connect buttons did not wrap, so the row made the page wider
than the screen and it scrolled sideways (audit 2026-10-03, V2). The buttons go under the title instead. */
@media (max-width: 640px) {
[data-view-panel="accounts"] > .section-head { flex-wrap: wrap; row-gap: 8px; }
[data-view-panel="accounts"] > .section-head .spacer { flex: 0 0 100%; }
}
/* ---- Engagement: Pull (owner, 2026-10-03: "add a tab like pull … Pull should show progress % (0%-->100%)") ----
Pull beside Refresh; under the buttons the bar that follows it (the percent, what Studio is doing, its
three steps), then the line of what came in; Refresh's quiet line under that. web/comments.js "Pull". */
/* On a phone Pull sits on the title's line and the other two go on the next, so "Pulling… 100%" (125 px)
never pushes a button onto a line of its own, from under his finger (seen at 390 px: the three need 363). */
[data-view-panel="engagement"] > .section-head { flex-wrap: wrap; row-gap: 8px; }
@media (max-width: 640px) {
[data-view-panel="engagement"] > .section-head { row-gap: 4px; }
[data-view-panel="engagement"] > .section-head h2 { flex: 1 1 auto; }
[data-view-panel="engagement"] > .section-head .eg-pullbtn { order: 1; }
[data-view-panel="engagement"] > .section-head .spacer { order: 2; flex: 0 0 100%; }
[data-view-panel="engagement"] > .section-head #cm-import { order: 3; margin-left: auto; }
[data-view-panel="engagement"] > .section-head #cm-refresh { order: 3; }
}
.eg-pullbtn { padding: 8px 16px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
/* Pulling: the button says how far it is, so it stays readable (a disabled button is faded otherwise). */
.btn.eg-pullbtn:disabled {
opacity: 1; cursor: progress; background: var(--blue-fill, #0a66c2); border-color: var(--blue-fill, #0a66c2); color: #fff;
}
.eg-pull {
margin: -6px 0 12px; padding: 10px 12px; min-width: 0;
border: 1px solid var(--line, #e2e8f0); border-radius: 10px; background: var(--card, #ffffff);
}
.eg-pull[hidden], .eg-pull [hidden], .eg-fresh[hidden] { display: none; }
.eg-pull__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; font-size: 13px; min-width: 0; }
.eg-pull__pct { font-weight: 700; color: var(--ink, #1b2733); font-variant-numeric: tabular-nums; }
.eg-pull__doing { color: var(--ink-soft, #5b6b7b); overflow-wrap: anywhere; min-width: 0; }
/* The groove in --line, the fill in --blue (lifted in the dark theme): 4.7:1 light, 3.8:1 dark. */
.eg-pull__track { height: 8px; margin: 6px 0 8px; border-radius: 999px; background: var(--line, #e2e8f0); overflow: hidden; }
.eg-pull__fill { height: 100%; width: 0; border-radius: 999px; background: var(--blue, #0a66c2); transition: width .4s ease; }
@media (prefers-reduced-motion: reduce) { .eg-pull__fill { transition: none; } }
.eg-pull__steps {
list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px;
font-size: 12px; color: var(--ink-soft, #5b6b7b);
}
.eg-pull__step { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; min-width: 0; }
.eg-pull__mark { flex: 0 0 1em; text-align: center; }
.eg-pull__count { font-variant-numeric: tabular-nums; }
.eg-pull__step.is-running { color: var(--ink, #1b2733); font-weight: 600; }
.eg-pull__step.is-done .eg-pull__mark { color: var(--green, #157347); }
.eg-pull__step.is-failed { color: var(--red, #b42318); }
.eg-pull__note { flex: 1 1 100%; padding-left: calc(1em + 6px); color: var(--badge-amber, #7a6000); overflow-wrap: anywhere; }
.eg-pull__line { margin: 0; font-size: 13px; color: var(--ink, #1b2733); overflow-wrap: anywhere; }
.eg-pull__steps:not([hidden]) + .eg-pull__line { margin-top: 6px; }
.eg-pull__line.is-bad { color: var(--red, #b42318); }
.eg-fresh { margin: -8px 0 12px; font-size: 12px; color: var(--ink-soft, #5b6b7b); }
/* ---- Engagement (the Comments tab until 2026-10-01, docs/specs/ENGAGEMENT_TAB.md) ------------- */
/* What to show: Needs you · Comments · Reposts · On their posts · All (one at a time). */
.eg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; }
.eg-chip {
display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 5px 12px; cursor: pointer;
border: 1px solid var(--line, #e2e8f0); border-radius: 999px; background: var(--card, #ffffff);
color: var(--ink, #1b2733); font: inherit; font-size: 13px; font-weight: 600;
}
.eg-chip:hover { border-color: var(--blue-fill, #0a66c2); }
.eg-chip.is-on { background: var(--blue-fill, #0a66c2); border-color: var(--blue-fill, #0a66c2); color: #fff; }
.eg-chip__n {
font-size: 11px; font-weight: 700; min-width: 18px; padding: 0 6px; border-radius: 999px; line-height: 18px; text-align: center;
background: var(--blue-fill, #0a66c2); color: #fff;
}
/* On the chosen chip the count turns white on blue's reverse: blue on white, 5.4:1 or better. */
.eg-chip.is-on .eg-chip__n { background: #fff; color: var(--blue-fill, #0a66c2); }
.eg-chip__n[hidden], #eg-theirs[hidden], .eg-warm[hidden] { display: none; }
/* The Engagement tab's count in the top bar (navy in both themes): what waits for him. */
.appnav .nav-badge {
font-size: 11px; font-weight: 700; min-width: 18px; padding: 0 5px; border-radius: 999px; line-height: 18px; text-align: center;
background: #f5c451; color: #1b2733;
}
.appnav .nav-badge[hidden] { display: none; }
/* Icons only (900 px and under): the count sits on the icon's corner, so the tab keeps its width
and stays in view where the row scrolls (seen at 390 px: inline, it was cut off at the edge). */
@media (max-width: 900px) {
.appnav .nav-badge { position: absolute; top: 1px; right: 0; min-width: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; }
}
/* Who engaged most, 14 days: a line of names under the filters. */
.eg-warm { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: -2px 0 10px; font-size: 12.5px; }
.eg-warm__label { font-weight: 700; color: var(--ink-soft, #5b6b7b); }
.eg-warm__chip {
display: inline-flex; align-items: center; gap: 6px; padding: 2px 3px 2px 10px; border-radius: 999px; max-width: 100%;
border: 1px solid var(--line, #e2e8f0); background: var(--card, #ffffff); color: var(--ink, #1b2733); font-weight: 600; text-decoration: none;
}
.eg-warm__chip:hover { border-color: var(--blue-fill, #0a66c2); text-decoration: none; }
.eg-warm__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.eg-warm__n {
flex: 0 0 auto; font-size: 11px; font-weight: 700; min-width: 18px; padding: 0 6px; border-radius: 999px; line-height: 18px; text-align: center;
background: var(--surface-2, #f1f5f9); color: var(--ink, #1b2733); border: 1px solid var(--line, #e2e8f0);
}
/* On a phone: one line that scrolls sideways, not four rows of names above his posts. */
@media (max-width: 640px) {
.eg-warm { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.eg-warm::-webkit-scrollbar { display: none; }
.eg-warm__label, .eg-warm__chip { flex: 0 0 auto; }
}
/* The two switches side by side; one above the other on a phone. */
.cm-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; margin: 0 0 10px; }
.cm-auto:empty { display: none; }
.cm-auto .cm-auto__box { margin: 0; }
/* On a phone the two boxes stood a screen tall above his posts: there each says only whether it is
on and what comes next; the pace is in the question asked before it turns on. */
@media (max-width: 640px) {
.cm-auto .cm-auto__rule { display: none; }
}
/* Needs you and All: "On your posts", then "On their posts". */
.eg-sec { margin: 6px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft, #5b6b7b); }
#eg-theirs { margin-top: 6px; }
.eg-err { margin: 0 0 10px; }
/* Who reposted one of his posts, under its comments. */
.rp--after { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line, #e2e8f0); }
.rp__head { margin: 0 0 6px; font-size: 12px; font-weight: 700; color: var(--ink-soft, #5b6b7b); }
.rp__more { margin: 6px 0 0; font-size: 12px; color: var(--ink-soft, #5b6b7b); }
.rp-item--waits { border-left-color: var(--badge-amber, #7a6000); }
.rp-badge { font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 999px; border: 1px solid var(--line, #e2e8f0); color: var(--ink-soft, #5b6b7b); }
.rp-badge--first { background: var(--blue-fill, #0a66c2); border-color: var(--blue-fill, #0a66c2); color: #fff; }
.rp-plain { font-size: 12.5px; margin-top: 2px; color: var(--ink-soft, #5b6b7b); font-style: italic; }
.rp-note { margin-bottom: 6px; }
.rp-part { margin: 0 0 6px; min-width: 0; }
.rp-part:last-of-type { margin-bottom: 0; }
.rp-part__label { display: block; margin-bottom: 2px; font-size: 11.5px; font-weight: 700; color: var(--ink-soft, #5b6b7b); }
.rp-box .btn[hidden], .rp-box .cm-reply__error[hidden] { display: none; }
.fu-card--needs { border-color: var(--badge-amber, #7a6000); }
.fu-who { font-weight: 700; font-size: 13px; color: var(--ink, #1b2733); }
.fu-headline { font-size: 12px; color: var(--ink-soft, #5b6b7b); margin-top: 2px; overflow-wrap: anywhere; }
/* Their post's opening: three lines at most, the rest is on LinkedIn. */
.fu-excerpt {
font-size: 12.5px; color: var(--ink-soft, #5b6b7b); margin: 6px 0 8px; white-space: pre-wrap; overflow-wrap: anywhere;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.fu-badge {
font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 999px;
border: 1px solid var(--line, #e2e8f0); background: var(--surface-2, #f1f5f9); color: var(--ink, #1b2733);
}
.fu-waits { font-size: 11.5px; font-weight: 700; color: var(--badge-amber, #7a6000); }
.cm-comment.fu-msg--waiting { border-left-color: var(--badge-amber, #7a6000); }
.fu-draft { padding: 2px 0; }
.fu-answer .btn[hidden] { display: none; }
.fu-reads { margin: 6px 0 0; font-size: 12px; color: var(--ink-soft, #5b6b7b); }
/* Select all · Deselect all · Send all checked (release 324): under the people filter, over the rows it shows, and the
batch's line with Stop while it goes; a Check box on the first line of each row that can go now (a 24 px target, 44 on
a phone). Theme tokens only. */
.eg-select { margin: 0 0 12px; min-width: 0; }
.eg-select__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.eg-select .pf-run { margin: 8px 0 0; }
/* While he searches every date, Select all steps aside with the bar (its list is out of sight); a batch going keeps its
line and Stop on screen, at the top of the toolbar. */
.eg-select__row[hidden] { display: none; }
.eg-select .eg-select__row[hidden] + .pf-run { margin-top: 0; }
.eg-pick {
display: inline-flex; flex: 0 0 auto; align-self: center; align-items: center; justify-content: center;
min-width: 24px; min-height: 24px; margin: -4px -2px -4px -6px; cursor: pointer;
}
.eg-pick__box { width: 16px; height: 16px; margin: 0; cursor: pointer; accent-color: var(--blue); }
.eg-pick__box:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (max-width: 640px) {
.eg-pick { min-width: 44px; min-height: 44px; margin: -12px -10px -12px -14px; }
}
/* ---- Search, right of the chips (owner, 2026-10-02: "search for all past, present comments in my
post or tagged done to anyone here. so that we can quickly go back and correct") --------------- */
.eg-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: -4px 0 12px; }
.eg-bar .eg-chips { margin: 0; min-width: 0; }
.eg-search { position: relative; margin-left: auto; flex: 0 1 320px; min-width: 220px; }
.eg-search .eg-search__input { padding: 7px 34px 7px 12px; font-size: 13px; min-height: 34px; border-radius: 999px; background: var(--card, #ffffff); }
.eg-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.eg-search__clear {
position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: 0; border-radius: 999px;
background: transparent; color: var(--ink-soft, #5b6b7b); font: inherit; font-size: 18px; line-height: 1; cursor: pointer;
}
.eg-search__clear:hover, .eg-search__clear:focus-visible { background: var(--surface-2, #f1f5f9); color: var(--ink, #1b2733); }
.eg-search__clear[hidden] { display: none; }
/* On a phone: the box on a line of its own, the whole width. */
@media (max-width: 640px) {
.eg-search { flex: 1 1 100%; margin-left: 0; min-width: 0; }
}
/* While he searches no chip is chosen: the search covers them all, and a chip brings its view back. */
.eg-searching .eg-chip.is-on { background: var(--card, #ffffff); border-color: var(--line, #e2e8f0); color: var(--ink, #1b2733); }
.eg-searching .eg-chip.is-on .eg-chip__n { background: var(--blue-fill, #0a66c2); color: #fff; }
/* While he searches, the results take the place of the chips' view (left as it was, under them). */
.eg-searching .cm-filters, .eg-searching #eg-warm, .eg-searching #cm-note, .eg-searching #cm-auto,
.eg-searching #cm-list, .eg-searching .cm-more-row, .eg-searching #eg-theirs { display: none; }
.eg-results[hidden] { display: none; }
.eg-res-sum { margin: 0 0 10px; font-size: 12.5px; color: var(--ink-soft, #5b6b7b); }
.eg-res-sum:empty { display: none; }
.eg-res-group { margin: 0 0 16px; min-width: 0; }
.eg-res-n {
display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 2px; border-radius: 999px; line-height: 18px; text-align: center;
font-size: 11px; letter-spacing: 0; background: var(--surface-2, #f1f5f9); color: var(--ink, #1b2733); border: 1px solid var(--line, #e2e8f0);
}
.eg-res-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.eg-res {
border: 1px solid var(--line, #e2e8f0); border-radius: 10px; padding: 10px 12px; background: var(--card, #ffffff); min-width: 0;
}
.eg-res.is-open { border-color: var(--blue-fill, #0a66c2); }
.eg-res__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-size: 12px; min-width: 0; }
.eg-res__who { font-weight: 700; font-size: 13.5px; color: var(--ink, #1b2733); overflow-wrap: anywhere; }
a.eg-res__who:hover { color: var(--blue, #0a66c2); }
.eg-res__state {
font-size: 11px; font-weight: 700; padding: 0 7px; border-radius: 999px; line-height: 18px;
border: 1px solid var(--line, #e2e8f0); color: var(--ink-soft, #5b6b7b); background: var(--surface-2, #f1f5f9);
}
.eg-res__state--ok { color: var(--green, #157347); border-color: var(--green-line, #b6e0c5); background: var(--green-tint, #e6f5ec); }
.eg-res__state--wait { color: var(--badge-amber, #7a6000); border-color: var(--amber-line, #f1dd9a); background: var(--amber-tint, #fff6da); }
.eg-res__state--bad { color: var(--red, #b42318); border-color: var(--red-line, #f3c4bf); background: var(--red-tint, #fdecea); }
.eg-res__tag { font-size: 11px; padding: 0 6px; border-radius: 999px; line-height: 18px; border: 1px solid var(--line, #e2e8f0); color: var(--ink-soft, #5b6b7b); }
.eg-res__when { margin-left: auto; color: var(--ink-soft, #5b6b7b); white-space: nowrap; }
.eg-res__post { margin-top: 3px; font-size: 12px; color: var(--ink-soft, #5b6b7b); overflow-wrap: anywhere; }
.eg-res__title { font-weight: 600; color: var(--ink, #1b2733); }
a.eg-res__title:hover { color: var(--blue, #0a66c2); }
.eg-res__text { margin-top: 6px; font-size: 13px; color: var(--ink, #1b2733); white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.eg-res__text--ours { border-left: 3px solid var(--blue-fill, #0a66c2); padding-left: 8px; }
.eg-res__label { display: block; margin-bottom: 1px; font-size: 11.5px; font-weight: 700; color: var(--ink-soft, #5b6b7b); white-space: normal; }
.eg-res__body .cm-reply__hold { margin: 6px 0 0; }
.eg-res__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.eg-res__actions:empty { display: none; }
.eg-res__fix { margin-top: 8px; min-width: 0; }
.eg-res__fix[hidden] { display: none; }
.eg-res__fix .cm-post { margin: 0; }
/* The card open under it says it all, as it is now: the result's own lines step aside. */
.eg-res.is-open .eg-res__body, .eg-res.is-open .eg-res__state { display: none; }
.eg-res-more { margin-top: 8px; }
/* The words searched for: a marker that reads in both themes (11:1 light, 6.9:1 dark). */
mark.eg-hit { background: var(--amber-line, #f1dd9a); color: var(--ink, #1b2733); border-radius: 2px; padding: 0 1px; }
/* ---- filter the calendar by DESTINATION -------------------------------------
Owner ask 2026-09-21: "for the Connected Pages, it should show a options in
the Calendar tab to select (click to activate, click to deactivate) so that
only that page's related post will be shown. For disconnected page, it can be
shown as dimmed."
Two lines under the status/platform legend, not a box of their own: brands
first (one chip covering a brand's Page AND its Instagram account), then the
Pages themselves. A disconnected destination is DIMMED, never hidden — the
posts that went there are real and still worth finding.
Every colour here is a theme token, so the dark theme follows without a
second rule. Brand hexes are set inline from PLATFORM_MARKS and only ever on
the little monogram, which carries its own white ink. */
.cal-dests {
display: flex; flex-direction: column; gap: 4px;
padding: 0 2px 8px; margin-top: -2px;
}
.cal-dests-row {
display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
min-width: 0;
}
.cal-dests-label {
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: .04em; color: var(--ink-faint, #5c6873);
margin-right: 4px; flex: 0 0 auto;
}
.cal-dests-count {
font-size: 11px; color: var(--ink-faint, #5c6873); margin-left: 4px;
}
.cal-dest-chip, .cal-brand-chip {
display: inline-flex; align-items: center; gap: 6px;
max-width: 220px; padding: 2px 9px 2px 3px;
border: 1px solid var(--line, #e6ebf1); border-radius: 999px;
background: transparent; color: var(--ink-soft, #5b6b7b);
font-size: 12px; line-height: 1.6; cursor: pointer;
}
.cal-dest-chip:hover, .cal-brand-chip:hover {
border-color: var(--blue, #0a66c2); color: var(--ink, #1b2733);
}
.cal-dest-chip.is-active, .cal-brand-chip.is-active {
border-color: var(--blue, #0a66c2); color: var(--ink, #1b2733);
background: var(--blue-tint, #eaf3fc); font-weight: 600;
}
/* Half-on: some of this brand's destinations are picked, not all. A dashed ring
rather than a paler fill — a paler fill of a tint is indistinguishable from
"off" on both themes, which is exactly what the state must not look like. */
.cal-brand-chip.is-partial {
border-color: var(--blue, #0a66c2); border-style: dashed;
color: var(--ink, #1b2733); font-weight: 600;
}
.cal-dest-chip__name, .cal-brand-chip__name {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-dest-chip__mark {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 18px; padding: 0 5px; border-radius: 5px;
color: #fff; font-size: 10px; font-weight: 700; line-height: 1;
flex: 0 0 auto;
}
.cal-brand-chip { padding-left: 9px; }
.cal-brand-chip__dot { font-size: 9px; color: var(--blue, #0a66c2); flex: 0 0 auto; }
/* DISCONNECTED. Dimmed and struck through, matching how the Accounts screen
already draws the same Page — one visual language for one fact. It stays
clickable: its history is still worth filtering to. The monogram loses its
brand colour, because the colour is what says "live". */
.cal-dest-chip.is-off, .cal-brand-chip.is-off { opacity: .55; border-style: dashed; }
.cal-dest-chip.is-off .cal-dest-chip__name { text-decoration: line-through; }
.cal-dest-chip.is-off .cal-dest-chip__mark {
background: transparent; color: var(--ink-faint, #5c6873);
border: 1px solid var(--line, #e6ebf1);
}
.cal-dest-chip.is-off:hover, .cal-brand-chip.is-off:hover { opacity: 1; }
.cal-dest-chip.is-off.is-active { opacity: 1; }
.cal-dest-chip.is-clear {
padding: 2px 9px; color: var(--ink-faint, #5c6873); border-style: dashed;
}
.cal-dest-more { padding: 2px 9px; font-weight: 600; }
/* ---- the "+N" picker -------------------------------------------------------
Every destination, including the ones with nothing scheduled this period. */
.cal-dest-picker {
position: absolute; z-index: 60; min-width: 260px; max-width: 320px;
max-height: 60vh; overflow-y: auto;
background: var(--card, #fff); color: var(--ink, #1b2733);
border: 1px solid var(--line, #e6ebf1); border-radius: 10px;
box-shadow: var(--shadow-lg, 0 18px 60px rgba(16,24,40,.18));
padding: 8px 0;
}
.cal-dest-picker__head {
display: flex; align-items: center; gap: 8px; padding: 2px 12px 8px;
border-bottom: 1px solid var(--line-soft, #eff2f6); margin-bottom: 6px;
}
.cal-dest-picker__title { font-size: 12px; font-weight: 700; }
.cal-dest-picker__group {
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: .04em; color: var(--ink-faint, #5c6873);
padding: 8px 12px 2px;
}
.cal-dest-picker__row {
display: flex; align-items: center; gap: 8px; padding: 5px 12px;
font-size: 13px; cursor: pointer;
}
.cal-dest-picker__row:hover { background: var(--surface-soft, #fbfdff); }
.cal-dest-picker__name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-dest-picker__tag {
font-size: 10px; color: var(--ink-faint, #5c6873);
border: 1px solid var(--line, #e6ebf1); border-radius: 999px; padding: 0 6px;
flex: 0 0 auto;
}
.cal-dest-picker__row.is-off .cal-dest-picker__name {
opacity: .6; text-decoration: line-through;
}
.cal-dest-picker__empty { padding: 10px 12px; font-size: 13px; color: var(--ink-faint, #5c6873); }
/* ---- a post still aimed at a disconnected destination -----------------------
Disconnecting a Page does not unschedule the posts aimed at it — the
publisher will simply SKIP it when the slot arrives, silently. The badge goes
dim and struck, and the strip gains one ⚠ that names what will be skipped, so
it is caught while there is still time to fix it. */
.plat-badge.is-off { opacity: .5; border-style: dashed; text-decoration: line-through; }
.plat-badge.is-warn {
color: var(--amber, #8a6d00); border-color: var(--amber-line, #f1dd9a);
background: var(--amber-tint, #fff6da); font-weight: 700; cursor: help;
}
/* Inside a calendar pill the strip inherits the pill's ink (see above); the
warning must not inherit it away into invisibility, so it keeps its own
surface and sets its own ink against it. */
.plat-badges.is-compact .plat-badge.is-warn {
color: var(--amber, #8a6d00); border-color: var(--amber-line, #f1dd9a);
background: var(--amber-tint, #fff6da); opacity: 1;
}
/* The tail of an account id (or the word "default"), pinned beside a name that
may be truncated. It is what tells two same-named Pages apart, so it must
never be the part the ellipsis eats. */
.cal-dest-chip__id {
flex: 0 0 auto; font-size: 10px; font-variant-numeric: tabular-nums;
color: var(--ink-faint, #5c6873);
border: 1px solid var(--line, #e6ebf1); border-radius: 999px;
padding: 0 5px; margin-left: -2px;
}
.cal-dest-chip.is-active .cal-dest-chip__id { color: var(--ink, #1b2733); }
/* ---- default closing text, one row per destination --------------------------
Collapsed until it has something in it: ten open textareas is a wall, ten
lines showing the two that are set is a list you can read. */
.sig-row {
border: 1px solid var(--line, #e6ebf1); border-radius: 10px;
padding: 0 12px; margin-bottom: 8px; background: var(--surface-soft, #fbfdff);
}
.sig-row[open] { padding-bottom: 12px; }
.sig-row__head {
display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
padding: 10px 0; cursor: pointer; list-style: none;
}
.sig-row__head::-webkit-details-marker { display: none; }
.sig-row__head::before {
content: '\25b8'; color: var(--ink-faint, #5c6873); font-size: 11px; flex: 0 0 auto;
}
.sig-row[open] .sig-row__head::before { content: '\25be'; }
.sig-row__title { font-weight: 600; color: var(--ink, #1b2733); }
.sig-row__sub { font-size: 12px; color: var(--ink-faint, #5c6873); }
.sig-row__tag {
font-size: 11px; color: var(--ink-faint, #5c6873); max-width: 320px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
border: 1px dashed var(--line, #e6ebf1); border-radius: 999px; padding: 1px 8px;
}
.sig-row__tag.is-set {
color: var(--ink, #1b2733); border-style: solid; border-color: var(--blue, #0a66c2);
background: var(--blue-tint, #eaf3fc);
}
/* A disconnected Page keeps its row — the text is still worth writing for when
it comes back — but says what it is, the same way every other surface does. */
.sig-row.is-off .sig-row__title { opacity: .6; text-decoration: line-through; }
.sig-row__text {
width: 100%; box-sizing: border-box; font: inherit; line-height: 1.5;
padding: 10px; border-radius: 8px;
border: 1px solid var(--line, #e6ebf1);
background: var(--card, #fff); color: var(--ink, #1b2733);
resize: vertical;
}
.sig-row__cta { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; }
.sig-row__count { margin-left: 8px; }
/* The three tiers, named. The same name can sit at two of them — a brand and
one of its Pages — and without a heading that reads as a duplicate rather
than as two different answers to two different questions. */
.sig-group {
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: .04em; color: var(--ink-faint, #5c6873);
margin: 14px 0 6px 2px;
}
.sig-group:first-child { margin-top: 4px; }
/* ---- add or drop the closing text, per post ---------------------------------
Sits with the publish controls because that is the question it answers:
where this post goes and what it ends with. Hidden entirely when no closing
text applies to those destinations. */
.cmp-closing { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cmp-closing-lab { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.cmp-closing-size {
font-size: 10px; color: var(--ink-faint, #5c6873);
border: 1px solid var(--line, #e6ebf1); border-radius: 999px; padding: 0 6px;
}
.cmp-closing-peek {
max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
cursor: help;
}
/* Turned off for this post: say so plainly rather than leaving an unticked box
to be noticed. */
.cmp-closing.is-off .cmp-closing-name { opacity: .7; }
.cmp-closing.is-off .cmp-closing-peek { color: var(--amber, #8a6d00); }
/* The free queue says when it is PAUSED, and why (2026-09-26). For six hours the
drafter was refused by the account while this panel read "starting · 35 min"
like any other line; a pause has to look different from progress. */
.cmp-queue-summary.is-paused { color: var(--amber, #b45309); font-weight: 700; }
.cmp-queue-line.is-failed { color: var(--red, #b91c1c); }
/* Studio notes on a calendar post: whether "Make it mine" has rewritten it yet,
and where it came from (2026-09-26). Styled apart from the LinkedIn-look card
because neither of these publishes. */
.li-studio-notes { display: grid; gap: 4px; margin: -4px -4px 10px; padding: 8px 10px; border-radius: 8px;
background: var(--surface-soft, rgba(100,116,139,.08)); font-size: 12px; }
.ev-hover__flag { font-size: 12px; font-weight: 700; color: var(--amber, #b45309); margin: 2px 0 4px; }
.ev-hover__flag.is-failed { color: var(--red, #b91c1c); }
.ev-source { font-size: 12px; color: var(--ink-soft, #475569); }
.ev-source a { font-weight: 700; }
.ev-flag { margin-right: 3px; }
/* ---- Writers page (2026-09-26): writers feeding brands, and the approval list ---- */
[data-view-panel="writers"] .card { margin-bottom: 16px; }
.wr-item { border: 1px solid var(--line, #d8dee6); border-radius: 10px; padding: 12px 14px; margin: 10px 0; display: grid; gap: 6px; }
.wr-item__text { white-space: pre-wrap; font-size: 13px; line-height: 1.45; max-height: 16em; overflow: auto;
padding: 8px 10px; border-radius: 8px; background: var(--surface-soft, rgba(100,116,139,.08)); }
/* ==== WRITERS: sub-tabs, and the Drafts tab's three columns (owner, 2026-10-03) ================
On a screenshot of #/writers: "The section in this tabs should be broked into three sub tabs" —
Drafts for you to decide · Groups · What the server did, and why — under the title and the
status line, built like Network's (a line under the row, the tab shown underlined, its count in
a small pill, the row scrolling sideways inside itself on a phone, never the page).
The Drafts tab (.wr-layout, data-cols set by web/writers.js from the window's width):
3 (1400 px and wider): the drafts, then When published, then the original;
2 (1000-1399 px): the drafts, and one of the two with a switch above it (remembered);
1 (narrower): one column as before, each draft's When published folded under its controls.
Both columns on the right stay in view while the drafts scroll, each scrolling inside itself.
Every colour a theme token; LinkedIn's embed of the original is white in either theme. */
/* contain: the row's own width never widens the page (its tabs scroll inside it instead). */
.wr-tabs { display: flex; align-items: stretch; gap: 2px; margin: -6px 0 16px; border-bottom: 1px solid var(--line); contain: inline-size;
overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.wr-tabs::-webkit-scrollbar { display: none; }
.wr-tab { position: relative; display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; margin: 0 0 -1px; padding: 10px 12px 9px;
border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; font: inherit; font-size: 13.5px; font-weight: 600;
line-height: 1.25; color: var(--ink-soft); white-space: nowrap; cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast); }
.wr-tab:hover { color: var(--ink); border-bottom-color: var(--line); }
.wr-tab[aria-selected="true"], .wr-tab[aria-selected="true"]:hover { color: var(--ink); border-bottom-color: var(--blue); }
.wr-tab:focus-visible { outline: 2px solid var(--blue); outline-offset: -3px; border-radius: 6px; }
.wr-tab__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px;
border-radius: 999px; background: var(--slate-tint); box-shadow: inset 0 0 0 1px var(--slate-line); color: var(--ink);
font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.wr-tab[aria-selected="true"] .wr-tab__badge { background: var(--blue-fill); box-shadow: none; color: var(--ink-invert); }
.wr-tab__badge[hidden] { display: none; }
@media (max-width: 640px) { .wr-tab { padding: 10px 10px 9px; font-size: 13px; } }
@media (min-width: 1000px) {
main .view[data-view-panel="writers"] { max-width: 1680px; padding-inline: 24px; } /* beats the 1360px cap (studio-v2.css M100); a gutter where it fills the window */
}
[data-view-panel="writers"] .wr-layout[data-cols="3"]:not([hidden]) { display: grid; align-items: start; column-gap: 16px;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); }
[data-view-panel="writers"] .wr-layout[data-cols="3"] .wr-side:not([hidden]) { display: contents; }
[data-view-panel="writers"] .wr-layout[data-cols="3"] .wr-side__switch { display: none; }
[data-view-panel="writers"] .wr-layout[data-cols="3"] .wr-pub:not([hidden]),
[data-view-panel="writers"] .wr-layout[data-cols="3"] .wr-preview:not([hidden]) { position: sticky; top: var(--topbar-h, 64px);
height: calc(100vh - var(--topbar-h, 64px) - 16px); min-height: 420px; }
[data-view-panel="writers"] .wr-layout[data-cols="2"]:not([hidden]) { display: grid; align-items: start; column-gap: 16px;
grid-template-columns: minmax(0, 1fr) clamp(360px, 40vw, 540px); }
[data-view-panel="writers"] .wr-layout[data-cols="2"] .wr-side:not([hidden]) { display: flex; flex-direction: column; gap: 8px;
position: sticky; top: var(--topbar-h, 64px); height: calc(100vh - var(--topbar-h, 64px) - 16px); min-height: 420px; }
[data-view-panel="writers"] .wr-layout[data-cols="2"] .wr-pub:not([hidden]),
[data-view-panel="writers"] .wr-layout[data-cols="2"] .wr-preview:not([hidden]) { flex: 1 1 auto; min-height: 0; }
.wr-pub:not([hidden]), .wr-preview:not([hidden]) { display: flex; flex-direction: column; border: 1px solid var(--line, #d8dee6);
border-radius: 12px; background: var(--card, #fff); overflow: hidden; }
[data-view-panel="writers"] .wr-layout[hidden], [data-view-panel="writers"] .wr-tabpanel[hidden], [data-view-panel="writers"] .wr-side[hidden],
[data-view-panel="writers"] .wr-pub[hidden], [data-view-panel="writers"] .wr-preview[hidden],
[data-view-panel="writers"] .wr-layout[data-cols="1"] .wr-side { display: none; }
/* The switch above the right column, 1000-1399 px: When published | Original. */
.wr-side__switch { flex: 0 0 auto; display: inline-flex; align-self: flex-start; gap: 2px; padding: 2px;
border: 1px solid var(--line, #d8dee6); border-radius: 8px; background: var(--card, #fff); }
.wr-side__opt { border: 0; border-radius: 6px; background: transparent; color: var(--ink-soft, #475569);
font: inherit; font-size: 13px; font-weight: 600; padding: 5px 12px; cursor: pointer; }
.wr-side__opt:hover { color: var(--ink, #0f172a); }
.wr-side__opt.is-on { background: var(--blue-fill, #0a66c2); color: var(--ink-invert, #fff); }
.wr-side__opt:focus-visible { outline: 2px solid var(--blue, #0a66c2); outline-offset: 2px; }
/* When published: the draft he is on, as LinkedIn will show it (web/post-preview.js draws it). */
.wr-pub__head { display: grid; gap: 2px; padding: 10px 14px; border-bottom: 1px solid var(--line, #d8dee6); font-size: 12.5px; }
.wr-pub__title { font-weight: 700; color: var(--ink, #0f172a); }
.wr-pub__meta { color: var(--ink-soft, #475569); }
.wr-pub__body { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; padding: 14px 12px 18px; background: var(--bg, #eef1f6); }
.wr-pub__empty { padding: 24px; text-align: center; font-size: 13px; color: var(--ink-soft, #475569); }
.wr-pub__empty[hidden] { display: none; }
/* One column: each draft's When published, folded under its controls until he opens it. */
.wr-pubfold { border: 1px solid var(--line, #d8dee6); border-radius: 8px; margin-top: 8px; }
.wr-pubfold > summary { cursor: pointer; padding: 7px 10px; font-size: 13px; font-weight: 600; color: var(--ink-soft, #475569); }
.wr-pubfold > summary:hover { color: var(--ink, #0f172a); }
.wr-pubfold[open] > summary { border-bottom: 1px solid var(--line, #d8dee6); }
.wr-pubfold__body { padding: 12px 10px; background: var(--bg, #eef1f6); border-radius: 0 0 8px 8px; }
[data-view-panel="writers"] .wr-layout:not([data-cols="1"]) .wr-pubfold { display: none; }
/* The plain card, while web/post-preview.js is not on the page. */
.wr-pubcard { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid var(--line, #d8dee6); border-radius: 10px;
background: var(--card, #fff); color: var(--ink, #0f172a); }
.wr-pubcard__head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wr-pubcard__photo { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: inline-flex;
align-items: center; justify-content: center; background: var(--slate-tint, #e2e8f0); color: var(--ink, #0f172a); font-weight: 700; font-size: 15px; }
.wr-pubcard__who { display: grid; gap: 1px; min-width: 0; }
.wr-pubcard__name { font-size: 14px; }
.wr-pubcard__sub { font-size: 12px; color: var(--ink-soft, #475569); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-pubcard__text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.45; }
.wr-pubcard__media { display: block; width: 100%; max-height: 420px; object-fit: contain; border-radius: 6px; background: #000; }
.wr-pubcard__file { font-size: 13px; }
.wr-preview__head { display: grid; gap: 2px; padding: 10px 14px; border-bottom: 1px solid var(--line, #d8dee6); font-size: 12.5px; }
.wr-preview__title { font-weight: 700; color: var(--ink, #0f172a); }
.wr-preview__meta { color: var(--ink-soft, #475569); }
.wr-preview__meta a { font-weight: 700; }
/* Only LinkedIn's own embed is a white page whatever the theme (it draws dark text on white). The pane
around it, the frame before it has a post, and the "Loading…" and "Scroll to a draft…" lines follow the
theme: they were a white slab in the dark theme (audit 2026-10-03, V6). */
.wr-preview__body { position: relative; flex: 1 1 auto; min-height: 0; background: var(--card, #fff); }
.wr-preview__frame { display: block; width: 100%; height: 100%; border: 0; background: transparent; }
.wr-preview__frame[src] { background: #fff; }
.wr-preview__wait, .wr-preview__empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
padding: 24px; text-align: center; font-size: 13px; color: var(--ink-soft, #475569); background: var(--card, #fff); }
.wr-preview__wait[hidden], .wr-preview__empty[hidden] { display: none; }
.wr-item.is-previewed { border-color: var(--blue, #0a66c2); box-shadow: inset 3px 0 0 var(--blue, #0a66c2); }
/* ---- Compose: the controls on the left, the post on the right (2026-10-01) ----
Owner, on a screenshot of #/compose: "This box for Compose and all the items related to
Compose" and "This Box for Preview similar to that of …/#/writers"; the right-hand box is
"Your post, with Source tab" (web/compose.js renderPanel). The Writers split above, at the
same width: from 1200px every control keeps its order in the left column and the panel
stays in view on the right, scrolling inside itself. Narrower, nothing changes: one
column, with the source preview beside the seed box. */
.cmp-panel { display: none; }
@media (min-width: 1200px) {
#compose-view .cmp-split { display: grid; grid-template-columns: minmax(0, 1fr) clamp(400px, 30vw, 560px);
column-gap: 20px; align-items: start; }
.cmp-panel:not([hidden]) { display: flex; flex-direction: column; position: sticky; top: var(--topbar-h, 64px);
height: calc(100vh - var(--topbar-h, 64px) - 16px); min-height: 420px; border: 1px solid var(--line, #d8dee6);
border-radius: 12px; background: var(--card, #fff); overflow: hidden; }
/* The seed box's own preview is the Source tab now. */
#compose-view.cmp-has-panel .cmp-seed-preview-wrap { display: none; }
}
.cmp-panel__head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line, #d8dee6); }
.cmp-panel__tabs { flex: 0 0 auto; display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line, #d8dee6); border-radius: 8px; }
.cmp-panel__tab { border: 0; border-radius: 6px; background: transparent; color: var(--ink-soft, #475569);
font: inherit; font-size: 13px; font-weight: 600; padding: 5px 12px; cursor: pointer; }
.cmp-panel__tab:hover { color: var(--ink, #0f172a); }
.cmp-panel__tab.is-on { background: var(--blue, #0a66c2); color: #fff; }
.cmp-panel__tab:focus-visible { outline: 2px solid var(--blue, #0a66c2); outline-offset: 2px; }
.cmp-panel__meta { flex: 1 1 auto; min-width: 0; text-align: right; font-size: 12.5px; color: var(--ink-soft, #475569);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-panel__meta a { font-weight: 700; }
.cmp-panel__body { position: relative; flex: 1 1 auto; min-height: 0; }
.cmp-panel__pane { position: absolute; inset: 0; overflow: auto; }
.cmp-panel__post { padding: 14px 12px 18px; background: var(--bg, #eef1f6); }
/* LinkedIn's embed is a white page whatever the theme, like the Writers preview. */
.cmp-panel__source.is-embed { overflow: hidden; background: #fff; }
.cmp-panel__frame { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.cmp-panel__wait { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
padding: 24px; text-align: center; font-size: 13px; color: #475569; background: #fff; }
.cmp-panel__pane[hidden], .cmp-panel__frame[hidden], .cmp-panel__wait[hidden], .cmp-panel__text[hidden] { display: none; }
/* Pasted text fills the tab instead of sitting in a box inside it. */
.cmp-panel .cmp-panel__text { border: 0; border-radius: 0; max-height: none; min-height: 100%; padding: 14px 16px; }
.wr-group { border: 1px solid var(--line, #d8dee6); border-radius: 10px; padding: 12px 14px; margin: 10px 0; display: grid; gap: 8px; }
.wr-group textarea { width: 100%; font-family: var(--mono, ui-monospace, monospace); font-size: 12px; }
.wr-group input[type="number"] { width: 6em; }
.wr-decision { font-size: 12.5px; padding: 4px 0; border-bottom: 1px solid var(--line, #eef1f4); }
.wr-decision__when { color: var(--ink-faint, #64748b); }
.wr-decision.is-drafted strong { color: var(--green, #15803d); }
.wr-decision.is-not-strong strong, .wr-decision.is-same-story strong, .wr-decision.is-skipped strong { color: var(--ink-soft, #475569); }
.wr-decision.is-replaced strong, .wr-decision.is-unreadable strong { color: var(--amber, #b45309); }
/* The post card on hover is INTERACTIVE (2026-09-26): its "open the original"
link has to be clickable, and the card opens the post when clicked. */
.ev-hover.is-interactive { pointer-events: auto; cursor: pointer; }
.ev-hover.is-interactive a { cursor: pointer; }
/* One target, never split across two lines: "open the / original" wrapped, and
the middle of it was the empty gap between them (2026-09-26). */
.ev-source a { white-space: nowrap; }
.wr-decision.is-paused strong { color: var(--red, #b91c1c); }
.wr-decision.is-paused.is-cleared { opacity: .6; }
.wr-logtabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 8px; }
.wr-logtab { border: 1px solid var(--line, #cbd5e1); background: transparent; color: inherit; border-radius: 999px; padding: 3px 10px; font-size: 12.5px; cursor: pointer; }
.wr-logtab.is-on { background: var(--blue, #0a66c2); border-color: var(--blue, #0a66c2); color: #fff; }
.wr-logtabs__gap { color: var(--ink-faint, #64748b); padding: 0 2px; }
.wr-logtabs__total { margin-left: 6px; }
.wr-times { margin-top: 10px; }
.wr-times__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.wr-times__slot { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line, #cbd5e1); border-radius: 8px; padding: 2px 4px 2px 6px; }
.wr-times__slot input[type=time] { border: 0; background: transparent; color: inherit; font-size: 14px; padding: 2px; min-width: 0; }
.wr-times__rm { border: 0; background: transparent; color: var(--ink-soft, #475569); cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 6px; }
.wr-times__rm:hover { background: var(--surface-soft, #eef2f7); color: var(--red, #b91c1c); }
.wr-attr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 8px; font-size: 13px; }
.wr-attr__opt { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.wr-attr__edit { display: flex; align-items: center; gap: 6px; flex: 1 1 320px; min-width: 0; }
.wr-attr__line { flex: 1; min-width: 0; font-size: 13px; padding: 4px 8px; }
.wr-decision.is-already-drafted strong, .wr-decision.is-not-drafted strong { color: var(--ink-soft, #475569); }
.wr-decision.is-paused.is-cleared strong { color: var(--ink-soft, #475569); }
.wr-decision.is-read strong { color: var(--ink-soft, #475569); font-weight: 600; }
.wr-decision.is-first-look strong, .wr-decision.is-measured strong, .wr-decision.is-checked strong { color: var(--blue, #0a66c2); }
/* Writers: the viral judge's verdict on a card (2026-09-27). */
.wr-viral { font-size: 13px; color: var(--ink-soft); margin: 6px 0 0; }
.wr-viral.is-pass { color: var(--ink); font-weight: 600; }
/* ---- Guide me: Edit a draft opener (owner, 2026-10-02: "Give options to Edit the drafted
message ... minor edit makes the draft reply much more personals") ----
The opener becomes a box in place, as tall as its words; an edited one carries a blue edge
and a line of its own, "Edited · Reset to Studio's draft", so Send · Edit · Copy stay on one
row in the narrow rail. Theme tokens only: the dark theme follows on its own. */
.np-opener [hidden] { display: none; }
.np-openers .np-opener.is-edited { border-color: var(--blue); box-shadow: inset 3px 0 0 var(--blue); }
.np-opener-edit { display: block; width: 100%; box-sizing: border-box; min-height: 0; margin: 0 0 8px; padding: 8px 10px;
font-size: 13.5px; line-height: 1.5; resize: none; overflow: hidden; }
.np-opener-mark { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin: -2px 0 6px; }
.np-opener-edited { padding: 1px 9px; border: 1px solid var(--blue); border-radius: var(--radius-pill);
background: var(--blue-tint); color: var(--ink); font-size: 11.5px; font-weight: 700; line-height: 1.6; }
.np-opener-reset { min-height: 24px; padding: 2px 0; border: 0; background: none; color: var(--blue); font: inherit;
font-size: 12.5px; font-weight: 600; cursor: pointer; }
.np-opener-reset:hover, .np-opener-reset:focus-visible { text-decoration: underline; }
.np-opener-reset:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.np-openers-hint { margin: 2px 0 0; }
@media (max-width: 640px) {
.np-opener-edit { font-size: 16px; } /* a smaller box makes iOS zoom in on focus */
}
/* ---- Replies waiting: a drafted answer per conversation (docs/specs/INBOX_REPLIES.md) ----
Owner, 2026-10-01: "show "Reply", "Edit" Button for each ... In case Edit, it should allow
editing the reply (show right side panel with loading historing messages with that person)".
The cards in the Network strip, then the Edit panel on the right (the whole screen on a
phone). Every colour is a theme token, so the dark theme follows on its own; only the
scrim behind the panel has a dark value of its own, as the contact drawer's does. */
.np-rw-progress { white-space: normal; } /* the counts line wraps on a phone */
.np-rw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 10px; align-items: start; }
.np-rw-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px 12px;
border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.np-rw-card.is-eye { border-color: var(--amber-line); box-shadow: inset 3px 0 0 var(--amber); }
.np-rw-card.is-failed { border-color: var(--red-line); }
.np-rw-who { display: flex; align-items: center; gap: 6px; min-width: 0; }
.np-rw-plain { color: var(--ink); cursor: default; }
.np-rw-plain:hover { text-decoration: none; }
/* Their LinkedIn profile beside a contact's name (2026-10-04); a card with no address says so in .np-rw-noprof. */
.np-rw-prof { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--blue); white-space: nowrap; }
.np-rw-noprof { margin: 0; }
.np-rw-dot { position: relative; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.np-rw-when { margin-left: auto; flex: 0 0 auto; font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.np-rw-badge { align-self: flex-start; max-width: 100%; margin: 0; padding: 2px 9px; border: 1px solid var(--line); border-radius: 999px;
font-size: 12px; font-weight: 600; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.np-rw-badge.is-eye { background: var(--amber-tint); border-color: var(--amber-line); }
.np-rw-badge.is-closer { background: var(--green-tint); border-color: var(--green-line); }
.np-rw-said { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding: 1px 0 1px 10px;
border-left: 3px solid var(--line); }
.np-rw-msgwrap { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; max-width: 100%; }
.np-rw-msgwrap[hidden] { display: none; }
.np-rw-msg { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.np-rw-msg.is-folded { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.np-rw-fold { padding: 0; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--blue); cursor: pointer; }
.np-rw-fold:hover, .np-rw-fold:focus-visible { text-decoration: underline; }
.np-rw-state { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--ink-soft); }
.np-rw-state.is-busy::before { content: ""; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%;
border: 2px solid var(--line); border-top-color: var(--blue); animation: np-rw-spin .8s linear infinite; }
@keyframes np-rw-spin { to { transform: rotate(360deg); } }
.np-rw-draft { min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); }
.np-rw-draft-h { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.np-rw-draft-text { margin: 3px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.np-rw-orig { margin-top: 6px; font-size: 12px; color: var(--ink-soft); }
.np-rw-orig summary { cursor: pointer; }
.np-rw-note { margin: 6px 0 0; font-size: 12px; color: var(--ink-soft); }
.np-rw-err { margin: 0; font-size: 12px; color: var(--red); overflow-wrap: anywhere; }
.np-rw-failed { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.np-rw-same { margin: 0; padding-left: 8px; border-left: 3px solid var(--amber); font-size: 12px; font-weight: 600; color: var(--ink); }
.np-rw-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
/* Archived (lib/inbox-archive.js; owner, 2026-10-02: "a message which is replied or read should also
be put in 'Archive'"): his LinkedIn switch under the heading, the cards he moved back (dashed),
and "Archived (N)" under the cards, closed until he opens it. Theme tokens only. */
.np-rw-li { margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.np-rw-li.is-on { border-color: var(--blue-fill); box-shadow: inset 3px 0 0 var(--blue-fill); }
.np-rw-li-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink); cursor: pointer; user-select: none; }
.np-rw-li-switch input { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; accent-color: var(--blue-fill); cursor: pointer; }
.np-rw-li-switch input:disabled { cursor: default; }
.np-rw-li-switch input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.np-rw-li-state { display: flex; align-items: flex-start; gap: 6px; margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); overflow-wrap: anywhere; }
.np-rw-li-state.is-busy::before { content: ""; flex: 0 0 auto; width: 10px; height: 10px; margin-top: 3px; border-radius: 50%;
border: 2px solid var(--line); border-top-color: var(--blue); animation: np-rw-spin .8s linear infinite; }
.np-rw-li-state.is-warn, .np-rw-li-rh.is-warn { padding-left: 8px; border-left: 3px solid var(--amber); color: var(--ink); }
.np-rw-li-rh { margin: 4px 0 0; font-size: 12px; line-height: 1.45; color: var(--ink-soft); overflow-wrap: anywhere; }
.np-rw-li-rh.is-ok { padding-left: 8px; border-left: 3px solid var(--green); }
.np-rw-card.is-kept { border-style: dashed; }
.np-rw-badge.is-kept { background: var(--surface-soft); }
.np-rw-arch { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--line); }
.np-rw-arch-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 4px 0; cursor: pointer; list-style: none; }
.np-rw-arch-sum::-webkit-details-marker { display: none; }
/* The chevron is drawn, not a glyph: some fonts have no small triangles. */
.np-rw-arch-sum::before { content: ""; align-self: center; width: 0; height: 0; margin-right: 2px; border-style: solid; border-width: 5px 0 5px 8px;
border-color: transparent transparent transparent var(--ink-soft); transition: transform .15s ease; }
.np-rw-arch[open] > .np-rw-arch-sum::before { transform: rotate(90deg); }
.np-rw-arch-sum:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.np-rw-arch-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.np-rw-arch-hint { font-size: 12px; color: var(--ink-soft); }
.np-rw-alist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; align-items: start; }
.np-rw-aitem { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.np-rw-ahead { display: flex; align-items: center; gap: 6px; min-width: 0; }
.np-rw-ahow { flex: 0 0 auto; padding: 1px 8px; border: 1px solid var(--line); border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1.45; color: var(--ink); }
.np-rw-ahow.is-sent { background: var(--green-tint); border-color: var(--green-line); }
.np-rw-ahow.is-no-reply-needed { background: var(--surface-soft); }
.np-rw-amsg { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin: 0; padding-left: 8px;
border-left: 3px solid var(--line); font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); white-space: pre-wrap; overflow-wrap: anywhere; }
.np-rw-asent { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; margin: 0;
font-size: 13px; line-height: 1.45; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.np-rw-asent-h { font-weight: 700; }
.np-rw-ali { margin: 0; font-size: 12px; line-height: 1.45; color: var(--ink-soft); overflow-wrap: anywhere; }
.np-rw-ali.is-ok { color: var(--green); font-weight: 600; }
.np-rw-ali.is-warn { padding-left: 8px; border-left: 3px solid var(--amber); color: var(--ink); }
.np-rw-amore { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .np-rw-li-state.is-busy::before { animation: none; } .np-rw-arch-sum::before { transition: none; } }
/* The Edit panel: a dialog over the page, fixed to the right edge, the full height. */
html.np-rw-lock, html.np-rw-lock body { overflow: hidden; }
.np-rw-root { position: fixed; inset: 0; z-index: 1300; } /* above the contact drawer (1200) and the toasts (1100): the panel says what happened in its own note */
.np-rw-backdrop { position: absolute; inset: 0; background: rgba(8, 22, 38, .42); animation: np-rw-fade var(--t-med, .25s ease); }
:root[data-theme="dark"] .np-rw-backdrop { background: rgba(0, 0, 0, .58); }
.np-rw-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); display: flex; flex-direction: column;
background: var(--card); color: var(--ink); border-left: 1px solid var(--line); box-shadow: var(--shadow-lg);
animation: np-rw-slide var(--t-med, .25s ease); }
.np-rw-panel:focus { outline: none; }
@keyframes np-rw-slide { from { transform: translateX(100%); } to { transform: none; } }
@keyframes np-rw-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.np-rw-panel, .np-rw-backdrop, .np-rw-state.is-busy::before { animation: none; }
}
.np-rw-phead { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px 12px; border-bottom: 1px solid var(--line); }
.np-rw-ptitles { flex: 1 1 auto; min-width: 0; }
.np-rw-ptitle { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.np-rw-plinks { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 3px; font-size: 13px; }
.np-rw-plinks a { color: var(--blue); font-weight: 600; text-decoration: none; }
.np-rw-plinks a:hover, .np-rw-plinks a:focus-visible { text-decoration: underline; }
.np-rw-x { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0;
border: 1px solid var(--line); border-radius: var(--radius-sm, 10px); background: var(--surface-soft); color: var(--ink-soft);
font-size: 16px; line-height: 1; cursor: pointer; }
.np-rw-x:hover { background: var(--card); color: var(--ink); border-color: var(--ink-faint); }
.np-rw-x:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.np-rw-convo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column;
gap: 6px; padding: 12px 16px; background: var(--bg); }
.np-rw-convo:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.np-rw-earlier { align-self: center; flex: 0 0 auto; }
.np-rw-earlier[hidden], .np-rw-cstatus[hidden] { display: none; }
.np-rw-msgs { display: flex; flex-direction: column; gap: 6px; margin-top: auto; } /* a short conversation sits on the reply box */
.np-rw-cstatus { margin: auto 0; text-align: center; font-size: 13px; color: var(--ink-soft); }
.np-rw-day { align-self: center; margin: 8px 0 2px; padding: 1px 10px; border: 1px solid var(--line); border-radius: 999px;
background: var(--card); font-size: 11.5px; font-weight: 600; color: var(--ink-soft); }
/* Theirs on the left on the card colour; his own on the right, filled with the brand blue
(--blue-fill holds white above 4.5:1 in both themes). */
.np-rw-bubble { align-self: flex-start; max-width: 85%; min-width: 0; padding: 6px 10px 7px; border: 1px solid var(--line);
border-radius: 12px 12px 12px 4px; background: var(--card); color: var(--ink); }
.np-rw-bubble.is-mine { align-self: flex-end; border-color: var(--blue-fill); border-radius: 12px 12px 4px 12px;
background: var(--blue-fill); color: #fff; }
.np-rw-bmeta { display: flex; align-items: baseline; gap: 6px; font-size: 11.5px; color: var(--ink-soft); }
.np-rw-bwho { font-weight: 700; color: var(--ink); }
.np-rw-bubble.is-mine .np-rw-bmeta, .np-rw-bubble.is-mine .np-rw-bwho { color: #fff; }
.np-rw-btext { margin: 2px 0 0; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.np-rw-compose { display: flex; flex-direction: column; gap: 6px; padding: 10px 16px max(12px, env(safe-area-inset-bottom));
border-top: 1px solid var(--line); background: var(--card); }
.np-rw-label { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.np-rw-text { width: 100%; box-sizing: border-box; min-height: 96px; max-height: 38vh; resize: vertical; font: inherit; font-size: 14px; line-height: 1.45; }
.np-rw-pnote { margin: 0; font-size: 12.5px; color: var(--ink-soft); overflow-wrap: anywhere; }
.np-rw-pnote.is-warn { padding-left: 8px; border-left: 3px solid var(--amber); font-weight: 600; color: var(--ink); }
.np-rw-pactions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (max-width: 640px) {
.np-rw-panel { width: 100vw; border-left: 0; }
.np-rw-text { font-size: 16px; } /* a smaller box makes iOS zoom in on focus */
.np-rw-bubble { max-width: 92%; }
}
/* ---- Contacts: the filters, the editors and a contact's own page (docs/specs/CONTACTS_CRM.md) ----
Owner, 2026-10-01: "since you have all my contacts now, can you start pulling all of their key
information so that you can have full fledge contact management." The progress line under the
heading, Filters / Export CSV in the search bar, the stage / follow-up / tags row on each result,
and #/network/contact/. Every colour is a theme token, so the dark theme follows on its own. */
.np-sweep { margin: -8px 0 12px; font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.np-sweep[hidden], .np-filters[hidden], .np-fchips[hidden], .np-cp[hidden], .np-list[hidden],
.np-crm-fedit[hidden], .np-crm-due[hidden], .np-crm-other[hidden] { display: none; }
.np-searchbar .np-filters-btn[aria-expanded="true"] { border-color: var(--blue); color: var(--blue); }
.np-searchbar .np-export.is-busy { opacity: .7; }
.np-filters { margin: -4px 0 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); }
.np-filters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); gap: 10px 12px; }
.np-filter { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.np-filter-k { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.np-filter .input { width: 100%; min-width: 0; padding: 8px 11px; font-size: 13.5px; }
.np-filter select.input { padding-right: 32px; }
.np-filters-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.np-filters-hint { font-size: 12px; color: var(--ink-soft); }
.np-fchips { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; }
.np-fchip { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 2px 2px 2px 10px; border: 1px solid var(--blue);
border-radius: 999px; background: var(--blue-tint); font-size: 12.5px; font-weight: 600; color: var(--ink); }
.np-fchip-t { overflow-wrap: anywhere; }
.np-fchip-x, .np-tag-x { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0;
border: 0; border-radius: 50%; background: none; font: inherit; font-size: 15px; line-height: 1; color: var(--ink-soft); cursor: pointer; }
.np-fchip-x:hover, .np-tag-x:hover { background: var(--line); color: var(--ink); }
/* A result card: stage, follow-up and tags in place; the card itself still opens the drawer.
The name takes the room beside the initials (on a phone too), the tier pill at the end. */
.np-card .card-head .np-card-id { flex: 1 1 0; min-width: 0; }
.np-card .card-head > .spacer { display: none; }
.np-card .card-head { margin-bottom: 8px; }
.np-crm { display: flex; flex-direction: column; gap: 6px; }
.np-crm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.np-crm-stage { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.np-crm-stagesel { width: auto; min-width: 0; padding: 4px 28px 4px 10px; font-size: 12.5px; font-weight: 600; border-radius: 999px;
background-position: right 10px center; color: var(--ink-soft); }
.np-crm-stagesel.is-set { color: var(--ink); border-color: var(--blue); }
/* Two classes deep: the global input[type=…] rule (styles.css) outweighs one class. */
.np-crm-stage .np-crm-other { width: 10em; padding: 4px 10px; font-size: 12.5px; border-radius: 999px; }
.np-crm-fbtn { display: inline-flex; align-items: center; min-height: 28px; padding: 3px 11px; border: 1px dashed var(--line); border-radius: 999px;
background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.np-crm-fbtn:hover { border-color: var(--blue); color: var(--blue); }
.np-crm-fbtn.is-set { border-style: solid; color: var(--ink); }
.np-crm-fbtn.is-due { border-color: var(--amber-line); background: var(--amber-tint); color: var(--ink); }
.np-crm-due { margin: 0; padding-left: 8px; border-left: 3px solid var(--amber); font-size: 12.5px; color: var(--ink); overflow-wrap: anywhere; }
.np-crm-tags { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.np-tag { display: inline-flex; align-items: center; gap: 1px; max-width: 100%; padding: 1px 2px 1px 9px; border: 1px solid var(--line);
border-radius: 999px; background: var(--surface-soft); font-size: 12px; font-weight: 600; color: var(--ink); }
.np-tag-t { overflow-wrap: anywhere; }
.np-tag--ro { padding: 1px 9px; }
.np-crm-tags .np-tag-input { width: 7.5em; min-width: 0; padding: 3px 10px; font-size: 12.5px; border-radius: 999px; }
.np-crm-tags:not(.is-compact) .np-tag-input { width: 12em; padding: 6px 12px; }
.np-crm-fedit { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); }
.np-crm-follow { display: flex; flex-direction: column; gap: 6px; }
.np-crm-fline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.np-crm-follow .np-crm-date { width: auto; min-width: 0; padding: 6px 10px; font-size: 13px; }
.np-crm-follow .np-crm-note { flex: 1 1 220px; width: auto; min-width: 0; padding: 6px 10px; font-size: 13px; }
/* The search bar on one line on a wide screen (the box takes the room, the pickers their own
width), so the sticky bar is one row high while he scrolls the results; on a phone, three rows
(the box; tier and segment side by side; Filters and Export CSV), not four. */
@media (min-width: 641px) {
.np-searchbar > select.input { width: auto; flex: 0 0 auto; }
}
@media (max-width: 640px) {
.np-searchbar > select.input { width: auto; flex: 1 1 140px; min-width: 0; }
}
.np-card-meta .np-card-read { color: var(--ink-soft); }
.np-card-meta .np-card-read::before { content: "·"; margin-right: 8px; }
.np-card-page { font-size: 12.5px; font-weight: 600; color: var(--blue); text-decoration: none; white-space: nowrap; }
.np-card-page:hover, .np-card-page:focus-visible { text-decoration: underline; }
.np-card-meta { flex-wrap: wrap; }
.np-drawer-head .np-drawer-page { white-space: nowrap; }
.np-note-meta { display: flex; align-items: center; gap: 8px; }
.np-note-del { margin-left: auto; padding: 0; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--red); cursor: pointer; }
.np-note-del:hover, .np-note-del:focus-visible { text-decoration: underline; }
.np-note-del:disabled { opacity: .5; cursor: default; }
/* Network's sub-tabs (owner, 2026-10-02: "Need to have few more sub tabs to manage the information much
more structurally"): Replies Waiting · Top Comments · Stay in Touch · 1st Hour Boost · Profile Browser,
right after the title, Import LinkedIn data and Refresh at the right of the same row, a line under the
row with the tab shown underlined. The tabs take the room between the title and the buttons (scrolling
sideways inside it, never pushing a button onto a line of its own, should counts grow wide); narrower
than 1280 px they take a row of their own, which scrolls sideways inside itself on a phone (never the
page). Each tab's count is a small pill; the tab shown has its pill filled. Every colour a theme token. */
.np-head { flex-wrap: wrap; gap: 0 14px; border-bottom: 1px solid var(--line); }
.np-head > h2 { padding: 10px 0; }
.np-head > .spacer { flex: 0 0 0; }
.np-tabs { display: flex; align-items: stretch; gap: 2px; flex: 1 1 0; min-width: 0; align-self: stretch;
overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.np-tabs::-webkit-scrollbar { display: none; }
/* Grouped (owner, 2026-10-04: Replies, Comments, Touch and Boost moved under Engagement): the sections are sub-tabs
in the app's own row (web/view-groups.js), so this page's row is not shown; its header names the section and keeps
LinkedIn visits, Import and Refresh at the right. */
.np-head.np-grouped > .np-tabs { display: none; }
.np-head.np-grouped > .spacer { flex: 1 1 0; }
/* position: its screen-reader count (.sr-only, absolute) stays inside the row's sideways scroll, never the page's */
.np-tab { position: relative; display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 10px 12px 9px; border-bottom: 2px solid transparent;
font-size: 13.5px; font-weight: 600; line-height: 1.25; color: var(--ink-soft); white-space: nowrap; text-decoration: none; cursor: pointer;
transition: color var(--t-fast), border-color var(--t-fast); }
.np-tab:hover { color: var(--ink); text-decoration: none; border-bottom-color: var(--line); }
.np-tab[aria-selected="true"], .np-tab[aria-selected="true"]:hover { color: var(--ink); border-bottom-color: var(--blue); }
.np-tab:focus-visible { outline: 2px solid var(--blue); outline-offset: -3px; border-radius: 6px; }
.np-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px;
border-radius: 999px; background: var(--slate-tint); box-shadow: inset 0 0 0 1px var(--slate-line); color: var(--ink);
font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.np-tab[aria-selected="true"] .np-tab-badge { background: var(--blue-fill); box-shadow: none; color: var(--ink-invert); }
.np-tab-badge[hidden], .np-tabpanel[hidden], .np-slot[hidden], .np-tab-status[hidden] { display: none; }
/* Owner, 2026-10-03: "Network Sub-tab has outgrown a lot ... shorten the text so that all of them fit ... Or
alternatively create icon for these tabs". Each tab: an icon and a short name (its full name on hover and, in
.np-tab-label, for screen readers); Import LinkedIn data, Refresh and LinkedIn visits are icons with their name
on hover. On a phone only the tab shown keeps its short name: icons and counts for the rest. */
.np-tab { gap: 6px; padding-left: 10px; padding-right: 10px; }
.np-tab-icon { display: inline-flex; flex: 0 0 auto; width: 16px; height: 16px; }
.np-tab-icon svg, .np-icon svg { display: block; width: 16px; height: 16px; }
.np-tab > .np-tab-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.np-head-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 34px; padding-left: 8px; padding-right: 8px; }
.np-icon { display: inline-flex; }
.np-head .lv-btn { position: relative; min-width: 34px; justify-content: center; padding-left: 8px; padding-right: 8px; }
.np-head .lv-btn .lv-btn__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 760px) {
.np-tab:not([aria-selected="true"]) .np-tab-short { display: none; }
.np-tab { padding-left: 9px; padding-right: 9px; }
}
/* A section waits for the one above it as Network opens (nothing moves under him); the progress line
keeps its place above the search meanwhile, so the search bar does not jump down when it comes. */
.np-slot > .np-sweep { margin-top: 0; }
.np-slot.is-pending[data-sec="network-sweep"] { min-height: 31px; }
.np-slot > .card { scroll-margin-top: calc(var(--topbar-h) + 12px); }
.np-tab-empty { margin: 0 0 16px; padding: 18px 16px; border: 1px dashed var(--line); border-radius: var(--radius-sm);
background: var(--card); font-size: 13.5px; color: var(--ink-soft); }
@media (max-width: 1279px) {
.np-tabs { order: 10; flex: 1 1 100%; margin: 0 -4px; }
.np-head > .spacer { flex: 1 1 0; }
}
@media (max-width: 640px) {
.np-tab { padding: 10px 10px 9px; font-size: 13px; }
}
/* Stay in touch: a follow-up he set comes first, with what it is about. */
.np-touch-card.is-followup { border-color: var(--amber-line); box-shadow: inset 3px 0 0 var(--amber); }
.np-touch-followup { font-size: 13px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.np-touch-next { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.np-touch-nexth { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
/* Stay in touch, the days around today: ◀ · Today · Refresh beside the title (owner, 2026-10-02). */
.np-touch-titlebar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.np-touch-titlebar .np-touch-h { margin-bottom: 0; overflow-wrap: anywhere; }
.np-touch-nav { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.np-touch-nav .btn { min-height: 30px; padding: 4px 10px; }
.np-touch.is-loading .np-touch-grid, .np-touch.is-loading .np-touch-empty { opacity: .5; transition: opacity .15s ease; }
.np-touch-empty { font-size: 13px; color: var(--ink); margin: 2px 0 4px; }
.np-touch-card.is-past { opacity: 1; }
.np-touch-card.is-past .np-touch-outcome { color: var(--ink); }
.np-touch-card.is-past.is-done .np-touch-outcome, .np-touch-card.is-past.is-sent .np-touch-outcome { color: var(--green); }
.np-touch-card.is-past.is-left .np-touch-outcome { color: var(--ink-soft); font-weight: 500; }
/* Stay in touch, the ring (owner, 2026-10-02: "10 - 99" a day): his number a day beside the title, and
82 people as compact rows to scan — one line each (who, why, the note's state, Done and Skip), the
note with Edit and Send under it on the arrow; 20 at a time. Tokens only: light and dark alike. */
.np-touch-titlebar { row-gap: 6px; }
.np-touch-perday { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.np-touch-perday .np-touch-perday-sel { width: auto; min-width: 0; min-height: 30px; padding: 2px 30px 2px 10px; background-position: right 10px center;
font-size: 13px; font-weight: 600; }
.np-touch-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; background: var(--card); overflow: hidden; }
.np-touch-row { border-top: 1px solid var(--line); min-width: 0; }
.np-touch-row:first-child { border-top: 0; }
.np-touch-row.is-open { background: var(--surface-soft); }
.np-touch-row.is-followup { box-shadow: inset 3px 0 0 var(--amber); }
.np-touch-line { display: flex; align-items: center; gap: 8px; padding: 6px 10px; min-height: 42px; min-width: 0; }
.np-touch-toggle { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0;
border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink-soft); font: inherit; font-size: 12px; cursor: pointer; }
.np-touch-toggle:hover, .np-touch-toggle:focus-visible { color: var(--blue); border-color: var(--blue); }
.np-touch-toggle.is-blank { border-color: transparent; background: transparent; cursor: default; }
.np-touch-line > .np-avatar { align-self: center; }
.np-touch-id { display: flex; align-items: baseline; gap: 6px; flex: 0 1 34%; min-width: 0; overflow: hidden; }
.np-touch-id .np-touch-name { flex: 0 0 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
.np-touch-id .np-touch-tier { flex: 0 0 auto; }
.np-touch-id .np-touch-role { flex: 1 100 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; font-size: 12.5px; }
.np-touch-why { flex: 1 1 0; min-width: 0; font-size: 12.5px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-touch-flag { flex: 0 0 auto; font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--ink-soft); border-radius: 999px; padding: 1px 8px;
border: 1px solid var(--line); }
.np-touch-flag.is-ready { color: var(--blue); border-color: var(--blue); background: var(--blue-tint); }
.np-touch-flag.is-drafting, .np-touch-flag.is-later { font-weight: 500; }
.np-touch-flag.is-failed { color: var(--amber); border-color: var(--amber-line); background: var(--amber-tint); }
.np-touch-flag.is-done, .np-touch-flag.is-sent { color: var(--green); border-color: var(--green-line); background: var(--green-tint); }
.np-touch-quick { flex: 0 0 auto; display: inline-flex; gap: 4px; }
/* A chip in it ("Waits for their reply (28 Sep)", release 317; "Excluded: …", release 312) takes a line of its own when
Done and Skip would not fit beside it: on a phone they were cut off at the row's edge (2026-10-06, seen at 390 px). */
.np-touch-quick { flex-wrap: wrap; align-items: center; min-width: 0; max-width: 100%; }
.np-touch-quick .btn, .np-touch-note .btn, .np-touch-panel .np-touch-actions .btn, .np-touch-more .btn { min-height: 30px; padding: 4px 10px; }
.np-touch-row.is-done .np-touch-name, .np-touch-row.is-snoozed .np-touch-name, .np-touch-row.is-skipped .np-touch-name { color: var(--ink-soft); }
.np-touch-panel { display: flex; flex-direction: column; gap: 6px; padding: 2px 10px 10px 46px; min-width: 0; }
.np-touch-panel .np-touch-actions { margin-top: 2px; }
.np-touch-role-full { display: none; white-space: normal; }
.np-touch-note { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); padding: 8px 10px; min-width: 0; }
.np-touch-notetext, .np-touch-sent { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.np-touch-notehint { margin: 0; font-size: 13px; color: var(--ink-soft); }
.np-touch-noteerr { margin: 0; font-size: 12.5px; color: var(--amber); }
.np-touch-noteedit { width: 100%; min-height: 72px; resize: vertical; font-size: 14px; line-height: 1.45; }
.np-touch-noteacts { display: flex; flex-wrap: wrap; gap: 6px; }
.np-touch-sent { border-left: 3px solid var(--green); padding-left: 8px; }
.np-touch-more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.np-touch-moreinfo { font-size: 12.5px; color: var(--ink-soft); }
.np-touch.is-loading .np-touch-list { opacity: .5; transition: opacity .15s ease; }
.np-touch-row.is-past .np-touch-outcome { color: var(--ink); }
.np-touch-row.is-past.is-done .np-touch-outcome, .np-touch-row.is-past.is-sent .np-touch-outcome { color: var(--green); border-color: var(--green-line); background: var(--green-tint); }
.np-touch-row.is-past.is-left .np-touch-outcome { color: var(--ink-soft); font-weight: 500; }
@media (max-width: 760px) {
/* A phone: the name and the note's state on the first line, the reason under it, Done and Skip last. */
.np-touch-line { flex-wrap: wrap; row-gap: 4px; padding: 8px 10px; }
.np-touch-id { flex: 1 1 0; min-width: 0; }
.np-touch-id .np-touch-name { flex: 0 1 auto; min-width: 4em; }
.np-touch-id .np-touch-role { display: none; }
.np-touch-flag { order: 2; }
.np-touch-why { flex: 1 1 100%; order: 3; padding-left: 68px; white-space: normal; }
.np-touch-quick { order: 4; margin-left: 68px; flex: 0 1 auto; max-width: calc(100% - 68px); }
.np-touch-panel { padding-left: 10px; }
.np-touch-panel .np-touch-role-full { display: block; }
.np-touch-perday { margin-left: auto; }
}
/* Touch's two inner tabs and Profile viewers (release 321, 2026-10-12; docs/specs/PROFILE_VIEWERS.md). Owner: "another tab
where all the people who has reviewed my profile and 'Interesting Viewers' ... please draft an LinkedIn Messaging/Email".
web/profile-viewers.js draws it; tokens only, so light and dark follow; nothing wider than a phone; 44 px targets there. */
.np-touch-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 10px; border-bottom: 1px solid var(--line); min-width: 0; }
.np-touch-itab { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; margin-bottom: -1px; border: 1px solid transparent;
border-radius: 8px 8px 0 0; font-size: 13.5px; font-weight: 700; color: var(--ink-soft); text-decoration: none; }
.np-touch-itab:hover { color: var(--blue); }
.np-touch-itab.is-active { color: var(--blue); border-color: var(--line); border-bottom-color: var(--card); background: var(--card); }
.np-touch-itab:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.np-tabpanel.np-touch-on-viewers > .np-slot, .np-tabpanel.np-touch-on-viewers > .np-tab-status { display: none; }
.np-touch-viewers[hidden] { display: none; }
.pv { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pv-head { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pv-h { margin: 0; font-size: 15px; font-weight: 800; color: var(--ink); overflow-wrap: anywhere; }
.pv-use, .pv-sub, .pv-later, .pv-caps-hint { margin: 0; font-size: 13px; color: var(--ink-soft); overflow-wrap: anywhere; }
.pv-use { color: var(--ink); font-weight: 600; }
.pv-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.pv-read { font-size: 12.5px; color: var(--ink-soft); min-width: 0; overflow-wrap: anywhere; }
.pv-read.is-failed, .pv-err, .pv-why-not { color: var(--amber); }
.pv-caps { border: 1px solid var(--line); border-radius: 8px; background: var(--card); padding: 6px 10px; min-width: 0; }
.pv-caps-sum { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.pv-caps-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin: 8px 0 6px; }
.pv-cap { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--ink-soft); min-width: 0; }
.pv-cap .pv-cap-in { width: 7.5em; max-width: 100%; min-height: 32px; }
.pv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px;
background: var(--card); overflow: hidden; min-width: 0; }
.pv-row { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-top: 1px solid var(--line); min-width: 0; }
.pv-row:first-child { border-top: 0; }
.pv-row.is-sent, .pv-row.is-skipped, .pv-row.is-dismissed { background: var(--surface-soft); }
.pv-row.is-waiting, .pv-row.is-never { background: var(--surface-soft); color: var(--ink-soft); }
.pv-row.is-waiting .pv-name, .pv-row.is-never .pv-name { color: var(--ink-soft); }
.pv-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pv-pick { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: var(--blue); }
.pv-id { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; min-width: 0; flex: 1 1 0; }
.pv-name { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; font-weight: 700; color: var(--blue); text-align: left; cursor: pointer;
text-decoration: none; min-width: 0; overflow-wrap: anywhere; }
.pv-name:hover, .pv-name:focus-visible { text-decoration: underline; }
.pv-viewed { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }
.pv-headline { margin: 0; font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.pv-insight { margin: 0; font-size: 12.5px; color: var(--ink-soft); font-style: italic; overflow-wrap: anywhere; }
.pv-why { margin: 0; font-size: 12.5px; color: var(--ink-soft); overflow-wrap: anywhere; }
.pv-draft, .pv-done { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; min-width: 0; }
.pv-subject, .pv-text { width: 100%; max-width: 100%; box-sizing: border-box; font-size: 14px; }
.pv-text { min-height: 72px; resize: vertical; line-height: 1.45; }
.pv-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.pv-acts .btn { min-height: 30px; padding: 4px 10px; }
.pv-count { font-size: 12px; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.pv-count.is-over { color: var(--red); }
.pv-why-not, .pv-err, .pv-state { margin: 0; font-size: 12.5px; overflow-wrap: anywhere; }
.pv-state { color: var(--ink-soft); font-weight: 600; }
.pv-state.is-sent { color: var(--green); }
.pv-senttext { margin: 0; padding-left: 8px; border-left: 3px solid var(--green); font-size: 13.5px; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.pv-h4 { margin: 6px 0 0; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.pv-never > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
.pv-empty { margin: 0; font-size: 13px; color: var(--ink); }
.pv button:focus-visible, .pv a:focus-visible, .pv input:focus-visible, .pv textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (max-width: 760px) {
.np-touch-itab { min-height: 44px; }
.pv-acts .btn, .pv-tools .btn, .pv-caps-form .btn { min-height: 44px; min-width: 44px; }
.pv-pick { width: 24px; height: 24px; }
.pv-row { padding: 10px; }
}
/* Catch up (release 322, 2026-10-13; docs/specs/CATCH_UP.md): Touch's third inner tab. web/catch-up.js draws it with
Profile viewers' .pv rules above (root "pv cu"); only what it has of its own is here: the occasion chip, the occasion
line with its day, a held draft's why. Tokens only; nothing wider than a phone. */
.np-tabpanel.np-touch-on-catchup > .np-slot, .np-tabpanel.np-touch-on-catchup > .np-tab-status { display: none; }
.np-touch-catchup[hidden] { display: none; }
/* Close friends (release 339, web/close-friends.js): Touch's fourth inner tab, Profile viewers' .pv rows. */
.np-touch-close[hidden] { display: none; }
.cf-title { margin: 0 0 4px; font-size: 16px; color: var(--ink); }
.cf-rule { margin: 0 0 12px; font-size: 13px; color: var(--ink-soft); max-width: 80ch; }
.cf-sec { margin: 0 0 16px; }
.cf-list { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); }
.cf-why { margin: 0; font-size: 12.5px; color: var(--ink-soft); overflow-wrap: anywhere; }
.cu-chip { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; line-height: 1.6; padding: 0 7px; border-radius: 999px;
border: 1px solid var(--line); color: var(--ink); background: var(--surface-soft); white-space: nowrap; }
.cu-chip--birthday, .cu-chip--job { border-color: var(--blue); color: var(--blue); }
.cu-chip--anniversary { border-color: var(--green); color: var(--green); }
.cu-occ { margin: 0; font-size: 13px; color: var(--ink); overflow-wrap: anywhere; min-width: 0; }
.cu-when { color: var(--ink-soft); white-space: nowrap; }
.cu-hold { padding: 4px 8px; border-left: 3px solid var(--amber); }
/* A contact's own page: the list's place in the Network view, Back returns to it as he left it. */
.np-cp-nav { margin: -4px 0 12px; }
.np-cp-back { display: inline-flex; align-items: center; gap: 4px; padding: 4px 0; font-size: 13.5px; font-weight: 700; color: var(--blue); text-decoration: none; }
.np-cp-back:hover, .np-cp-back:focus-visible { text-decoration: underline; }
.np-cp .card { margin-bottom: 0; }
.np-cp-loading, .np-cp-error { padding: 18px 20px; }
.np-cp-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; padding: 20px 22px; }
.np-cp-avatar.np-avatar { width: 64px; height: 64px; margin: 0; font-size: 1.3rem; }
.np-cp-id { flex: 1 1 320px; min-width: 0; }
.np-cp-name { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.np-cp-name:focus { outline: none; }
.np-cp-headline { margin: 4px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.np-cp-sub { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-soft); overflow-wrap: anywhere; }
.np-cp-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.np-cp-stagepill { background: var(--blue-tint); color: var(--ink); border-color: var(--blue); }
.np-cp-fpill { background: var(--surface-soft); color: var(--ink); border-color: var(--line); }
.np-cp-fpill.is-due { background: var(--amber-tint); border-color: var(--amber-line); }
.np-cp-facts { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-soft); }
.np-cp-actions { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 6px; flex: 0 1 auto; }
.np-cp-sec { padding: 16px 18px; min-width: 0; }
.np-cp-sec .np-subhead { margin-bottom: 10px; }
.np-cp-manage { margin-top: 14px; }
.np-cp-mgrid { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px 22px; align-items: start; }
.np-cp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.np-cp-fk { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.np-cp-fhint { margin: 0; font-size: 12px; color: var(--ink-soft); }
.np-cp-field .np-crm-stagesel { padding: 8px 32px 8px 12px; font-size: 13.5px; border-radius: var(--radius-sm); }
.np-cp-field .np-crm-stage .np-crm-other { padding: 8px 12px; font-size: 13.5px; border-radius: var(--radius-sm); }
.np-cp-fstate { margin: 0; font-size: 13px; color: var(--ink-soft); overflow-wrap: anywhere; }
.np-cp-fstate.is-due { padding-left: 8px; border-left: 3px solid var(--amber); font-weight: 600; color: var(--ink); }
.np-cp-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 14px; align-items: start; margin-top: 14px; }
.np-cp-main, .np-cp-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.np-cp-text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.np-cp-text.is-folded { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden; }
.np-cp-ptext.is-folded { -webkit-line-clamp: 4; line-clamp: 4; }
.np-cp-fold { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.np-cp-empty { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
.np-cp-entries { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.np-cp-entry { padding: 10px 0; border-top: 1px solid var(--line); }
.np-cp-entry:first-child { padding-top: 0; border-top: 0; }
.np-cp-etitle { font-size: 14px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.np-cp-eorg { font-size: 13.5px; color: var(--ink); overflow-wrap: anywhere; }
.np-cp-emeta { margin-top: 2px; font-size: 12.5px; color: var(--ink-soft); }
.np-cp-entry .np-cp-text { margin-top: 6px; font-size: 13.5px; }
.np-cp-skills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.np-cp-skill { padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); font-size: 12.5px; color: var(--ink); }
.np-cp-posts { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.np-cp-posts > .np-rw-fold { align-self: flex-start; }
.np-cp-post { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); min-width: 0; }
.np-cp-pmeta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 6px; font-size: 12px; color: var(--ink-soft); }
.np-cp-plink { margin-left: auto; font-weight: 600; color: var(--blue); text-decoration: none; }
.np-cp-plink:hover, .np-cp-plink:focus-visible { text-decoration: underline; }
.np-cp-histfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.np-cp-facts.np-facts { margin: 0 0 8px; padding: 0; border: 0; }
.np-cp-src { margin: 0; font-size: 12px; color: var(--ink-soft); }
.np-cp-notes .np-note-input, .np-cp-sendtext { min-height: 72px; }
.np-cp-sendtext { width: 100%; box-sizing: border-box; }
.np-cp-sendact { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.np-cp-send .np-disclaimer { margin-top: 10px; }
.np-cp-guide.np-guide { position: static; }
@media (max-width: 1100px) {
.np-cp-mgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.np-cp-mgrid .np-cp-field--follow { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 900px) {
.np-cp-cols { grid-template-columns: 1fr; }
/* One column: how to reach them, the notes and the actions first, the profile and History after. */
.np-cp-side { order: -1; }
.np-cp-actions { justify-content: flex-start; flex-basis: 100%; }
}
@media (max-width: 640px) {
.np-cp-mgrid { grid-template-columns: 1fr; }
.np-cp-mgrid .np-cp-field--follow { grid-row: auto; }
.np-cp-head { padding: 16px; gap: 12px; }
.np-cp-avatar.np-avatar { width: 48px; height: 48px; font-size: 1rem; }
.np-cp-name { font-size: 19px; }
.np-cp-sec { padding: 14px; }
.np-crm-follow .np-crm-date, .np-crm-follow .np-crm-note, .np-crm-tags .np-tag-input, .np-crm-stage .np-crm-other,
.np-cp-send .np-cp-sendtext { font-size: 16px; } /* iOS zooms in on a smaller box */
}
/* ---- People and identities (docs/specs/PEOPLE_IDENTITIES_CONTRACT.md; owner, 2026-10-03: "give me options to
Link a Linkedin profile with multiple phone number. and vice versa"): a contact's Identities in the contact
window and on their page (each kind under its name, Add, ✕ to remove, a government ID only ever as •••• and
its last 4), the records linked as one person with Unlink, "Same person as…", and the People tab's
Suggestions: chips by reason, Accept all same phone, each pair side by side with Same person / Not the same.
Theme tokens only, so the dark theme follows; everything wraps inside a phone's 390 px. ---- */
.np-ids[hidden], .np-ids-linked[hidden], .np-id-form[hidden], .np-ids-search[hidden], .np-id-govrow[hidden], .np-id-govnote[hidden] { display: none; }
/* its own width, never its content's (a long name in a row can not widen the drawer), and the width its rows ask about */
.np-ids { min-width: 0; container-type: inline-size; }
.np-ids--drawer { margin: 0 0 4px; padding: 12px 0 14px; border-bottom: 1px solid var(--line); }
.np-ids-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 8px; }
.np-ids-head .np-subhead { flex: 1 1 auto; margin: 0; }
.np-ids-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.np-ids-btns .btn { min-height: 30px; padding: 4px 10px; }
.np-ids-btns .btn[aria-expanded="true"] { border-color: var(--blue); color: var(--blue); }
.np-ids-note { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); overflow-wrap: anywhere; }
.np-ids-note:empty { display: none; }
.np-ids-err, .np-id-err, .np-ppl-err { display: block; margin: 4px 0 0; padding-left: 8px; border-left: 3px solid var(--red); font-size: 12.5px;
line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.np-ids-list { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.np-id-group { min-width: 0; }
.np-id-k { margin-bottom: 2px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.np-id-vals { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.np-id { display: flex; align-items: flex-start; gap: 8px; min-width: 0; padding: 5px 0; border-top: 1px solid var(--line-soft); }
.np-id:first-child { padding-top: 2px; border-top: 0; }
.np-id-main { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; }
.np-id-v { align-self: flex-start; max-width: 100%; font-size: 13.5px; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
.np-id-v.is-masked { font-variant-numeric: tabular-nums; letter-spacing: .06em; }
a.np-id-v { color: var(--blue); text-decoration: none; }
a.np-id-v:hover, a.np-id-v:focus-visible { text-decoration: underline; }
.np-id-meta { font-size: 12px; line-height: 1.45; color: var(--ink-soft); overflow-wrap: anywhere; }
.np-id-exp.is-expired { padding: 0 6px; border-radius: 999px; background: var(--red-tint); box-shadow: inset 0 0 0 1px var(--red-line);
font-weight: 700; color: var(--ink); white-space: nowrap; }
.np-id-x { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: -3px -4px 0 0;
padding: 0; border: 0; border-radius: 50%; background: none; font: inherit; font-size: 14px; line-height: 1; color: var(--ink-soft); cursor: pointer; }
.np-id-x:hover, .np-id-x:focus-visible { background: var(--line); color: var(--ink); }
.np-id-x:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.np-id-x:disabled { opacity: .5; cursor: default; }
/* Add, and "Same person as…": a box under the list, the kind and the value on one line where they fit */
.np-id-form, .np-ids-search { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin-top: 10px; padding: 10px;
border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); }
.np-id-row, .np-id-govrow, .np-id-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.np-id-form .np-id-kind { flex: 0 1 auto; width: auto; max-width: 100%; min-width: 0; padding: 7px 30px 7px 10px; font-size: 13.5px; }
.np-id-form .np-id-value, .np-id-form .np-id-label, .np-id-form .np-id-country { flex: 1 1 160px; width: auto; min-width: 0; padding: 7px 10px; font-size: 13.5px; }
.np-id-form .np-id-explabel { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.np-id-form .np-id-expires { width: auto; max-width: 100%; min-width: 0; padding: 6px 10px; font-size: 13.5px; }
.np-id-status:empty { display: none; }
.np-id-status.is-conflict { display: flex; flex-direction: column; gap: 8px; padding: 8px 10px; border: 1px solid var(--amber-line);
border-radius: var(--radius-sm); background: var(--amber-tint); }
.np-id-say { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.np-id-status.is-error .np-id-say { padding-left: 8px; border-left: 3px solid var(--red); }
/* the records linked as one person, and the contacts found for "Same person as…" */
.np-ids-linked { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.np-ids-lh { margin: 0 0 2px; font-size: 13px; font-weight: 700; color: var(--ink); }
.np-ids-recs, .np-ids-results { list-style: none; margin: 8px 0 0; padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--card); }
.np-ids-results { margin: 0; }
.np-ids-results:empty { display: none; }
.np-ids-rec, .np-ids-found { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 8px; border-top: 1px solid var(--line); }
.np-ids-rec:first-child, .np-ids-found:first-child { border-top: 0; }
.np-ids-recid { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; }
.np-ids-recline { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; }
.np-ids-recline .np-ids-recname { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
.np-ids-fname { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--ink); }
.np-ids-rechead, .np-ppl-head { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
font-size: 12px; line-height: 1.35; color: var(--ink-soft); overflow-wrap: anywhere; }
.np-ids-rec .btn, .np-ids-found .btn { flex: 0 0 auto; min-height: 30px; padding: 4px 10px; }
.np-ids-search .np-ids-q { width: 100%; min-width: 0; padding: 8px 12px; font-size: 13.5px; }
.np-ids-sclose { align-self: flex-start; }
/* where a record came from: its name, with a dot of its app's colour beside it (never the colour alone) */
.np-id-origin { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; padding: 0 7px; border: 1px solid var(--line); border-radius: 999px;
background: var(--surface-soft); font-size: 11px; font-weight: 700; line-height: 18px; color: var(--ink); white-space: nowrap; }
.np-id-origin::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-soft); }
.np-id-origin--linkedin::before { background: var(--blue); }
.np-id-origin--whatsapp::before { background: var(--green); }
.np-id-origin--sms::before, .np-id-origin--imessage::before { background: var(--slate); }
/* the People tab */
.np-ppl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
.np-ppl-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px;
background: var(--card); font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink); cursor: pointer; }
.np-ppl-chip:hover { border-color: var(--blue); }
.np-ppl-chip[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-tint); box-shadow: inset 0 0 0 1px var(--blue); }
.np-ppl-chip:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.np-ppl-n { font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.np-ppl-chip[aria-pressed="true"] .np-ppl-n { color: var(--ink); }
.np-ppl-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; }
.np-ppl-bulk .btn { white-space: normal; text-align: left; }
.np-ppl-bulknote { font-size: 12.5px; color: var(--ink-soft); }
.np-ppl-empty { margin: 0; padding: 14px; border: 1px dashed var(--line); border-radius: var(--radius-sm); font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.np-ppl > .np-ppl-err { margin: 0 0 10px; }
.np-ppl-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(440px, 100%), 1fr)); gap: 10px; align-items: start; }
.np-ppl-item { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.np-ppl-item[aria-busy="true"] { opacity: .75; }
/* Linked by Studio (release 353): the links made on hard proof, folded under the suggestions, each with Unlink. */
.np-ppl-auto { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.np-ppl-autohead { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; min-height: 32px; }
.np-ppl-auto[open] > .np-ppl-autohead { margin-bottom: 6px; }
.np-ppl-why { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.np-ppl-reason { flex: 0 0 auto; padding: 0 8px; border: 1px solid var(--slate-line); border-radius: 999px; background: var(--slate-tint);
font-size: 11.5px; font-weight: 700; line-height: 20px; color: var(--ink); }
/* a 'check' pair (release 325, Check this link): linked as one person already, the records do not prove it */
.np-ppl-why.is-check .np-ppl-reason { flex: 0 1 auto; border-color: var(--amber-line); background: var(--amber-tint); white-space: normal; }
.np-ppl-detail { min-width: 0; font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.np-ppl-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.np-ppl-side { display: flex; align-items: flex-start; gap: 8px; min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); }
.np-ppl-sid { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; flex: 1 1 0; min-width: 0; }
.np-ppl-sid .np-ppl-name { max-width: 100%; }
.np-ppl-acts { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 640px) {
.np-id-form .np-id-kind, .np-id-form .np-id-value, .np-id-form .np-id-label, .np-id-form .np-id-country, .np-id-form .np-id-expires,
.np-ids-search .np-ids-q { font-size: 16px; } /* iOS zooms in on a smaller box */
.np-ppl-side { flex-direction: column; gap: 6px; }
}
@media (max-width: 340px) {
.np-ppl-pair { grid-template-columns: minmax(0, 1fr); }
}
/* room enough (the contact window on a computer): each kind's name on the left of its values, as the facts above it */
@container (min-width: 460px) {
.np-id-group { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 0 14px; align-items: start; }
.np-id-k { margin: 0; padding-top: 4px; }
}
/* ---- Region, industry, seniority and how he knows them, from evidence (lib/contact-categories.js) ----
Each value with where it came from, small, and his Fix; Unknown reads Unknown. Theme tokens only. */
.np-cats { display: contents; }
.np-cats .np-fact-k { align-self: start; padding-top: 2px; }
.np-cat { min-width: 0; }
.np-cat-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0 8px; }
.np-cat-vwrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.np-cat-v { font-size: 13.5px; color: var(--ink); overflow-wrap: anywhere; }
.np-cat-v.is-unknown { color: var(--ink-soft); font-style: italic; }
.np-cat-mine { padding: 0 6px; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; font-weight: 700;
letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.np-cat-fix { padding: 0 2px; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; line-height: 1.6;
color: var(--blue); cursor: pointer; }
.np-cat-fix:hover, .np-cat-fix:focus-visible { text-decoration: underline; }
.np-cat-fix:disabled { color: var(--ink-faint); cursor: default; text-decoration: none; }
.np-cat-why { margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--ink-faint); overflow-wrap: anywhere; }
.np-cat-edit { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding: 8px 10px; border: 1px solid var(--line);
border-radius: var(--radius-sm); background: var(--surface-soft); }
.np-cat-input { width: 100%; box-sizing: border-box; }
.np-cat-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.np-cp-cats.np-facts { margin: 0; }
@media (max-width: 640px) {
.np-cat-input { font-size: 16px; } /* iOS zooms in on a smaller box */
}
/* ---- A contact's photo and banner, and the read on open (lib/contact-refresh.js, 2026-10-02) ----
Owner, on the contact drawer: "it should refresh the data from LinkedIn including photo and wall
paper". The photo sits over the initials (they show while it loads and stay if it does not). The
banner is a low, cropped strip across the top of the drawer's and the page's header; the header's
words sit below it, never on it, and it fades into the surface under it, in either theme. */
.np-avatar { position: relative; overflow: hidden; }
.np-avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; background: var(--card); }
.np-avatar.np-avatar--sm { width: 24px; height: 24px; font-size: .58rem; flex: 0 0 auto; }
.np-banner { position: absolute; top: 0; left: 0; right: 0; overflow: hidden; background: var(--surface-soft); pointer-events: none; }
.np-banner-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.np-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, var(--card)); }
:root[data-theme="dark"] .np-banner-img { filter: brightness(.8); }
/* the drawer: the strip over its own surface (the app's background), the photo ringed in it */
.np-detail-head.has-banner { position: relative; padding-top: 98px; }
.np-detail-head > .np-banner { height: 88px; border-radius: var(--radius-sm); }
.np-detail-head.has-banner > .np-avatar--lg { margin-top: -38px; box-shadow: 0 0 0 3px var(--card); }
.np-drawer-body .np-detail-head > .np-banner::after { background: linear-gradient(180deg, transparent 45%, var(--bg)); }
.np-drawer-body .np-detail-head.has-banner > .np-avatar--lg { box-shadow: 0 0 0 3px var(--bg); }
/* the contact page: the strip across the top of its card */
.np-cp-head.has-banner { position: relative; padding-top: 146px; }
.np-cp-head > .np-banner { height: 132px; border-top-left-radius: inherit; border-top-right-radius: inherit; }
.np-cp-head.has-banner > .np-cp-avatar { margin-top: -54px; box-shadow: 0 0 0 4px var(--card); }
/* the line about the read: quiet, under the name */
.np-fresh-slot:empty { display: none; }
.np-fresh { margin: 8px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--ink-soft); overflow-wrap: anywhere; }
.np-fresh.is-busy::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 7px; vertical-align: -1px;
border: 2px solid var(--line); border-top-color: var(--blue); border-radius: 50%; animation: np-fresh-spin .8s linear infinite; }
@keyframes np-fresh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .np-fresh.is-busy::before { animation: none; } }
@media (max-width: 640px) {
.np-detail-head.has-banner { padding-top: 82px; }
.np-detail-head > .np-banner { height: 72px; }
.np-detail-head.has-banner > .np-avatar--lg { margin-top: -32px; }
.np-cp-head.has-banner { padding-top: 98px; }
.np-cp-head > .np-banner { height: 86px; }
.np-cp-head.has-banner > .np-cp-avatar { margin-top: -40px; }
}
/* ---- A note ready for everyone (lib/touch-notes.js; owner, 2026-10-02: "Please do the draft for full
network as soon as possible"): their note on their page and in the drawer, the list's "Note ready"
mark, and the line under Stay in touch's header. Theme tokens only. ---- */
.np-tn-status { margin: 0 0 8px; padding: 2px 0 2px 9px; border-left: 3px solid var(--line); font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); overflow-wrap: anywhere; }
.np-tn-status[hidden] { display: none; }
.np-tn-status.is-ready, .np-tn-status.is-drafting { border-left-color: var(--blue); }
.np-tn-status.is-stale { border-left-color: var(--amber); }
.np-tn-status.is-sent { border-left-color: var(--green); }
.np-tn-status.is-error { border-left-color: var(--red); }
.np-tn-status.is-drafting::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 7px; vertical-align: -1px;
border: 2px solid var(--line); border-top-color: var(--blue); border-radius: 50%; animation: np-fresh-spin .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .np-tn-status.is-drafting::before { animation: none; } }
.np-tn .np-tn-text { width: 100%; box-sizing: border-box; min-height: 92px; line-height: 1.45; }
.np-tn.has-note .np-tn-text { border-color: var(--blue); }
.np-tn-acts { align-items: center; }
.np-tn-acts [hidden] { display: none; }
.np-tn-acts .np-tn-reset { margin-left: auto; }
.np-drawer-note { margin: 12px 0 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); }
.np-drawer-note .np-subhead { margin-top: 0; }
.np-card-meta .np-card-note { padding: 0 8px; border: 1px solid var(--blue); border-radius: 999px; background: var(--blue-tint);
font-size: 11.5px; font-weight: 600; line-height: 18px; color: var(--blue); white-space: nowrap; }
.np-touch-notes { margin: -4px 0 10px; font-size: 12.5px; color: var(--ink-soft); }
@media (max-width: 640px) {
.np-tn .np-tn-text { font-size: 16px; } /* iOS zooms in on a smaller box */
.np-tn-acts .np-tn-reset { margin-left: 0; }
}
/* ---- WhatsApp, SMS and iMessage (docs/specs/CHATS_INGEST_CONTRACT.md; owner, 2026-10-03: "get all the
whatsapp and messages in studio"): a chat on a contact's timeline (its app named on a chip), the mark on
a Profile Browser row, the WhatsApp tab (what was read, To confirm, Groups and a group's view) and a Stay
in touch row's Copy / Open in WhatsApp. Each app's colour is a cue beside its name, never the only one,
and the words stay in the ink colour. Theme tokens only: light and dark alike. ---- */
.np-chan { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; padding: 0 8px; border: 1px solid var(--line);
border-radius: 999px; background: var(--surface-soft); font-size: 11.5px; font-weight: 700; line-height: 18px; color: var(--ink); white-space: nowrap; }
.np-chan::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-soft); }
.np-chan--whatsapp { border-color: var(--green-line); background: var(--green-tint); }
.np-chan--whatsapp::before { background: var(--green); }
.np-chan--imessage { border-color: var(--blue); background: var(--blue-tint); }
.np-chan--imessage::before { background: var(--blue); }
.np-chan--sms { border-color: var(--slate-line); background: var(--slate-tint); }
.np-chan--sms::before { background: var(--slate); }
/* the timeline: the row's circle in its app's colour, who wrote it, the message (or "Photo" and its caption) */
.np-timeline .np-tl-row--whatsapp .np-tl-ico { border-color: var(--green-line); background: var(--green-tint); }
.np-timeline .np-tl-row--imessage .np-tl-ico { border-color: var(--blue); background: var(--blue-tint); }
.np-timeline .np-tl-row--sms .np-tl-ico { border-color: var(--slate-line); background: var(--slate-tint); }
.np-tl-row--chat .np-tl-who { font-weight: 600; color: var(--ink-soft); overflow-wrap: anywhere; }
.np-tl-chat .np-tl-chattext { display: inline; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.np-tl-media { display: inline-flex; align-items: center; margin-right: 6px; padding: 0 7px; border: 1px dashed var(--ink-faint); border-radius: 6px;
background: var(--surface-soft); font-size: 12px; font-weight: 600; line-height: 18px; color: var(--ink); vertical-align: 1px; white-space: nowrap; }
.np-tl-chatnone { color: var(--ink-soft); font-style: italic; }
.np-chat-fold { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.np-chat-fold > .is-folded { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden; }
/* Profile Browser: the mark beside "Profile read" (.np-chan) */
.np-card-meta .np-card-chat { font-size: 11.5px; }
/* the WhatsApp tab */
.np-wa-line { margin: 2px 0 6px; font-size: 13px; line-height: 1.5; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.np-wa-err { margin: 6px 0 0; padding-left: 8px; border-left: 3px solid var(--red); font-size: 12.5px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.np-wa-gnote { margin: 4px 0 8px; font-size: 13px; color: var(--ink-soft); overflow-wrap: anywhere; }
.np-wa-err[hidden], .np-wa-gnote[hidden], .np-wa-gview[hidden], .np-wa-group[hidden], .np-wa-glist[hidden], .np-wa-gmore[hidden] { display: none; }
.np-wa-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 10px; align-items: start; }
.np-wa-item { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.np-wa-item[aria-busy="true"] { opacity: .75; }
.np-wa-ihead { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.np-wa-iname { min-width: 0; font-size: 14.5px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.np-wa-kind { padding: 0 7px; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 18px; color: var(--ink-soft); }
.np-wa-ifacts { font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.np-wa-last { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; margin: 0; padding-left: 8px;
border-left: 3px solid var(--line); font-size: 13px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.np-wa-lastwho { font-weight: 700; }
.np-wa-q { margin: 4px 0 0; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.np-wa-cands { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.np-wa-cand { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 8px; border-top: 1px solid var(--line); }
.np-wa-cand:first-child { border-top: 0; }
.np-wa-cand > .np-avatar { align-self: center; }
.np-wa-cid { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; }
.np-wa-cid .np-wa-cname { align-self: flex-start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
/* what tells two people of one name apart: two lines of it, never cut to one */
.np-wa-chead { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
font-size: 12px; line-height: 1.35; color: var(--ink-soft); overflow-wrap: anywhere; }
.np-wa-cand .btn, .np-wa-iacts .btn { flex: 0 0 auto; min-height: 30px; padding: 4px 10px; }
.np-wa-iacts { display: flex; flex-wrap: wrap; gap: 6px; }
.np-wa-iacts .np-wa-new { white-space: normal; text-align: left; line-height: 1.3; }
.np-wa-gbar { display: flex; margin: 2px 0 8px; }
.np-wa-gbar .np-wa-search { flex: 1 1 auto; width: 100%; max-width: 420px; min-width: 0; padding: 8px 12px; font-size: 13.5px; }
/* the groups as small cards, as many across as fit (one on a phone) */
.np-wa-glist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 8px; align-items: start; }
.np-wa-grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.np-wa-ghead { display: flex; align-items: center; gap: 8px; min-width: 0; }
.np-wa-ghead .np-wa-gname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
.np-wa-gfacts { margin: 0; font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* a group's view, in the list's place */
.np-wa-back { display: inline-flex; align-items: center; padding: 4px 0; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 700;
color: var(--blue); cursor: pointer; }
.np-wa-back:hover, .np-wa-back:focus-visible { text-decoration: underline; }
.np-wa-gtitle { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; margin: 6px 0 2px; }
.np-wa-gh { min-width: 0; margin: 0; font-size: 18px; font-weight: 800; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.np-wa-gh:focus { outline: none; }
.np-wa-sh { margin: 14px 0 8px; }
.np-wa-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 4px 14px; margin: 0; padding: 0; list-style: none; }
.np-wa-member { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 13.5px; color: var(--ink); }
.np-wa-member .np-wa-mname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
.np-wa-mphone { flex: 0 0 auto; font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.np-wa-allmembers { margin-top: 6px; }
.np-wa-msgs { display: flex; flex-direction: column; gap: 6px; max-height: min(65vh, 620px); margin: 0; padding: 10px 12px; overflow-y: auto;
overscroll-behavior: contain; list-style: none; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); }
.np-wa-msgs:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.np-wa-who { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--ink); cursor: pointer;
text-decoration: underline; text-decoration-color: var(--ink-faint); text-underline-offset: 2px; }
.np-wa-who:hover, .np-wa-who:focus-visible { text-decoration-color: currentColor; }
.np-rw-bubble.is-mine .np-tl-media { border-color: currentColor; background: transparent; color: inherit; }
.np-rw-bubble.is-mine .np-rw-fold, .np-rw-bubble.is-mine .np-tl-chatnone { color: inherit; }
.np-rw-bubble .np-rw-btext.is-folded { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; line-clamp: 8; overflow: hidden; }
/* Stay in touch, a row for someone with no LinkedIn profile: Copy, then Open in WhatsApp (a link, a new tab) */
.np-touch-noteacts .np-touch-wa { text-decoration: none; }
/* the status card: Match again, and its answer (People → Suggestions) */
.np-wa-status .np-touch-head { align-items: center; }
.np-wa-rematch { flex: 0 0 auto; min-height: 30px; padding: 4px 12px; }
.np-wa-rematch[aria-disabled="true"] { opacity: .7; cursor: progress; }
.np-wa-said { margin: 0 0 6px; padding-left: 8px; border-left: 3px solid var(--blue); font-size: 13px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.np-wa-topeople { font-weight: 700; color: var(--blue); white-space: nowrap; }
/* Chats: his one-to-one chats, each on its contact. The search and the filter chips on one line when they fit. */
.np-wa-tbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 2px 0 10px; }
.np-wa-tbar .np-wa-search { flex: 1 1 240px; width: 100%; max-width: 420px; min-width: 0; padding: 8px 12px; font-size: 13.5px; }
.np-wa-tchips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.np-wa-tchip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px;
background: var(--card); font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink); cursor: pointer; white-space: nowrap; }
.np-wa-tchip:hover { border-color: var(--ink-faint); }
.np-wa-tchip:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* the one shown: a ring and a tint, never the colour alone (and aria-pressed for a screen reader) */
.np-wa-tchip[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-tint); box-shadow: inset 0 0 0 1px var(--blue); }
.np-wa-tn { font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.np-wa-tchip[aria-pressed="true"] .np-wa-tn { color: var(--ink); }
.np-wa-tn[hidden], .np-wa-tlist[hidden], .np-wa-tmore[hidden] { display: none; }
.np-wa-tlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); gap: 8px; align-items: start; }
.np-wa-trow { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.np-wa-trow.has-contact { cursor: pointer; }
.np-wa-trow.has-contact:hover { border-color: var(--ink-faint); }
.np-wa-trow.is-finding { cursor: default; border-color: var(--blue); }
.np-wa-trow[aria-busy="true"] { opacity: .8; }
.np-wa-trow > .np-avatar { margin-top: 1px; }
.np-wa-tmain { display: flex; flex-direction: column; gap: 3px; flex: 1 1 0; min-width: 0; }
.np-wa-thead { display: flex; align-items: center; gap: 6px; min-width: 0; }
.np-wa-thead .np-wa-tname { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
.np-wa-thead span.np-wa-tname { font-size: 14px; font-weight: 600; color: var(--ink); }
.np-wa-twhen { flex: 0 0 auto; margin-left: auto; padding-left: 4px; font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.np-wa-how { flex: 0 0 auto; padding: 0 7px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft);
font-size: 11px; font-weight: 600; line-height: 18px; color: var(--ink); white-space: nowrap; }
.np-wa-how--phone, .np-wa-how--name { border-color: var(--green-line); background: var(--green-tint); }
.np-wa-how--hand { border-color: var(--blue); background: var(--blue-tint); }
.np-wa-how--new { border-color: var(--amber-line); background: var(--amber-tint); }
.np-wa-how--confirm { border-color: var(--slate-line); background: var(--slate-tint); }
.np-wa-tsub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--ink-soft); }
.np-wa-tlast { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin: 0;
font-size: 13px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
/* the app's chip, then the facts on its line, breaking only after a "·" */
.np-wa-tfacts { min-width: 0; font-size: 12px; line-height: 22px; color: var(--ink-soft); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.np-wa-tacts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.np-wa-tacts .btn { min-height: 30px; padding: 4px 10px; white-space: normal; text-align: left; line-height: 1.3; }
/* "Same person as…": his search, the matches under it (the To confirm candidates' look) */
.np-wa-tfind { display: flex; flex: 1 1 100%; flex-direction: column; gap: 6px; min-width: 0; padding: 8px 10px; border: 1px solid var(--line);
border-radius: 8px; background: var(--surface-soft); cursor: default; }
.np-wa-tfindh { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.np-wa-tfind .np-wa-tfindq { width: 100%; min-width: 0; padding: 7px 10px; font-size: 13.5px; }
.np-wa-tfound { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.np-wa-tfound .np-wa-cands { background: var(--card); }
.np-wa-tfound .np-wa-gnote, .np-wa-tfound .np-wa-err { margin: 0; }
.np-wa-tmore .btn { min-height: 30px; padding: 4px 10px; }
@media (max-width: 640px) {
.np-wa-gbar .np-wa-search { max-width: none; font-size: 16px; } /* iOS zooms in on a smaller box */
.np-wa-tbar .np-wa-search, .np-wa-tfind .np-wa-tfindq { max-width: none; font-size: 16px; }
/* a match's whole name on its line, "This is them" under it */
.np-wa-tfound .np-wa-cand { flex-wrap: wrap; }
.np-wa-tfound .np-wa-cid { flex: 1 1 calc(100% - 32px); }
.np-wa-tfound .np-wa-tpick { margin-left: 32px; }
.np-wa-msgs { max-height: 70vh; padding: 8px; }
.np-wa-gh { font-size: 16.5px; }
}
/* Drafts and sends by themselves (release 322, lib/touch-automation): his switches over Touch's inner tabs. */
.np-auto { margin: 8px 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); }
.np-auto-row { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.np-auto-item { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-size: 0.9rem; }
.np-auto-sel { min-height: 32px; padding: 2px 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); }
.np-auto-line { margin: 6px 0 0; color: var(--ink-soft); font-size: 0.85rem; }
/* Stay in touch: Send all checked (release 322). */
.np-touch-picklabel { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-soft); font-size: 0.85rem; }
/* release 323: the Check box on the row's own line (a 24px target), before its arrow */
.np-touch-line .np-touch-picklabel { flex: 0 0 auto; min-width: 24px; min-height: 24px; justify-content: center; cursor: pointer; }
.np-touch-line .np-touch-pick { width: 16px; height: 16px; margin: 0; cursor: pointer; accent-color: var(--blue); }
.np-touch-senderr { margin: 4px 0 0; color: var(--amber); font-size: 0.85rem; flex-basis: 100%; }
/* Select all · Send all checked on Replies, Top Comments and the First-hour boost (release 324): a row's Check box first on
its top line (a 24px target), as Stay in touch's; on the boost, the tools beside the title, how many of a post's people
are checked or in line, and a note in line with Take out. Theme tokens only. */
.np-picklabel { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; align-self: center;
min-width: 24px; min-height: 24px; color: var(--ink-soft); cursor: pointer; }
.np-pick { width: 16px; height: 16px; margin: 0; cursor: pointer; accent-color: var(--blue); }
.np-pick:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.np-pick-tools { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
/* the batch's line under the header ("Replying 2 of 5 · next in 1:42", Stop) at the strip's own size */
.np-rw .pf-run, .np-cmt .pf-run { font-size: 13.5px; }
.np-boost-tools { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 8px; min-width: 0; }
.np-boost-marks { font-size: 12px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.np-boost-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0 0; font-size: 12.5px; color: var(--ink-soft); }
.np-boost-inline-t { font-weight: 600; color: var(--blue); }
/* the review: a note held in line says why in amber; a note in line (or going) is read only, and looks it, in both themes
(studio-v2.css gives every dark textarea its own background, focused or not) */
.np-boost-inline.is-warn .np-boost-inline-t { color: var(--amber); }
textarea.np-boost-note[readonly], textarea.np-boost-note[readonly]:focus { background: var(--slate-tint); color: var(--ink-soft); cursor: default; }
@media (max-width: 640px) {
.np-boost-tools { justify-content: flex-start; }
}
/* "Refresh drafts" on Stay in touch, Profile viewers, Catch up and Replies (release 346, web/refresh-drafts.js): the button
and its line, beside "Write all shown"; the line wraps under it on a narrow screen. */
.rd { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; max-width: 100%; }
.rd-line { font-size: 12.5px; color: var(--ink-soft); min-width: 0; overflow-wrap: anywhere; }
.rd-line.is-failed { color: var(--amber); }
/* COMPOSE: ONE "OPTIONS" LINE AND THREE BUTTONS (release 347; owner, 2026-10-28: "Can you please take a look and simplify the
process?"). The media switches, the video badge and the closing line fold under one line that says what they hold
(compose.js paintOptionsSummary); Write post, Make it mine and Copy as-is follow it. */
/* dressed like its neighbours, Seed from a harvested post and Your experience bank (styles.css .cmp-seedbox, .cmp-exp); the
marker is every fold's own (studio-v2.css: a \25B8 that turns when open) */
.cmp-options { flex-basis: 100%; min-width: 0; margin: 10px 0 8px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; background: var(--bg); }
.cmp-options > summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.cmp-options[open] > summary { margin-bottom: 8px; }
#cmp-options-sum { font-weight: 400; overflow-wrap: anywhere; }
/* Make it mine is greyed while Seed the Idea is empty: there is nothing to adapt yet. Its click still says what it needs
(compose.js setupMakeMine), so a seed filled any way at all (a pull, a paste, a chip) wakes it with no script. */
#compose-view:has(#cmp-source:placeholder-shown) #cmp-make-mine { opacity: .5; }
|