/*
 * The styles of the framework's own components, for the tailwind scaffold theme: the search
 * box, the side panel, the notification bell, navigation badges, flash messages, the help
 * button, datatable actions, breadcrumbs, pagination and stat tiles.
 *
 * No page rules — nothing for `html`, `body`, the layout or the home page — so an application
 * with a Tailwind build of its own imports this file alone and keeps its own layout:
 *
 *     @import "../../vendor/mrpc/pramnosframework/scaffolding/themes/tailwind/components.css";
 *
 * The scaffolded style.css imports it, from beside it in the web root. Colours are daisyUI
 * tokens with fallbacks, as in style.css.
 */

/* ── Cross-entity search box (Html\SearchBox + data-pf-omnibox) ──────────────
   Namespaced so it does not collide with a UI framework's own classes, and
   written with token fallbacks so the same block works in all three scaffold
   themes. The results panel is positioned, not laid out inline: an omnibox that
   pushes the header taller when results arrive moves the thing you were
   clicking. */
.pf-omnibox {
    position: relative;
    display: inline-block;
}

/* One recipe, two users: the omnibox label and a Datatable's caption are both text that
   must be read and not seen. */
.pf-omnibox-label,
.pf-visually-hidden {
    /* Visually hidden, not display:none — a screen reader must still read it. */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.pf-omnibox-input {
    width: 100%;
    min-width: 12rem;
    padding: 0.45rem 0.75rem;
    font: inherit;
    color: var(--color-base-content, #1e293b);
    background: var(--color-base-100, #fff);
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: 0.375rem;
}

.pf-omnibox-input:focus {
    outline: 2px solid var(--color-primary, #2563eb);
    outline-offset: 1px;
}

.pf-omnibox-results {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    z-index: 60;
    min-width: 20rem;
    max-height: 24rem;
    overflow-y: auto;
    color: var(--color-base-content, #1e293b);
    background: var(--color-base-100, #fff);
    border: 1px solid var(--color-base-300, #e5e7eb);
    border-radius: 0.375rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.pf-omnibox-results[hidden] {
    /* Explicit, because a `display` rule above would otherwise beat the
       attribute and leave the panel permanently open. */
    display: none;
}

.pf-omnibox-group + .pf-omnibox-group {
    border-top: 1px solid var(--color-base-300, #f1f5f9);
}

.pf-omnibox-group-label {
    margin: 0;
    padding: 0.5rem 0.75rem 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.7;
}

.pf-omnibox-count {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

/*
 * The side panel — Ask about the page, and its help — when the theme styles it:
 * 'assist' => ['styles' => 'theme'] in app.php. Without that key it carries inline styles.
 */
.pf-assist { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1080; display: flex; flex-direction: column; width: min(460px, 100vw); font-size: .95rem; background: var(--color-base-100, #fff); color: var(--color-base-content, #111); box-shadow: -4px 0 24px rgba(0,0,0,.25); }
.pf-assist[hidden] { display: none; }
.pf-assist-header { display: flex; gap: .5rem; align-items: center; padding: .625rem .75rem; border-bottom: 1px solid color-mix(in oklab, currentColor 20%, transparent); }
.pf-assist-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-assist-button { background: none; border: 1px solid color-mix(in oklab, currentColor 20%, transparent); border-radius: .375rem; padding: .125rem .5rem; color: inherit; cursor: pointer; }
.pf-assist-tabs { display: flex; gap: .375rem; padding: .5rem .75rem 0; }
.pf-assist-tab[aria-selected="true"] { font-weight: 600; background: var(--color-base-200, rgba(128,128,128,.18)); }
.pf-assist-pane { flex: 1; overflow: auto; padding: .75rem 1rem; }
.pf-assist-more { margin-top: 1rem; opacity: .75; }

/* The notification bell — Html\NotificationBell, driven by pf-utils.js. */
.pf-notify { position: relative; display: inline-block; }
.pf-notify-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; color: inherit; cursor: pointer; padding: .375rem; }
.pf-notify-count { position: absolute; top: 0; right: 0; min-width: 1.1rem; height: 1.1rem; padding: 0 .25rem; border-radius: 999px; font-size: .7rem; font-weight: 700; line-height: 1.1rem; text-align: center; color: #fff; background: var(--color-error, #dc2626); }
.pf-notify-count[hidden] { display: none; }
.pf-notify-panel { position: absolute; right: 0; top: 100%; z-index: 1060; width: 22rem; max-width: calc(100vw - 1rem); max-height: 28rem; overflow: auto; border: 1px solid color-mix(in oklab, currentColor 15%, transparent); border-radius: .5rem; background: var(--color-base-100, #fff); color: var(--color-base-content, #111); box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.pf-notify-panel[hidden] { display: none; }
/* data-pf-modal: a page shown over another, in a <dialog> (pf-utils.js) */
.pf-modal { margin: auto; inset: 0; width: min(64rem, calc(100vw - 2rem)); max-height: calc(100vh - 4rem); padding: 0; border: 0; border-radius: .75rem; background: var(--color-base-100, #fff); color: var(--color-base-content, #111); box-shadow: 0 20px 48px rgba(0,0,0,.3); }
.pf-modal::backdrop { background: rgba(0,0,0,.45); }
.pf-modal-close { position: sticky; top: 0; display: flex; justify-content: flex-end; margin: 0; padding: .5rem .5rem 0; }
.pf-modal-close button { background: none; border: 0; color: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; opacity: .7; }
.pf-modal-body { padding: 0 1.25rem 1.25rem; }
.pf-notify-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .625rem .75rem; border-bottom: 1px solid color-mix(in oklab, currentColor 15%, transparent); }
.pf-notify-read-all { background: none; border: 0; color: inherit; opacity: .75; cursor: pointer; font-size: .85rem; text-decoration: underline; }
.pf-notify-tabs { display: flex; gap: .25rem; padding: .375rem .5rem; border-bottom: 1px solid color-mix(in oklab, currentColor 15%, transparent); }
.pf-notify-tab { background: none; border: 0; border-radius: .375rem; padding: .25rem .5rem; color: inherit; cursor: pointer; font-size: .85rem; }
.pf-notify-tab[aria-selected="true"] { font-weight: 600; background: var(--color-base-200, rgba(128,128,128,.12)); }
.pf-notify-tab-count[hidden] { display: none; }
.pf-notify-list { list-style: none; margin: 0; padding: 0; }
.pf-notify-foot { padding: .5rem .75rem; text-align: center; font-size: .85rem; }
.pf-notify-all { color: inherit; text-decoration: underline; }
.pf-notify-item a { display: block; padding: .5rem .75rem; color: inherit; text-decoration: none; border-bottom: 1px solid color-mix(in oklab, currentColor 15%, transparent); }
.pf-notify-item a:hover { background: var(--color-base-200, rgba(128,128,128,.12)); }
.pf-notify-item.is-unread a { font-weight: 600; }
.pf-notify-title, .pf-notify-message, .pf-notify-time { display: block; }
.pf-notify-message { font-weight: 400; opacity: .85; font-size: .9rem; }
.pf-notify-time { font-weight: 400; opacity: .6; font-size: .75rem; }
.pf-notify-empty { margin: 0; padding: 1rem .75rem; opacity: .7; }

/* The unread count beside a navigation label — NavItem::badgeHtml(). */
.pf-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    margin-inline-start: .25rem;
    padding: 0 .35rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
    color: #fff;
    background: var(--color-error, #dc2626);
}

/* What addMessage() and addError() flashed before a redirect — Html\Flash, above every screen. */
.pf-flash {
    display: grid;
    gap: .5rem;
    margin-bottom: 1rem;
}

.pf-flash-message,
.pf-flash-error {
    margin: 0;
    padding: .75rem 1rem;
    border-radius: .375rem;
    border-left: 4px solid currentColor;
}

.pf-flash-message {
    color: var(--color-success, #16a34a);
    background: color-mix(in oklab, var(--color-success, #16a34a) 12%, transparent);
}

.pf-flash-error {
    color: var(--color-error, #dc2626);
    background: color-mix(in oklab, var(--color-error, #dc2626) 12%, transparent);
}

/* The site's help button as a small, muted question mark — 'help' => ['site' => ['button' => 'icon']]. */
.pf-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    color: inherit;
    opacity: .6;
}

.pf-help-icon:hover,
.pf-help-icon:focus-visible {
    opacity: 1;
}

.pf-omnibox-option {
    display: block;
    padding: 0.5rem 0.75rem;
    color: var(--color-base-content, #1e293b);
    text-decoration: none;
    cursor: pointer;
}

.pf-omnibox-option:hover,
.pf-omnibox-option.is-active {
    background: var(--color-base-200, #f1f5f9);
}

.pf-omnibox-title {
    display: block;
    font-weight: 500;
}

.pf-omnibox-subtitle {
    display: block;
    font-size: 0.8125rem;
    opacity: 0.7;
}

.pf-omnibox-empty,
.pf-omnibox-loading {
    margin: 0;
    padding: 0.75rem;
    font-size: 0.875rem;
    opacity: 0.7;
}

/*
 * Datatable row actions, column filters and state pills.
 *
 * The markup comes from the framework — `Html\Icon` and `Html\Datatable` render it into
 * the JSON a table inserts — so the classes have to be styled by the theme rather than
 * carried as inline styles: a project whose CSP has no `'unsafe-inline'` for styles would
 * strip those, and the actions would be unreadable in exactly the strictest deployments.
 *
 * Two of these exist because a CSS reset removed something. Tailwind's preflight sets
 * `svg { display: block }`, which made a row of icons stack one per line; and a bare
 * `<input>` has no border, no padding and no background, which made a column filter a box
 * that was there and invisible.
 */
.pf-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-field, 0.375rem);
    color: inherit;
    opacity: 0.7;
    transition: opacity 0.15s, background-color 0.15s, color 0.15s;
}

.pf-action:hover,
.pf-action:focus-visible {
    opacity: 1;
    background-color: color-mix(in oklab, currentColor 12%, transparent);
}

.pf-action + .pf-action {
    margin-inline-start: 0.125rem;
}

/* A row's actions — open, edit, delete — side by side; one that cannot be done now is dimmed
   and says why in its title. */
.pf-row-actions { display: inline-flex; align-items: center; gap: .125rem; white-space: nowrap; }
.pf-action[disabled] { opacity: .3; cursor: not-allowed; background: none; }

.pf-action-danger:hover,
.pf-action-danger:focus-visible {
    color: var(--color-error, #dc2626);
}

.pf-icon {
    display: inline-block;
    width: 1.05em;
    height: 1.05em;
}

.pf-footsearch {
    width: 100%;
    min-width: 6rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    font-weight: 400;
    border: 1px solid var(--color-base-300, #d4d4d8);
    border-radius: var(--radius-field, 0.375rem);
    background-color: var(--color-base-100, #fff);
    color: inherit;
}

.pf-footsearch:focus {
    outline: 2px solid var(--color-primary, #2563eb);
    outline-offset: -1px;
}

.pf-state {
    display: inline-block;
    padding: 0.0625rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    line-height: 1.4;
}

.pf-state-on {
    background-color: color-mix(in oklab, var(--color-success, #16a34a) 15%, transparent);
    color: var(--color-success, #16a34a);
}

.pf-state-off {
    background-color: color-mix(in oklab, currentColor 10%, transparent);
    opacity: 0.7;
}

.pf-muted {
    opacity: 0.55;
    font-size: 0.8125rem;
}

/* The two components that used to emit no themeable hook at all.
   `Breadcrumb` emitted Bootstrap's own `breadcrumb`, which read as neutral and was not;
   `Pagination` emitted no class, so nothing here could reach it. Both are `pf-*` now, the
   same convention the omnibox and the rest already use — and written in the same tokens,
   so a palette change in app/themes/theme.css reaches them like everything else. */
.pf-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    font-size: 0.875rem;
    color: var(--color-base-content, #64748b);
}

.pf-breadcrumb a {
    color: var(--color-primary, #2563eb);
}

.pf-breadcrumb li + li::before {
    content: "/";
    padding-right: 0.5rem;
    color: var(--color-base-content, #64748b);
}

.pf-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
}

.pf-pagination a,
.pf-pagination span {
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--color-base-300, #cbd5e1);
    border-radius: 0.25rem;
    text-decoration: none;
    color: var(--color-base-content, #1e293b);
    background: var(--color-base-100, #fff);
    /* Large enough to hit on a touch screen: WCAG 2.5.8 asks for 24px, and a pager is
       the control people tap most often on a phone. */
    min-width: 2.25rem;
    text-align: center;
}

.pf-pagination a:hover {
    border-color: var(--color-primary, #2563eb);
    color: var(--color-primary, #2563eb);
}

.pf-pagination .current,
.pf-pagination [aria-current="page"] {
    background: var(--color-primary, #2563eb);
    border-color: var(--color-primary, #2563eb);
    color: var(--color-primary-content, #fff);
    font-weight: 600;
    /* Not colour alone: WCAG 1.4.1. The weight carries it where colour cannot. */
    text-decoration: underline;
}

/* Stat tiles — Pramnos\Html\StatTile. A figure with a label, the tile every dashboard draws.
   Tabular digits so a number that changes does not shift its neighbours; the state is a left
   border, so it reads without colour too (the data-state is on the element for scripts). */
.pf-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 0.75rem;
    margin: 0 0 1rem;
}
.pf-stat-tile {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.875rem 1rem;
    background: var(--color-base-100, #fff);
    color: var(--color-base-content, #1f2937);
    border: 1px solid var(--color-base-300, #e5e7eb);
    border-left-width: 4px;
    border-radius: 0.5rem;
    text-decoration: none;
}
a.pf-stat-tile:hover { border-color: var(--color-primary, #2563eb); }
.pf-stat-tile__label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.65;
}
.pf-stat-tile__value {
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.pf-stat-tile__note { font-size: 0.8125rem; opacity: 0.65; }
.pf-stat-tile__progress { width: 100%; height: 0.5rem; accent-color: var(--color-primary, #2563eb); }
.pf-stat-tile--good { border-left-color: var(--color-success, #16a34a); }
.pf-stat-tile--good .pf-stat-tile__progress { accent-color: var(--color-success, #16a34a); }
.pf-stat-tile--warning { border-left-color: var(--color-warning, #d97706); }
.pf-stat-tile--critical { border-left-color: var(--color-error, #dc2626); }

/* Charts — Pramnos\Html\Chart, drawn by pf-utils.js. The canvas box is shown, and given its
   height, when the chart is drawn; until then — or without Chart.js — the table is the chart. */
/* Relative and clipped: the table kept for screen readers is visually hidden, and a hidden table
   still lays out at its full width — on a phone it widened the page. */
.pf-chart-figure { position: relative; overflow: hidden; margin: 0 0 1rem; }
.pf-chart-title { font-weight: 600; margin-bottom: .5rem; }
.pf-chart-canvas { position: relative; height: 300px; }
.pf-chart-canvas[hidden] { display: none; }
.pf-chart-data { width: 100%; border-collapse: collapse; font-size: .875rem; font-variant-numeric: tabular-nums; }
.pf-chart-data caption { text-align: left; font-weight: 600; padding-bottom: .25rem; }
.pf-chart-data th, .pf-chart-data td { padding: .25rem .5rem; border-bottom: 1px solid color-mix(in oklab, currentColor 15%, transparent); text-align: left; }
.pf-chart-data td { text-align: right; }

/* Data tables — Pramnos\Html\Datatable. DataTables writes its own DOM, so these reach it under
   the table's .pf-datatable wrapper: the buttons, the length and the search on one line, the count and
   the page buttons on the next, a processing note over the table, and sort marks that need no
   icon font — the Bootstrap integration's expect Glyphicons, which a page without them shows as
   empty boxes. */
.pf-datatable .dataTables_wrapper { position: relative; }
.pf-datatable .dataTables_wrapper::after { content: ""; display: block; clear: both; }
.pf-datatable .dataTables_length, .pf-datatable .dataTables_filter { margin-bottom: .75rem; }
.pf-datatable .dataTables_length label, .pf-datatable .dataTables_filter label { display: inline-flex; align-items: center; gap: .5rem; font-weight: 400; }
/* min-width (not width: auto) and appearance: menulist: daisyUI 5.7.22's
   appearance: base-select on .select sized this to the selected value alone
   and dropped the open popup's background (Chrome's experimental
   Customizable Select API). menulist opts this select back into the plain
   native popup, which every browser renders with one. */
.pf-datatable .dataTables_length select { min-width: 4.5rem; appearance: menulist; }
.pf-datatable .dataTables_filter { float: right; }
.pf-datatable .dataTables_filter input { width: auto; margin-left: 0; }
.pf-datatable .dataTables_info { float: left; padding-top: .75rem; font-size: .875rem; opacity: .7; }
.pf-datatable .dataTables_paginate { float: right; display: flex; flex-wrap: wrap; gap: .25rem; padding-top: .5rem; }
.pf-datatable .dataTables_paginate .ellipsis { padding: 0 .25rem; }
.pf-datatable .pf-datatable-top { display: flex; align-items: center; gap: .5rem 1rem; margin-bottom: .75rem; }
.pf-datatable .pf-datatable-top > * { float: none; margin: 0; flex: 0 0 auto; }
.pf-datatable .pf-datatable-top > .dt-buttons { flex: 1 1 0; min-width: 12rem; display: flex; flex-wrap: wrap; gap: .25rem; }
.pf-datatable .pf-datatable-top > .dataTables_filter { flex: 0 0 auto; order: 0; margin-left: auto; }
@media (max-width: 640px) { .pf-datatable .pf-datatable-top { flex-wrap: wrap; } }
.pf-datatable table.dataTable thead th, .pf-nowrap { white-space: nowrap; }
.pf-datatable-processing { position: absolute; top: 50%; left: 50%; z-index: 10; transform: translate(-50%, -50%); padding: .5rem 1rem; border-radius: .5rem; background: var(--color-base-100, #fff); box-shadow: 0 4px 12px rgba(0, 0, 0, .15); }
.pf-datatable table.dataTable thead > tr > th.sorting,
.pf-datatable table.dataTable thead > tr > th.sorting_asc,
.pf-datatable table.dataTable thead > tr > th.sorting_desc { position: relative; padding-right: 1.75rem; cursor: pointer; }
.pf-datatable table.dataTable thead > tr > th.sorting::before,
.pf-datatable table.dataTable thead > tr > th.sorting_asc::before,
.pf-datatable table.dataTable thead > tr > th.sorting_desc::before,
.pf-datatable table.dataTable thead > tr > th.sorting::after,
.pf-datatable table.dataTable thead > tr > th.sorting_asc::after,
.pf-datatable table.dataTable thead > tr > th.sorting_desc::after { position: absolute; right: .6rem; display: block; font-family: inherit; font-size: .7em; line-height: .9; opacity: .25; }
.pf-datatable table.dataTable thead > tr > th.sorting::before,
.pf-datatable table.dataTable thead > tr > th.sorting_asc::before,
.pf-datatable table.dataTable thead > tr > th.sorting_desc::before { content: "\25B2"; bottom: 50%; top: auto; }
.pf-datatable table.dataTable thead > tr > th.sorting::after,
.pf-datatable table.dataTable thead > tr > th.sorting_asc::after,
.pf-datatable table.dataTable thead > tr > th.sorting_desc::after { content: "\25BC"; top: 50%; bottom: auto; }
.pf-datatable table.dataTable thead > tr > th.sorting_asc::before,
.pf-datatable table.dataTable thead > tr > th.sorting_desc::after { opacity: .9; }

/* The dashboard each person arranges — DashboardController, edited by pf-utils.js. Two columns
   from 1024px, one below; a wide card spans both. The tools appear while customising. */
.pf-dashboard { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.pf-dashboard-full, .pf-dashboard > [data-size="full"] { grid-column: 1 / -1; }
.pf-dashboard-head { display: flex; align-items: center; gap: .5rem; }
.pf-dashboard-tools { margin-left: auto; display: inline-flex; gap: .25rem; }
.pf-dashboard-tools[hidden], .pf-dashboard-bar[hidden] { display: none; }
.pf-dashboard-bar { margin-bottom: 1rem; }
.pf-dashboard-health { list-style: none; margin: 0; padding: 0; }
.pf-dashboard-health li { display: flex; align-items: flex-start; gap: .75rem; padding: .5rem 0; border-bottom: 1px solid color-mix(in oklab, currentColor 12%, transparent); }
.pf-dashboard-health li:last-child { border-bottom: 0; }
.pf-dashboard-health-name { font-weight: 600; flex-shrink: 0; }
.pf-dashboard-health-message { flex: 1; font-size: .85rem; opacity: .75; text-align: right; }
.pf-dashboard-status { margin-left: auto; flex-shrink: 0; padding: .05rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 700; background: color-mix(in oklab, currentColor 12%, transparent); }
.pf-dashboard-status--ok { background: var(--color-success, #16a34a); color: #fff; }
.pf-dashboard-status--notice { background: var(--color-info, #0284c7); color: #fff; }
.pf-dashboard-status--degraded { background: var(--color-warning, #d97706); color: #fff; }
.pf-dashboard-status--down { background: var(--color-error, #dc2626); color: #fff; }
.pf-dashboard-status--good { background: var(--color-success, #16a34a); color: #fff; }
.pf-dashboard-status--needs-improvement { background: var(--color-warning, #d97706); color: #fff; }
.pf-dashboard-status--poor { background: var(--color-error, #dc2626); color: #fff; }
.pf-dashboard-channel { margin: .75rem 0 .25rem; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; opacity: .7; }
.pf-dashboard-channel:first-child { margin-top: 0; }
.pf-dashboard-vitals { width: 100%; border-collapse: collapse; font-size: .875rem; }
.pf-dashboard-vitals th, .pf-dashboard-vitals td { padding: .35rem .5rem; text-align: left; border-bottom: 1px solid color-mix(in oklab, currentColor 12%, transparent); }
.pf-dashboard-vitals td.pf-dashboard-status { text-align: right; white-space: nowrap; }
/* Four widths on four columns (s 1, m 2, l 3, full 4); two columns on a tablet, where anything
   wider than s spans both; one on a phone. `half`, from layouts of the older shape, is m. */
@media (min-width: 640px) {
    .pf-dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pf-dashboard > [data-size="m"], .pf-dashboard > [data-size="half"], .pf-dashboard > [data-size="l"] { grid-column: span 2; }
}
@media (min-width: 1024px) {
    .pf-dashboard { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pf-dashboard > [data-size="s"] { grid-column: span 1; }
    .pf-dashboard > [data-size="m"], .pf-dashboard > [data-size="half"] { grid-column: span 2; }
    .pf-dashboard > [data-size="l"] { grid-column: span 3; }
}
.pf-dashboard-settings[hidden] { display: none; }
/* Dragging by the grip and resizing by the corner (pf-utils.js, pointer events). The lifted card
   follows the pointer above the page; a dashed placeholder keeps its place. */
.pf-dashboard > [data-pf-widget] { position: relative; }
.pf-dashboard-grip { cursor: grab; touch-action: none; user-select: none;
    /* ⠿ is a Braille pattern, and a theme font without the block (Poppins, Inter) draws tofu. */
    font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", "DejaVu Sans", sans-serif; }
/* The catalogue dialog may carry a theme's .card; a .card that is display:flex outranks the
   browser's dialog:not([open]) { display: none } and leaves the catalogue standing open. */
[data-pf-dashboard-catalogue-dialog]:not([open]), [data-pf-dashboard-presets-dialog]:not([open]) { display: none; }
.pf-dashboard > .pf-dashboard-dragging {
    position: fixed; z-index: 60; margin: 0; pointer-events: none;
    transform: rotate(1deg) scale(1.02); opacity: .92; box-shadow: 0 18px 40px rgb(0 0 0 / .25);
}
.pf-dashboard-dragging .pf-dashboard-grip { cursor: grabbing; }
.pf-dashboard-placeholder {
    border: 2px dashed color-mix(in oklab, currentColor 45%, transparent); border-radius: .5rem;
    background: color-mix(in oklab, currentColor 6%, transparent);
}
.pf-dashboard > .pf-dashboard-resizing { outline: 2px solid color-mix(in oklab, currentColor 45%, transparent); outline-offset: 2px; }
.pf-dashboard-size-handle {
    position: absolute; right: 2px; bottom: 2px; width: 20px; height: 20px; cursor: nwse-resize; touch-action: none;
    background: linear-gradient(135deg, transparent 50%, color-mix(in oklab, currentColor 40%, transparent) 50%);
}
.pf-dashboard-size-handle[hidden] { display: none; }
.pf-dashboard-size-badge {
    position: absolute; right: 26px; bottom: 6px; padding: 2px 8px; border-radius: 999px; font-size: .75rem;
    font-weight: 600; background: color-mix(in oklab, currentColor 15%, transparent);
}

/* The column picker — Html\Datatable's "Show" button under tailwind and plain-css: a list that
   scrolls, so a table of sixty columns is one button and not lines of links. */
.pf-datatable-columns { float: right; position: relative; margin-left: .5rem; }
.pf-datatable-columns > summary { list-style: none; cursor: pointer; }
.pf-datatable-columns > summary::-webkit-details-marker { display: none; }
.pf-datatable-columns-menu { position: absolute; right: 0; z-index: 20; min-width: 12rem; max-height: 20rem; overflow-y: auto; margin: .25rem 0 0; padding: .25rem; list-style: none; border: 1px solid color-mix(in oklab, currentColor 15%, transparent); border-radius: .375rem; background: var(--color-base-100, #fff); box-shadow: 0 6px 16px rgba(0, 0, 0, .15); }
.pf-datatable-columns-menu a { display: block; padding: .25rem .5rem; border-radius: .25rem; color: inherit; text-decoration: none; white-space: nowrap; }
.pf-datatable-columns-menu a:hover, .pf-datatable-columns-menu a:focus-visible { background: color-mix(in oklab, currentColor 10%, transparent); }
.pf-datatable table.dataTable > tbody > tr > td { vertical-align: top; }
.pf-datatable table.dataTable.table:not(.table-sm) > thead > tr > th,
.pf-datatable table.dataTable.table:not(.table-sm) > tbody > tr > td { padding: .3125rem .625rem; }

@media (max-width: 639px) {
    /* A 12rem search box and a 20rem panel anchored to its right edge are wider
       than what is left of a 390px header: the input shrinks, and the results
       span the screen instead of hanging off its left side. */
    .pf-omnibox-input { min-width: 7rem; }
    .pf-omnibox-results {
        position: fixed;
        top: 4rem;
        left: 0.5rem;
        right: 0.5rem;
        min-width: 0;
    }
}

/* \Pramnos\Auth\Impersonation::banner(): an administrator seeing the site as somebody else */
.pf-impersonation { position: sticky; top: 0; z-index: 1000; padding: .5rem 1rem; background: #fef3c7; color: #78350f; text-align: center; font-size: .875rem; }
.pf-impersonation button { margin-left: .5rem; }

/* pf-calendar.js (FullCalendar): the theme's colours, light and dark, and a toolbar that wraps on a phone */
.pf-calendar {
    --fc-page-bg-color: transparent;
    --fc-neutral-bg-color: color-mix(in oklab, currentColor 6%, transparent);
    --fc-border-color: color-mix(in oklab, currentColor 15%, transparent);
    --fc-today-bg-color: color-mix(in oklab, var(--color-primary, #2563eb) 12%, transparent);
    --fc-event-bg-color: var(--color-primary, #2563eb);
    --fc-event-border-color: var(--color-primary, #2563eb);
    --fc-button-bg-color: var(--color-primary, #2563eb);
    --fc-button-border-color: var(--color-primary, #2563eb);
    --fc-button-hover-bg-color: color-mix(in oklab, var(--color-primary, #2563eb) 85%, black);
    --fc-button-active-bg-color: color-mix(in oklab, var(--color-primary, #2563eb) 75%, black);
    --fc-list-event-hover-bg-color: color-mix(in oklab, currentColor 8%, transparent);
    color: inherit;
}
@media (max-width: 640px) {
    .pf-calendar .fc-toolbar { flex-wrap: wrap; gap: .5rem; }
    .pf-calendar .fc-toolbar-title { font-size: 1.1rem; }
}

/* pf-image.js (Cropper.js): the crop dialog, a round guide for an avatar, and the theme's colour */
.pf-image-dialog { margin: auto; width: min(42rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 1rem; border: 0; border-radius: .75rem; background: var(--color-base-100, #fff); color: var(--color-base-content, #1f2937); box-shadow: 0 1rem 3rem rgba(0, 0, 0, .3); }
.pf-image-dialog::backdrop { background: rgba(0, 0, 0, .6); }
.pf-image-dialog h2 { margin: 0 0 .75rem; font-size: 1.125rem; }
.pf-image-stage { height: min(60vh, 28rem); background: color-mix(in oklab, currentColor 8%, transparent); }
.pf-image-stage img { display: block; max-width: 100%; }
.pf-image-tools, .pf-image-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.pf-image-actions { justify-content: flex-end; }
.pf-image-dialog button { padding: .375rem .75rem; border: 1px solid color-mix(in oklab, currentColor 25%, transparent); border-radius: .375rem; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.pf-image-dialog button:hover { background: color-mix(in oklab, currentColor 8%, transparent); }
.pf-image-dialog button.pf-image-icon { display: inline-flex; align-items: center; justify-content: center; padding: .375rem; line-height: 0; }
.pf-image-dialog .pf-image-use { border-color: var(--color-primary, #2563eb); background: var(--color-primary, #2563eb); color: #fff; }
.pf-image-zoom { flex: 1 1 8rem; min-width: 6rem; accent-color: var(--color-primary, #2563eb); }
.pf-image-dialog .pf-image-use:disabled { opacity: .6; cursor: progress; }
.pf-image-dialog .cropper-view-box { outline-color: var(--color-primary, #2563eb); }
.pf-image-round .cropper-view-box, .pf-image-round .cropper-face { border-radius: 50%; }

/* What's new (Pramnos\Assist\WhatsNew): opened and closed by a checkbox, so it needs no script.
   Only the announcements scroll; the title and Close stay in view. */
.pf-whatsnew-toggle { display: none; }
.pf-whatsnew { display: none; position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; padding: 1rem; }
.pf-whatsnew-toggle:checked + .pf-whatsnew { display: flex; }
.pf-whatsnew-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); }
.pf-whatsnew-box { position: relative; display: flex; flex-direction: column; width: min(36rem, 100%); max-height: calc(100vh - 8em); margin: 0; padding: 1.25rem; border-radius: .75rem; background: var(--color-base-100, #fff); color: var(--color-base-content, #1f2937); box-shadow: 0 1rem 3rem rgba(0, 0, 0, .3); }
.pf-whatsnew-box h2 { margin: 0 0 .75rem; font-size: 1.125rem; font-weight: 600; }
.pf-whatsnew-body { overflow-y: auto; min-height: 0; }
.pf-whatsnew-post { margin-bottom: 1rem; }
.pf-whatsnew-post h3 { margin: 0 0 .25rem; font-size: 1rem; font-weight: 600; }
.pf-whatsnew-post ul { margin: 0; padding-inline-start: 1.25rem; list-style: disc; font-size: .875rem; }
.pf-whatsnew-more { padding: 0; border: 0; background: none; color: var(--color-primary, #2563eb); font: inherit; font-size: .875rem; cursor: pointer; }
.pf-whatsnew-more:hover { text-decoration: underline; }
.pf-whatsnew-actions { display: flex; justify-content: flex-end; margin-top: 1rem; }
.pf-whatsnew-close { padding: .375rem 1rem; border: 1px solid var(--color-primary, #2563eb); border-radius: .375rem; background: var(--color-primary, #2563eb); color: #fff; font: inherit; cursor: pointer; }
.pf-whatsnew-button { display: inline-flex; align-items: center; gap: .375rem; cursor: pointer; }
@media (max-width: 40rem) { .pf-whatsnew-button span { display: none; } }

/* A record's history: Html\HistoryPanel and HistoryPanel.svelte. */
.pf-history { margin: 1rem 0; }
.pf-history-title { font-size: 1rem; font-weight: 600; margin: 0 0 .5rem; }
.pf-history-list { list-style: none; margin: 0; padding: 0; border-left: 2px solid color-mix(in oklab, currentColor 15%, transparent); }
.pf-history-line { position: relative; padding: .375rem 0 .375rem .875rem; }
.pf-history-line::before { content: ""; position: absolute; left: -5px; top: .75rem; width: 8px; height: 8px; border-radius: 999px; background: color-mix(in oklab, currentColor 40%, transparent); }
.pf-history-what { display: block; overflow-wrap: anywhere; }
.pf-history-meta { display: block; font-size: .8rem; opacity: .65; }
.pf-history-who { font-weight: 600; }
.pf-history-empty { opacity: .7; margin: 0; }
.pf-history-pager { display: flex; align-items: center; gap: .75rem; margin-top: .5rem; font-size: .875rem; }
.pf-history-more { background: none; border: 0; color: inherit; text-decoration: underline; cursor: pointer; padding: .25rem 0; }

/* The message composer's toolbar — Html\MessageComposer, wired by pf-utils.js: the controls in a
   row that wraps, the fields' dropdown, and the save and write panels on a line of their own. */
.pf-composer-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.pf-composer-saved,
.pf-composer-signature {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}
.pf-composer-menu {
    position: relative;
}
.pf-composer-menu > summary {
    list-style: none;
    cursor: pointer;
}
.pf-composer-menu > summary::-webkit-details-marker {
    display: none;
}
.pf-composer-menu-list {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    display: flex;
    flex-direction: column;
    min-width: 11rem;
    margin-top: 0.25rem;
    padding: 0.25rem;
    background: var(--color-base-100, #fff);
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: 0.375rem;
    box-shadow: 0 6px 16px rgb(0 0 0 / 0.12);
}
.pf-composer-field {
    padding: 0.3rem 0.6rem;
    font: inherit;
    text-align: left;
    color: inherit;
    background: none;
    border: 0;
    border-radius: 0.25rem;
    cursor: pointer;
}
.pf-composer-field:hover,
.pf-composer-field:focus-visible {
    background: var(--color-base-200, #f1f5f9);
}
.pf-composer-fields:not(.pf-composer-menu-list) .pf-composer-field {
    border: 1px solid var(--color-base-300, #d1d5db);
}
.pf-composer-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
    flex-basis: 100%;
    padding: 0.75rem;
    background: var(--color-base-200, #f8fafc);
    border: 1px solid var(--color-base-300, #e2e8f0);
    border-radius: 0.375rem;
}
/* A theme's button, select and panel classes set a display that would outrank the attribute. */
.pf-composer-toolbar [hidden] {
    display: none !important;
}
.pf-composer-panel[aria-busy="true"] {
    opacity: 0.7;
    cursor: progress;
}
.pf-composer-label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1 1 16rem;
}
.pf-composer-status {
    font-size: 0.875rem;
    opacity: 0.8;
}

/* ── The audience screens — segments, consent lists, rules, A/B tests — and their builder ─────────
   One design language, the same in every theme: it reads the theme's own colours (daisyUI's
   --color-*, Bootstrap's --bs-*, the plain theme's --primary-color / --surface / --text-main) and
   sets its own type scale (titles 20/600, sections 16/600, labels 13/500, body 14), spacing
   (8/12/16/24) and 36px controls. The tokens are set on each of its roots, so a dark theme's
   colours reach them by inheritance. */
.pf-ui, .pf-audience, .pf-rule-editor, .pf-rule-canvas, .pf-site-message, .pf-audience-panel-title, .pf-audience-panel-list, .pf-combo, .pf-menu, .pf-conv-dock, .pf-conv-basic, .pf-chat, .pf-rating {
    --pf-assistant-size: 24px;
    --pf-assistant-color: var(--pf-accent);
    --pf-fg: var(--color-base-content, var(--bs-body-color, var(--text-main, #1f2937)));
    --pf-surface: var(--color-base-100, var(--bs-body-bg, var(--surface, #ffffff)));
    --pf-subtle: var(--color-base-200, var(--bs-tertiary-bg, #f5f6f8));
    --pf-line: var(--color-base-300, var(--bs-border-color, #e3e6ea));
    --pf-accent: var(--color-primary, var(--bs-primary, var(--primary-color, #2563eb)));
    --pf-accent-fg: var(--color-primary-content, #ffffff);
    --pf-ok: var(--color-success, var(--bs-success, #16a34a));
    --pf-warn: var(--color-warning, var(--bs-warning, #d97706));
    --pf-bad: var(--color-error, var(--bs-danger, #dc2626));
    --pf-info: var(--color-info, var(--bs-info, #0284c7));
    --pf-muted: color-mix(in oklab, var(--pf-fg) 60%, transparent);
    --pf-radius: 0.5rem;
    --pf-radius-lg: 0.75rem;
    --pf-control: 2.25rem;
    --pf-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 1px 3px rgb(0 0 0 / 0.06);
    --pf-pop-shadow: 0 12px 32px rgb(0 0 0 / 0.14), 0 2px 6px rgb(0 0 0 / 0.06);
    --pf-hue: var(--pf-accent);
}
.pf-ui { padding: 1.5rem 1rem; font-size: 0.875rem; line-height: 1.5; color: var(--pf-fg); }
.pf-ui *, .pf-audience *, .pf-rule-editor * { box-sizing: border-box; }
.pf-ui svg, .pf-audience svg, .pf-rule-editor svg { flex: none; }

/* The page's head: its title, a line under it, and its actions on the right. A layout that prints
   the title itself puts `pf-titled` on the body ($document->bodyclasses[] = 'pf-titled'). */
.pf-page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-bottom: 1.5rem; }
.pf-page-head > div:first-child { min-width: 0; flex: 1 1 auto; }
.pf-page-title { margin: 0; font-size: 1.25rem; font-weight: 600; line-height: 1.3; }
.pf-page-sub { margin: 0.25rem 0 0; color: var(--pf-muted); }
.pf-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-left: auto; }
.pf-titled .pf-page-head > div:first-child:has(.pf-page-title:only-child) { display: none; }
.pf-titled .pf-page-title { display: none; }

/* Cards, sections, labels, hints. */
.pf-card { background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: var(--pf-radius-lg); box-shadow: var(--pf-shadow); }
.pf-card + .pf-card, .pf-grid-2 + .pf-card, .pf-grid-3 + .pf-card { margin-top: 1rem; }
/* Cards side by side in a grid: the grid's gap is their spacing. */
.pf-grid-2 > .pf-card + .pf-card, .pf-grid-3 > .pf-card + .pf-card { margin-top: 0; }
.pf-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--pf-line); }
.pf-card-body { padding: 1.25rem; }
.pf-card-flush { overflow-x: auto; }
.pf-section-title { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.4; }
.pf-card-body > .pf-section-title:first-child { margin-bottom: 1rem; }
.pf-label { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--pf-muted); }
.pf-hint { margin: 0.25rem 0 0; font-size: 0.8125rem; color: var(--pf-muted); }
.pf-muted { color: var(--pf-muted); }
.pf-stack { display: grid; gap: 1rem; }
.pf-grid-2 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.pf-grid-3 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.pf-code { margin: 0; padding: 0.75rem 1rem; overflow-x: auto; font-size: 0.8125rem; background: var(--pf-subtle); border-radius: var(--pf-radius); }

/* Buttons: primary, outline, ghost; small; icon-only. */
.pf-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
    height: var(--pf-control); padding: 0 0.875rem; margin: 0;
    font: inherit; font-size: 0.875rem; font-weight: 500; line-height: 1; white-space: nowrap; text-decoration: none;
    color: var(--pf-fg); background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: var(--pf-radius);
    cursor: pointer; transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
.pf-btn:hover { background: var(--pf-subtle); }
.pf-btn:focus-visible, .pf-input:focus-visible, .pf-select:focus-visible, .pf-combo-button:focus-visible, .pf-join:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--pf-accent) 45%, transparent); outline-offset: 1px;
}
.pf-btn svg { width: 1rem; height: 1rem; }
.pf-btn-primary { color: var(--pf-accent-fg); background: var(--pf-accent); border-color: var(--pf-accent); }
.pf-btn-primary:hover { background: color-mix(in oklab, var(--pf-accent) 88%, black); }
.pf-btn-ghost { background: transparent; border-color: transparent; }
.pf-btn-ghost:hover { background: var(--pf-subtle); }
.pf-btn-danger { color: var(--pf-bad); }
.pf-btn-danger:hover { background: color-mix(in oklab, var(--pf-bad) 10%, transparent); }
.pf-btn-sm { height: 2rem; padding: 0 0.625rem; font-size: 0.8125rem; }
.pf-btn-icon { width: var(--pf-control); padding: 0; }
.pf-btn-sm.pf-btn-icon { width: 2rem; }
.pf-inline-form { display: inline; margin: 0; }

/* Fields. */
.pf-field { display: grid; gap: 0.375rem; align-content: start; min-width: 0; }
.pf-input, .pf-select, .pf-textarea {
    width: 100%; min-width: 0; height: var(--pf-control); padding: 0 0.75rem; margin: 0;
    font: inherit; font-size: 0.875rem; color: var(--pf-fg);
    background-color: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: var(--pf-radius);
}
.pf-input:focus, .pf-select:focus, .pf-textarea:focus { border-color: var(--pf-accent); }
.pf-input::placeholder { color: var(--pf-muted); }
.pf-input[readonly] { background: var(--pf-subtle); }
.pf-textarea { height: auto; min-height: 5rem; padding: 0.5rem 0.75rem; }
.pf-select, .pf-combo-button {
    appearance: none; padding-right: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2394a3b8'%3E%3Cpath d='M5.3 7.3a1 1 0 0 1 1.4 0L10 10.6l3.3-3.3a1 1 0 1 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.6rem center; background-size: 1rem;
}
.pf-input-short { width: 5rem; flex: none; }
.pf-input-time { width: 5.5rem; flex: none; text-align: center; font-variant-numeric: tabular-nums; }
.pf-check { display: inline-flex; align-items: center; gap: 0.375rem; }

/* A long form's buttons stay in reach. */
.pf-form-footer {
    position: sticky; bottom: 0; z-index: 5;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem;
    margin: 1.5rem 0 0; padding: 0.75rem 1.25rem;
    background: color-mix(in oklab, var(--pf-surface) 92%, transparent); backdrop-filter: blur(6px);
    border: 1px solid var(--pf-line); border-radius: var(--pf-radius-lg); box-shadow: var(--pf-shadow);
}
.pf-form-footer .pf-hint { margin: 0 auto 0 0; }

/* A list's toolbar: tabs with counts, and a search. */
.pf-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
.pf-tabs { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.25rem; background: var(--pf-subtle); border-radius: var(--pf-radius); }
.pf-tab { display: inline-flex; align-items: center; gap: 0.4rem; height: 2rem; padding: 0 0.75rem; font-weight: 500; color: var(--pf-muted); text-decoration: none; border-radius: 0.375rem; }
.pf-tab:hover { color: var(--pf-fg); }
.pf-tab[aria-current] { color: var(--pf-fg); background: var(--pf-surface); box-shadow: var(--pf-shadow); }
.pf-count { display: inline-block; min-width: 1.25rem; padding: 0 0.375rem; font-size: 0.75rem; line-height: 1.25rem; text-align: center; font-variant-numeric: tabular-nums; background: color-mix(in oklab, var(--pf-fg) 8%, transparent); border-radius: 999px; }
.pf-search { position: relative; flex: 0 1 18rem; }
.pf-search svg { position: absolute; left: 0.65rem; top: 50%; width: 1rem; height: 1rem; color: var(--pf-muted); transform: translateY(-50%); pointer-events: none; }
.pf-search .pf-input { padding-left: 2.1rem; }

/* Tables: quiet heads, a row that is one link, numbers on the right. */
.pf-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.pf-table th { padding: 0.625rem 1rem; font-size: 0.75rem; font-weight: 500; color: var(--pf-muted); text-align: left; white-space: nowrap; border-bottom: 1px solid var(--pf-line); }
.pf-table td { padding: 0.75rem 1rem; vertical-align: middle; border-bottom: 1px solid var(--pf-line); }
.pf-table tbody tr:last-child td { border-bottom: 0; }
.pf-table tbody tr { position: relative; }
.pf-table tbody tr:hover { background: color-mix(in oklab, var(--pf-subtle) 70%, transparent); }
.pf-table .pf-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-row-name { font-weight: 500; color: var(--pf-fg); text-decoration: none; }
.pf-row-name:hover, .pf-row-name:focus-visible { text-decoration: underline; }
.pf-row-link { font-weight: 500; color: var(--pf-fg); text-decoration: none; }
.pf-row-link::after { content: ""; position: absolute; inset: 0; }
.pf-row-link:focus-visible { outline: none; }
.pf-row-link:focus-visible::after { outline: 2px solid color-mix(in oklab, var(--pf-accent) 45%, transparent); outline-offset: -2px; }
.pf-row-desc { display: block; margin-top: 0.125rem; font-size: 0.8125rem; font-weight: 400; color: var(--pf-muted); }
.pf-table a:not(.pf-row-link), .pf-table form, .pf-table button { position: relative; z-index: 1; }
.pf-table tr[hidden] { display: none; }

/* Badges and status pills, by tone; chips that are links; deltas. */
.pf-badge {
    display: inline-flex; align-items: center; gap: 0.375rem; height: 1.375rem; padding: 0 0.5rem;
    font-size: 0.75rem; font-weight: 500; white-space: nowrap; border-radius: 999px;
    color: var(--pf-tone, var(--pf-muted)); background: color-mix(in oklab, var(--pf-tone, var(--pf-fg)) 10%, transparent);
    border: 1px solid color-mix(in oklab, var(--pf-tone, var(--pf-fg)) 28%, transparent);
}
.pf-status::before { content: ""; width: 0.375rem; height: 0.375rem; background: currentColor; border-radius: 999px; }
.pf-tone-accent { --pf-tone: var(--pf-accent); }
.pf-tone-ok { --pf-tone: var(--pf-ok); }
.pf-tone-warn { --pf-tone: var(--pf-warn); }
.pf-tone-bad { --pf-tone: var(--pf-bad); }
.pf-tone-info { --pf-tone: var(--pf-info); }
.pf-tone-muted { --pf-tone: var(--pf-muted); }
.pf-tone-neutral { --pf-tone: color-mix(in oklab, var(--pf-fg) 72%, transparent); }
.pf-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.pf-chip {
    display: inline-flex; align-items: center; gap: 0.25rem; height: 1.5rem; padding: 0 0.5rem;
    font-size: 0.75rem; color: var(--pf-fg); text-decoration: none; white-space: nowrap;
    background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: 999px;
}
a.pf-chip:hover { color: var(--pf-accent); border-color: var(--pf-accent); }
.pf-delta { display: inline-flex; gap: 0.625rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-up { color: var(--pf-ok); }
.pf-down { color: var(--pf-bad); }
.pf-zero { color: var(--pf-muted); }

/* An empty list: an icon, one sentence, the way in. */
.pf-empty { display: grid; justify-items: center; gap: 0.75rem; padding: 3rem 1.5rem; text-align: center; }
.pf-empty-icon { display: grid; place-items: center; width: 3rem; height: 3rem; color: var(--pf-accent); background: color-mix(in oklab, var(--pf-accent) 12%, transparent); border-radius: 999px; }
.pf-empty-icon svg { width: 1.5rem; height: 1.5rem; }
.pf-empty-title { margin: 0; font-size: 1rem; font-weight: 600; }
.pf-empty-text { margin: 0; max-width: 30rem; color: var(--pf-muted); }

/* A segmented control: the states a thing can be put in, the current one raised. */
.pf-segmented { display: inline-flex; gap: 0.2rem; padding: 0.2rem; background: var(--pf-subtle); border-radius: var(--pf-radius); }
.pf-segmented form { display: contents; }
.pf-segmented button, .pf-segmented a {
    height: 2rem; padding: 0 0.75rem; margin: 0; font: inherit; font-size: 0.8125rem; font-weight: 500;
    color: var(--pf-muted); text-decoration: none; background: none; border: 0; border-radius: 0.375rem; cursor: pointer;
    display: inline-flex; align-items: center; gap: 0.375rem;
}
.pf-segmented button:hover, .pf-segmented a:hover { color: var(--pf-fg); }
.pf-segmented [aria-pressed="true"], .pf-segmented [aria-current] { color: var(--pf-fg); background: var(--pf-surface); box-shadow: var(--pf-shadow); cursor: default; }

/* Figures: a few numbers in a row. */
.pf-stats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.pf-stat-value { display: block; font-size: 1.5rem; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }

/* ── The builder: conditions on one line, a pill between them that switches all/any, the live
   panel beside — sticky while the conditions scroll — under them on a narrow screen. ── */
.pf-audience { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem); gap: 1.5rem; align-items: start; font-size: 0.875rem; color: var(--pf-fg); }
.pf-audience:not(:has(> .pf-audience-live)) { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) { .pf-audience { grid-template-columns: minmax(0, 1fr); } }
.pf-audience-area { min-width: 0; }
.pf-audience-group { display: grid; gap: 0.5rem; }
.pf-audience-group .pf-audience-group { position: relative; padding: 0.75rem; background: var(--pf-subtle); border: 1px dashed var(--pf-line); border-radius: var(--pf-radius); }
.pf-audience-group .pf-audience-group > .pf-audience-remove { position: absolute; top: 0.5rem; right: 0.5rem; }
.pf-audience-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; color: var(--pf-muted); font-weight: 500; }
.pf-audience-condition { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.pf-audience-condition > .pf-audience-attribute { flex: 0 1 15rem; min-width: 10rem; }
.pf-audience-condition > .pf-audience-op { flex: 0 1 auto; width: auto; min-width: 7rem; max-width: 13rem; }
.pf-audience-condition > .pf-audience-value, .pf-audience-condition > .pf-audience-input { flex: 0 1 auto; width: auto; min-width: 7rem; max-width: 16rem; }
.pf-audience-condition > .pf-audience-input[type="text"], .pf-audience-condition > .pf-audience-input[type="number"] { width: 12rem; }
.pf-audience-condition > .pf-audience-remove { flex: none; opacity: 0.55; }
.pf-audience-condition:hover > .pf-audience-remove, .pf-audience-condition > .pf-audience-remove:focus-visible { opacity: 1; }
.pf-audience-empty { margin: 0.25rem 0; }
.pf-audience-condition:has(.pf-audience-days) > .pf-audience-attribute { flex-basis: 11rem; }
.pf-audience-condition:has(.pf-audience-days) > .pf-audience-op { max-width: 10rem; }
.pf-audience-condition > .pf-audience-days { flex: 0 1 auto; }
.pf-audience-days, .pf-audience-between, .pf-audience-choices, .pf-audience-chips, .pf-audience-consent-label, .pf-audience-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; min-width: 0;
}
.pf-audience-days, .pf-audience-between { color: var(--pf-muted); }
.pf-audience-days .pf-input, .pf-audience-between .pf-input { width: 4.5rem; flex: 0 0 4.5rem; padding: 0 0.5rem; color: var(--pf-fg); }
.pf-audience-between .pf-input[type="date"], .pf-audience-between .pf-input[type="text"] { width: 9rem; flex: 1 1 8rem; }
.pf-audience-word { white-space: nowrap; }
.pf-audience-choice { display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap; }
.pf-audience-actions { margin-top: 0.25rem; }
.pf-join {
    justify-self: start; height: 1.5rem; padding: 0 0.625rem; margin: 0 0 0 0.75rem;
    font: inherit; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--pf-accent); background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: 999px; cursor: pointer;
}
.pf-join:hover { border-color: var(--pf-accent); }
.pf-audience-match { display: inline-flex; }

/* The live panel. */
.pf-audience-live { position: sticky; top: 5rem; min-width: 0; padding: 1.25rem; background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: var(--pf-radius-lg); box-shadow: var(--pf-shadow); }
.pf-audience-count { font-size: 2.25rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pf-audience-caption { margin: 0.375rem 0 1rem; color: var(--pf-muted); }
.pf-audience-steps { margin: -0.5rem 0 1rem; font-size: 0.8125rem; color: var(--pf-muted); }
.pf-audience-by { margin-bottom: 0.75rem; }
.pf-audience-error { margin: 0; color: var(--pf-bad); }
.pf-audience-panel-label { margin: 0 0 0.5rem; }
.pf-bars { display: grid; gap: 0.5rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.pf-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.125rem 0.5rem; font-size: 0.8125rem; }
.pf-bars li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-bars .pf-num { font-variant-numeric: tabular-nums; color: var(--pf-muted); }
.pf-bar { grid-column: 1 / -1; height: 0.375rem; overflow: hidden; background: var(--pf-subtle); border-radius: 999px; }
.pf-bar > span { display: block; height: 100%; background: var(--pf-accent); border-radius: inherit; }
.pf-people { display: grid; gap: 0.125rem; margin: 0; padding: 0; list-style: none; }
.pf-person { display: flex; align-items: center; gap: 0.625rem; padding: 0.375rem 0.5rem; margin: 0 -0.5rem; color: inherit; text-decoration: none; border-radius: var(--pf-radius); }
a.pf-person:hover { background: var(--pf-subtle); }
.pf-person > span:last-child { min-width: 0; }
.pf-avatar {
    display: grid; place-items: center; flex: none; width: 2rem; height: 2rem;
    font-size: 0.75rem; font-weight: 600; color: var(--pf-hue, var(--pf-accent));
    background: color-mix(in oklab, var(--pf-hue, var(--pf-accent)) 16%, transparent); border-radius: 999px;
}
.pf-person-name { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-person-line { display: block; font-size: 0.75rem; color: var(--pf-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The picker. */
.pf-audience-picker { display: grid; gap: 1.25rem; }
.pf-audience-title { margin: 0 0 0.5rem; font-size: 0.8125rem; font-weight: 500; color: var(--pf-muted); }
.pf-audience-chips:not(:empty) { margin-bottom: 0.5rem; }
.pf-audience-chip { display: inline-flex; align-items: center; gap: 0.25rem; height: 1.75rem; padding: 0 0.25rem 0 0.625rem; font-size: 0.8125rem; background: color-mix(in oklab, var(--pf-accent) 9%, var(--pf-surface)); border: 1px solid color-mix(in oklab, var(--pf-accent) 25%, transparent); border-radius: 999px; }
.pf-audience-chip-group { background: var(--pf-surface); border-color: var(--pf-line); }
.pf-audience-chip-remove { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; padding: 0; font: inherit; line-height: 1; color: var(--pf-muted); background: none; border: 0; border-radius: 999px; cursor: pointer; }
.pf-audience-chip-remove:hover, .pf-audience-chip-remove:focus-visible { color: var(--pf-fg); background: var(--pf-subtle); }
.pf-audience-pick { max-width: 20rem; }
.pf-audience-more > summary { width: fit-content; margin-bottom: 0.5rem; font-weight: 500; color: var(--pf-accent); cursor: pointer; }
.pf-audience-consent-label .pf-select { width: auto; min-width: 14rem; }

/* A searchable choice under headings — the builder's "what", a rule's event. */
.pf-combo { position: relative; min-width: 0; }
.pf-combo-button {
    display: flex; align-items: center; width: 100%; height: var(--pf-control); padding: 0 2rem 0 0.75rem; margin: 0;
    font: inherit; font-size: 0.875rem; color: var(--pf-fg); text-align: left;
    background-color: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: var(--pf-radius); cursor: pointer;
}
.pf-combo-button > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-combo-button[aria-expanded="true"] { border-color: var(--pf-accent); }
.pf-combo-placeholder { color: var(--pf-muted); }
.pf-combo-pop {
    position: absolute; z-index: 40; top: calc(100% + 0.25rem); left: 0;
    width: max(100%, 16rem); max-width: min(24rem, 90vw); padding: 0.375rem;
    background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: var(--pf-radius); box-shadow: var(--pf-pop-shadow);
}
.pf-combo-pop[hidden] { display: none; }
.pf-combo-search { height: 2rem; margin-bottom: 0.25rem; }
.pf-combo-list { max-height: 18rem; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.pf-combo-group { padding: 0.5rem 0.5rem 0.25rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--pf-muted); }
.pf-combo-option { display: grid; gap: 0.0625rem; padding: 0.4rem 0.5rem; border-radius: 0.375rem; cursor: pointer; }
.pf-combo-option small { font-size: 0.75rem; color: var(--pf-muted); }
.pf-combo-option.is-active { background: var(--pf-subtle); }
.pf-combo-option[aria-selected="true"] { font-weight: 600; color: var(--pf-accent); }
.pf-combo-empty { padding: 0.5rem; color: var(--pf-muted); }

/* A menu of choices with an icon and a line each — the steps a rule can add. */
.pf-menu { position: relative; }
.pf-menu-pop { position: absolute; z-index: 40; left: 50%; top: calc(100% + 0.375rem); width: min(22rem, 90vw); padding: 0.375rem; background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: var(--pf-radius-lg); box-shadow: var(--pf-pop-shadow); transform: translateX(-50%); }
.pf-menu-pop[hidden] { display: none; }
.pf-menu-item { display: flex; align-items: flex-start; gap: 0.75rem; width: 100%; padding: 0.5rem; margin: 0; font: inherit; text-align: left; color: var(--pf-fg); background: none; border: 0; border-radius: var(--pf-radius); cursor: pointer; }
.pf-menu-item:hover, .pf-menu-item:focus-visible { background: var(--pf-subtle); outline: none; }
.pf-menu-item b { display: block; font-weight: 500; }
.pf-menu-item small { display: block; font-size: 0.75rem; color: var(--pf-muted); }

/* "Segments and groups" on a person's card — Html\AudiencePanel. */
.pf-audience-panel-title { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 600; }
.pf-audience-panel-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.375rem; font-size: 0.875rem; }
.pf-audience-panel-item { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.pf-audience-panel-kind { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--pf-muted); }
.pf-audience-panel-since, .pf-audience-panel-empty { margin: 0; font-size: 0.8125rem; color: var(--pf-muted); }

/* Site messages — Html\SiteMessages: a banner across the page, a popup in the middle of it, a card
   in its slot; each with a close button that is a form. */
.pf-site-message { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 1rem; background: var(--pf-subtle); border: 1px solid var(--pf-line); border-radius: var(--pf-radius); }
.pf-site-message-banner { border-radius: 0; border-width: 0 0 1px; }
.pf-site-message-popup { position: fixed; inset: 0; z-index: 60; margin: auto; width: min(28rem, calc(100% - 2rem)); height: fit-content; background: var(--pf-surface); box-shadow: 0 20px 50px rgb(0 0 0 / 0.25); }
.pf-site-message-card { margin-bottom: 0.75rem; }
.pf-site-message-text { flex: 1 1 auto; min-width: 0; display: grid; gap: 0.25rem; }
.pf-site-message-body > :last-child { margin-bottom: 0; }
.pf-site-message-link { font-weight: 600; }
.pf-site-message-close { margin: 0; }
.pf-site-message-close button { padding: 0 0.4rem; font: inherit; font-size: 1.25rem; line-height: 1; color: inherit; background: none; border: 0; cursor: pointer; }

/* ── A rule: numbered cards — when, who, what, until — each with its summary when folded; the
   steps as cards joined by a line, each with its icon and how many went through it. ── */
.pf-rule-editor { display: grid; gap: 1rem; font-size: 0.875rem; color: var(--pf-fg); }
.pf-rule-card { background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: var(--pf-radius-lg); box-shadow: var(--pf-shadow); }
.pf-rule-card > summary { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; list-style: none; cursor: pointer; }
.pf-rule-card > summary::-webkit-details-marker { display: none; }
.pf-rule-card > summary > span:nth-child(3) { min-width: 0; flex: 1 1 auto; }
.pf-rule-num { display: grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; font-size: 0.75rem; font-weight: 600; color: var(--pf-accent); background: color-mix(in oklab, var(--pf-accent) 13%, transparent); border-radius: 999px; }
.pf-rule-icon { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; color: var(--pf-tone, var(--pf-accent)); background: color-mix(in oklab, var(--pf-tone, var(--pf-accent)) 11%, transparent); border-radius: var(--pf-radius); }
.pf-rule-icon svg { width: 1rem; height: 1rem; }
.pf-rule-card-title { display: block; font-size: 1rem; font-weight: 600; line-height: 1.3; }
.pf-rule-card-summary { display: block; font-size: 0.8125rem; color: var(--pf-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-rule-chevron { flex: none; width: 1rem; height: 1rem; color: var(--pf-muted); transition: transform 0.15s; }
.pf-rule-card[open] > summary .pf-rule-chevron { transform: rotate(180deg); }
.pf-rule-card-body { display: grid; gap: 1rem; padding: 1rem 1.25rem 1.25rem; border-top: 1px solid var(--pf-line); }
.pf-rule-sentence { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.pf-rule-sentence > .pf-select, .pf-rule-sentence > .pf-combo { width: auto; min-width: 12rem; flex: 0 1 18rem; }
.pf-rule-word { color: var(--pf-muted); }
.pf-rule-rows { display: grid; gap: 0.75rem; }
.pf-rule-rows > .pf-rule-sentence > .pf-label { min-width: 9rem; }
.pf-rule-tone-when { --pf-tone: var(--pf-accent); }
.pf-rule-tone-who { --pf-tone: var(--pf-info); }
.pf-rule-tone-what { --pf-tone: var(--pf-ok); }
.pf-rule-tone-until { --pf-tone: var(--pf-warn); }

.pf-rule-flow { display: grid; justify-items: stretch; }
.pf-rule-link { justify-self: center; width: 2px; height: 1.25rem; background: var(--pf-line); }
.pf-rule-step { position: relative; display: grid; gap: 0.75rem; padding: 0.875rem 1rem; background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: var(--pf-radius-lg); box-shadow: var(--pf-shadow); }
.pf-rule-step-head { display: flex; align-items: center; gap: 0.625rem; }
.pf-rule-step-head .pf-rule-icon { width: 1.75rem; height: 1.75rem; }
.pf-rule-step-title { font-weight: 600; }
.pf-rule-step-id { font-size: 0.75rem; color: var(--pf-muted); font-variant-numeric: tabular-nums; }
.pf-rule-step-head > .pf-rule-remove { margin-left: auto; }
.pf-rule-body { display: grid; gap: 0.625rem; }
.pf-rule-body .pf-audience { gap: 1rem; }
.pf-rule-variant { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.pf-rule-variant .pf-input-short { width: 4.5rem; }
.pf-rule-add-tile {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; height: 3rem; margin: 0;
    font: inherit; font-weight: 500; color: var(--pf-muted); background: transparent;
    border: 1.5px dashed var(--pf-line); border-radius: var(--pf-radius-lg); cursor: pointer;
}
.pf-rule-add-tile:hover, .pf-rule-add-tile[aria-expanded="true"] { color: var(--pf-accent); border-color: var(--pf-accent); background: color-mix(in oklab, var(--pf-accent) 5%, transparent); }
.pf-rule-add-tile svg { width: 1rem; height: 1rem; }
.pf-rule-step-action { --pf-tone: var(--pf-ok); }
.pf-rule-step-message { --pf-tone: var(--pf-accent); }
.pf-rule-step-wait, .pf-rule-step-wait_event { --pf-tone: var(--pf-warn); }
.pf-rule-step-branch { --pf-tone: var(--pf-info); }
.pf-rule-step-split { --pf-tone: var(--pf-bad); }

/* A rule's page — Html\RuleCanvas: the same cards, read-only, with the count each step saw. */
.pf-rule-canvas { display: grid; justify-items: stretch; max-width: 40rem; min-width: 0; }
.pf-rule-box { position: relative; display: grid; gap: 0.25rem; padding: 0.75rem 1rem; background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: var(--pf-radius-lg); box-shadow: var(--pf-shadow); }
.pf-rule-box > b { font-size: 0.75rem; font-weight: 600; color: var(--pf-muted); }
.pf-rule-when { border-left: 3px solid var(--pf-accent); }
.pf-rule-until { border-left: 3px solid var(--pf-warn); }
.pf-rule-count { font-size: 0.8125rem; font-weight: 500; color: var(--pf-accent); font-variant-numeric: tabular-nums; }
.pf-rule-down, .pf-rule-end, .pf-rule-goto { justify-self: center; padding: 0.125rem 0; font-size: 0.75rem; color: var(--pf-muted); }
.pf-rule-down::before { content: ""; display: block; width: 2px; height: 1rem; margin: 0 auto 0.125rem; background: var(--pf-line); }
.pf-rule-branches { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.75rem; width: 100%; }
.pf-rule-way { display: grid; gap: 0.5rem; align-content: start; padding: 0.75rem; background: var(--pf-subtle); border-radius: var(--pf-radius); }
.pf-rule-way-label { font-size: 0.75rem; font-weight: 600; color: var(--pf-muted); }
.pf-rule-remove { display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; font: inherit; font-size: 1.125rem; line-height: 1; color: var(--pf-muted); background: none; border: 0; border-radius: var(--pf-radius); cursor: pointer; }
.pf-rule-remove:hover { color: var(--pf-bad); background: color-mix(in oklab, var(--pf-bad) 9%, transparent); }

/* Small pieces the pages share: spacing, an id field, why a person is in or out. */
.pf-mt { margin-top: 1rem; }
.pf-input-id { max-width: 10rem; }
.pf-section-title.pf-spaced { margin: 1.25rem 0 0.5rem; }
.pf-stat-small { font-size: 1rem; font-weight: 500; }
.pf-why { display: grid; gap: 0.375rem; margin: 0.75rem 0 0; padding: 0; list-style: none; }
.pf-why > li { display: flex; gap: 0.5rem; align-items: baseline; }
.pf-why > li.pf-why-group { display: block; padding-left: 0.75rem; border-left: 2px solid var(--pf-line); }
.pf-why-mark { flex: none; font-weight: 700; }
.pf-why-verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.75rem 0 0; }
.pf-split { display: grid; gap: 1rem; grid-template-columns: minmax(0, 2fr) minmax(17rem, 1fr); align-items: start; }
@media (max-width: 1024px) { .pf-split { grid-template-columns: minmax(0, 1fr); } }
.pf-page-sub .pf-badge { margin-right: 0.375rem; }
.pf-segmented button[disabled] { opacity: 1; }
.pf-segmented svg { width: 0.95rem; height: 0.95rem; }
.pf-card-body > .pf-section-title + .pf-segmented, .pf-card-body > .pf-section-title + .pf-rule-sentence { margin-top: 0; }
.pf-rule-box .pf-rule-count { margin-left: auto; }
.pf-rule-box .pf-rule-step-head .pf-rule-icon { width: 1.75rem; height: 1.75rem; }
.pf-rule-outcomes { font-size: 0.75rem; color: var(--pf-muted); }
.pf-rule-down:empty { padding: 0; }
.pf-rule-down:empty::before { margin: 0 auto; height: 1.25rem; }
.pf-rule-way > .pf-rule-down:first-child { display: none; }
.pf-combo-field { min-width: 14rem; flex: 1 1 16rem; }
.pf-table .pf-bars { display: grid; grid-template-columns: 3.5rem 1fr; align-items: center; gap: 0.5rem; margin: 0; }
.pf-table .pf-bar { grid-column: auto; }
.pf-input-grow { flex: 1 1 14rem; }
.pf-cell-bar { min-width: 9rem; }
.pf-ui.pf-embedded { padding: 0; margin-bottom: 1rem; }

/* ─────────────────────────────────────────────────────────────────────────────────────────────
   The team's conversations — the dock over every page, drawn by pf-conversations.js: the faces,
   the list, a conversation in a small window and its thread; and the basic page
   (pf-conversations-basic.js). Everything from the pf tokens above, so each theme dresses it in
   its own colours, light or dark.
   ───────────────────────────────────────────────────────────────────────────────────────────── */
.pf-conv-dock, .pf-conv-basic {
    --pf-conv-side: color-mix(in oklab, var(--pf-subtle) 70%, var(--pf-surface));
    --pf-conv-hover: color-mix(in oklab, var(--pf-fg) 4%, transparent);
    --pf-conv-ring: color-mix(in oklab, var(--pf-accent) 28%, transparent);
    --pf-conv-gutter: 1.25rem;
    --pf-conv-hue: 220;      /* each face sets its own, from the person's id */
    color: var(--pf-fg);
}

/* Shared controls */
.pf-conv-input {
    width: 100%;
    min-height: var(--pf-control);
    padding: 0.45rem 0.7rem;
    font: inherit;
    color: var(--pf-fg);
    background: var(--pf-surface);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius);
    outline: none;
}
.pf-conv-input:focus { border-color: var(--pf-accent); box-shadow: 0 0 0 3px var(--pf-conv-ring); }

.pf-conv-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 2rem;
    padding: 0 0.8rem;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    background: var(--pf-surface);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius);
}
.pf-conv-btn:hover { background: var(--pf-subtle); }
.pf-conv-btn:disabled { opacity: 0.5; cursor: default; }
.pf-conv-btn-primary { color: var(--pf-accent-fg) !important; background: var(--pf-accent); border-color: var(--pf-accent); }
.pf-conv-btn-primary:hover { background: color-mix(in oklab, var(--pf-accent) 88%, black); }

.pf-conv-icon-btn {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2rem;
    height: 2rem;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
    color: var(--pf-muted);
    background: transparent;
    border: 0;
    border-radius: var(--pf-radius);
}
.pf-conv-icon-btn:hover { color: var(--pf-fg); background: var(--pf-conv-hover); }
.pf-conv-hint { margin: 0.3rem 0 0; font-size: 0.72rem; color: var(--pf-muted); }
.pf-conv-muted-text { color: var(--pf-muted); font-size: 0.85em; }

/* Faces */
.pf-conv-avatar {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    background: hsl(var(--pf-conv-hue, 220) 52% 46%);
    border-radius: 0.55rem;
    user-select: none;
}
.pf-conv-avatar-sm { width: 1.375rem; height: 1.375rem; font-size: 0.6rem; border-radius: 0.375rem; }
.pf-conv-avatar-img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.pf-conv-avatar-system { color: var(--pf-muted); background: var(--pf-subtle); border: 1px solid var(--pf-line); font-size: 1rem; }

.pf-conv-avatar-former { color: var(--pf-muted); background: var(--pf-subtle); border: 1px dashed var(--pf-line); }
.pf-conv-msg-former { color: var(--pf-muted); }
.pf-conv-avatar-group { color: var(--pf-fg); background: var(--pf-line); }
.pf-conv-presence {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 0.7rem;
    height: 0.7rem;
    background: var(--pf-surface);
    border: 2px solid var(--pf-surface);
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px var(--pf-muted);
}
.pf-conv-avatar-sm .pf-conv-presence { width: 0.55rem; height: 0.55rem; right: -2px; bottom: -2px; }
.pf-conv-presence.pf-conv-online { background: var(--pf-ok); box-shadow: none; }

/* Sidebar */
.pf-conv-side {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--pf-conv-side);
    border-right: 1px solid var(--pf-line);
}

.pf-conv-list { margin: 0; padding: 0; list-style: none; }
.pf-conv-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 1.95rem;
    padding: 0.2rem 0.5rem;
    color: color-mix(in oklab, var(--pf-fg) 78%, transparent);
    text-decoration: none !important;
    border-radius: var(--pf-radius);
}
.pf-conv-item:hover { background: var(--pf-conv-hover); color: var(--pf-fg); }

.pf-conv-item-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pf-conv-item.pf-conv-unread { color: var(--pf-fg); font-weight: 700; }

.pf-conv-item.pf-conv-active { color: var(--pf-accent-fg); background: var(--pf-accent); font-weight: 600; }

.pf-conv-item.pf-conv-active .pf-conv-presence { border-color: var(--pf-accent); }

.pf-conv-badge {
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.25rem;
    text-align: center;
    color: #fff;
    background: var(--pf-bad);
    border-radius: 999px;
}
.pf-conv-side-link {
    display: block;
    width: 100%;
    margin-top: 0.15rem;
    padding: 0.3rem 0.5rem;
    font-size: 0.8125rem;
    text-align: left;
    color: var(--pf-muted);
    background: none;
    border: 0;
    border-radius: var(--pf-radius);
}
.pf-conv-side-link:hover { color: var(--pf-fg); background: var(--pf-conv-hover); }
.pf-conv-side-empty { padding: 0.35rem 0.5rem; font-size: 0.8125rem; color: var(--pf-muted); list-style: none; }

/* The conversation, and its thread beside it */
.pf-conv-main {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
}
.pf-conv-main:has(> .pf-conv-thread) { grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem); }

.pf-conv-body { display: flex; flex-direction: column; min-height: 0; grid-column: 1; }
.pf-conv-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0.5rem 0 0.75rem; }
.pf-conv-start, .pf-conv-empty { padding: 2rem var(--pf-conv-gutter) 1rem; }
.pf-conv-start { padding: 1rem var(--pf-conv-gutter) 0.25rem; }
.pf-conv-start .pf-conv-start-title { font-size: 1rem; }
.pf-conv-start-topic { margin: 0 0 0.15rem; font-size: 0.875rem; }
.pf-conv-start .pf-conv-muted-text { margin: 0; font-size: 0.8rem; }
.pf-conv-empty { margin: auto; text-align: center; }

.pf-conv-start-title { margin: 0 0 0.25rem; font-size: 1.15rem; font-weight: 800; }
.pf-conv-body { position: relative; }
.pf-conv-jump {
    position: absolute;
    left: 50%;
    bottom: 6.5rem;
    z-index: 5;
    padding: 0.35rem 0.9rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--pf-accent-fg);
    background: var(--pf-accent);
    border: 0;
    border-radius: 999px;
    box-shadow: var(--pf-pop-shadow);
    transform: translateX(-50%);
    cursor: pointer;
}
.pf-conv-typing { min-height: 1.25rem; margin: 0; padding: 0 var(--pf-conv-gutter); font-size: 0.75rem; font-style: italic; color: var(--pf-muted); }
.pf-conv-join {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 var(--pf-conv-gutter) 1rem;
    padding: 0.75rem 1rem;
    background: var(--pf-subtle);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius-lg);
}
.pf-conv-join p { margin: 0; }

/* Lines across: a day, and where the unread start */
.pf-conv-day, .pf-conv-new {
    position: relative;
    display: flex;
    justify-content: center;
    margin: 1rem 0 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
}
.pf-conv-day::before, .pf-conv-new::before { content: ''; position: absolute; inset: 50% 0 auto; border-top: 1px solid var(--pf-line); }
.pf-conv-day span {
    position: relative;
    padding: 0.15rem 0.75rem;
    background: var(--pf-surface);
    border: 1px solid var(--pf-line);
    border-radius: 999px;
}
.pf-conv-new { justify-content: flex-end; margin: 0.35rem 0; padding-right: var(--pf-conv-gutter); color: var(--pf-bad); }
.pf-conv-new::before { border-color: var(--pf-bad); }
.pf-conv-new span { position: relative; padding-left: 0.5rem; background: var(--pf-surface); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.68rem; }

/* A message */
.pf-conv-msg {
    position: relative;
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 0 0.65rem;
    padding: 0.4rem var(--pf-conv-gutter) 0.3rem;
}
.pf-conv-msg:hover, .pf-conv-msg:focus-within { background: var(--pf-conv-hover); }
.pf-conv-msg-continued { padding-top: 0.05rem; }
.pf-conv-msg-pinned { background: color-mix(in oklab, var(--pf-warn) 7%, transparent); }
.pf-conv-msg-gutter { padding-top: 0.15rem; }
.pf-conv-msg-hover-time { display: none; padding-top: 0.15rem; font-size: 0.66rem; color: var(--pf-muted); white-space: nowrap; }
.pf-conv-msg:hover .pf-conv-msg-hover-time { display: block; }
.pf-conv-msg-head { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.pf-conv-msg-author { font-weight: 800; }
.pf-conv-msg-time { font-size: 0.72rem; color: var(--pf-muted); }
.pf-conv-msg-badge { font-size: 0.7rem; color: var(--pf-warn); font-weight: 600; }
.pf-conv-msg-body { overflow-wrap: anywhere; }
.pf-conv-msg-body p { margin: 0; }
.pf-conv-msg-body p + p, .pf-conv-msg-body p + ul, .pf-conv-msg-body ul + p, .pf-conv-msg-body pre { margin-top: 0.35rem; }
.pf-conv-msg-body ul, .pf-conv-msg-body ol { margin: 0.2rem 0; padding-left: 1.4rem; }
.pf-conv-msg-body ul { list-style: disc; }
.pf-conv-msg-body ol { list-style: decimal; }
.pf-conv-msg-body li { display: list-item; }
.pf-conv-msg-body a { color: var(--pf-accent); text-decoration: underline; text-underline-offset: 2px; }
.pf-conv-msg-body blockquote { margin: 0.25rem 0; padding: 0.1rem 0 0.1rem 0.75rem; color: var(--pf-muted); border-left: 3px solid var(--pf-line); }
.pf-conv-msg-body code {
    padding: 0.05rem 0.3rem;
    font-size: 0.85em;
    color: var(--pf-bad);
    background: var(--pf-subtle);
    border: 1px solid var(--pf-line);
    border-radius: 0.3rem;
}
.pf-conv-code {
    margin: 0;
    padding: 0.6rem 0.8rem;
    overflow-x: auto;
    font-size: 0.8125rem;
    background: var(--pf-subtle);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius);
}
.pf-conv-code code { padding: 0; color: inherit; background: none; border: 0; }
/* Ask's chart in a message: as wide as a card, not the whole column. */
.pf-conv-msg-body .pf-chart { max-width: 30rem; }
/* A table in a message, as on Ask's page: it scrolls sideways when wider than the message. */
.pf-conv-table { overflow-x: auto; margin: .5rem 0; }
.pf-conv-table table { border-collapse: collapse; width: auto; }
.pf-conv-table th { text-align: left; padding: .25rem .75rem; border-bottom: 1px solid currentColor; }
.pf-conv-table td { padding: .25rem .75rem; border-bottom: 1px solid rgba(128, 128, 128, .35); }
.pf-conv-mention {
    padding: 0 0.2rem;
    font-weight: 600;
    color: var(--pf-accent);
    background: color-mix(in oklab, var(--pf-accent) 12%, transparent);
    border-radius: 0.3rem;
}
.pf-conv-mention-all, .pf-conv-mention-online, .pf-conv-mention-here, .pf-conv-mention-channel, .pf-conv-mention-everyone, .pf-conv-mention-group { color: var(--pf-warn); background: color-mix(in oklab, var(--pf-warn) 14%, transparent); }
.pf-conv-ref { font-weight: 600; color: var(--pf-info); }
.pf-conv-mention-ask { color: var(--pf-info); background: color-mix(in oklab, var(--pf-info) 14%, transparent); }
.pf-conv-msg-edited { margin-left: 0.3rem; font-size: 0.72rem; color: var(--pf-muted); }
.pf-conv-msg-deleted { margin: 0; font-style: italic; color: var(--pf-muted); }

/* The actions over a message, on hover */
.pf-conv-msg-actions {
    position: absolute;
    top: -0.55rem;
    right: var(--pf-conv-gutter);
    z-index: 2;
    display: none;
    padding: 0.15rem;
    background: var(--pf-surface);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius);
    box-shadow: var(--pf-shadow);
}
.pf-conv-msg:hover .pf-conv-msg-actions, .pf-conv-msg:focus-within .pf-conv-msg-actions { display: flex; }
.pf-conv-msg-actions button {
    width: 1.9rem;
    height: 1.75rem;
    padding: 0;
    font-size: 0.9rem;
    background: none;
    border: 0;
    border-radius: 0.35rem;
}
.pf-conv-msg-actions button:hover { background: var(--pf-subtle); }
.pf-conv-msg-actions .pf-conv-danger:hover { color: var(--pf-bad); background: color-mix(in oklab, var(--pf-bad) 10%, transparent); }
/* "Remind me about this": its presets, under the message's actions */
.pf-conv-menu {
    position: absolute;
    top: 1.4rem;
    right: var(--pf-conv-gutter);
    z-index: 3;
    display: flex;
    flex-direction: column;
    padding: 0.25rem;
    background: var(--pf-surface);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius);
    box-shadow: var(--pf-shadow);
}
.pf-conv-menu button { padding: 0.35rem 0.6rem; text-align: left; background: none; border: 0; border-radius: var(--pf-radius); cursor: pointer; color: inherit; }
.pf-conv-menu button:hover { background: var(--pf-subtle); }
/* A message the reader made a to-do of */
.pf-conv-todo-mark { display: inline-block; margin-top: 0.2rem; font-size: 0.75rem; color: var(--pf-muted); }

/* A system card: Jira, a payment, an alert */
.pf-conv-card {
    max-width: 38rem;
    margin-top: 0.3rem;
    padding: 0.6rem 0.85rem;
    background: var(--pf-surface);
    border: 1px solid var(--pf-line);
    border-left: 4px solid var(--pf-tone, var(--pf-muted));
    border-radius: var(--pf-radius);
}
.pf-conv-card-info { --pf-tone: var(--pf-info); }
.pf-conv-card-warning { --pf-tone: var(--pf-warn); }
.pf-conv-card-success { --pf-tone: var(--pf-ok); }
.pf-conv-card-error { --pf-tone: var(--pf-bad); }
.pf-conv-card-neutral { --pf-tone: var(--pf-line); }
.pf-conv-card-title { margin: 0; font-weight: 700; }
.pf-conv-card-title a { color: var(--pf-accent); text-decoration: none; }
.pf-conv-card-title a:hover { text-decoration: underline; }
.pf-conv-card-text { margin: 0.15rem 0 0; font-size: 0.875rem; }
.pf-conv-card-text { white-space: pre-line; }
.pf-conv-card-image { display: block; max-width: 100%; max-height: 16rem; margin-top: 0.5rem; border-radius: var(--pf-radius); }
.pf-conv-card-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.4rem 1rem; margin: 0.5rem 0 0; }
.pf-conv-card-fields dt { font-size: 0.7rem; font-weight: 700; color: var(--pf-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.pf-conv-card-fields dd { margin: 0; font-size: 0.875rem; }

/* Files */
.pf-conv-files { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.35rem; }
.pf-conv-thumb img {
    display: block;
    max-width: min(22rem, 100%);
    max-height: 15rem;
    object-fit: contain;
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius);
}
.pf-conv-file {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 22rem;
    padding: 0.45rem 0.7rem;
    color: var(--pf-fg) !important;
    text-decoration: none !important;
    background: var(--pf-surface);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius);
}
.pf-conv-file:hover { border-color: var(--pf-accent); }
.pf-conv-file-icon { font-size: 1.25rem; }
.pf-conv-file-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; font-size: 0.875rem; }
.pf-conv-file-size { flex: none; font-size: 0.75rem; color: var(--pf-muted); }
.pf-conv-file-removed { color: var(--pf-muted) !important; font-style: italic; font-size: 0.8125rem; }

/* Reactions and the thread under a message */
/* The team's own emoji, as tall as the text around it. */
.pf-conv-custom-emoji { display: inline-block; width: auto; height: 1.375em; max-width: 4em; vertical-align: -0.3em; object-fit: contain; }
.pf-conv-reactions { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.3rem; }
.pf-conv-reaction {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    height: 1.6rem;
    padding: 0 0.5rem;
    font-size: 0.8rem;
    background: var(--pf-subtle);
    border: 1px solid transparent;
    border-radius: 999px;
}
.pf-conv-reaction:hover { border-color: var(--pf-line); background: var(--pf-surface); }
.pf-conv-reaction-mine { background: color-mix(in oklab, var(--pf-accent) 12%, transparent); border-color: color-mix(in oklab, var(--pf-accent) 45%, transparent); }
.pf-conv-reaction-count { font-weight: 700; font-size: 0.75rem; }
.pf-conv-reaction-add { color: var(--pf-muted); opacity: 0; }
.pf-conv-msg:hover .pf-conv-reaction-add { opacity: 1; }
/* A reply also sent to the conversation: what it answers, above it */
.pf-conv-msg-root { display: block; max-width: 100%; margin: 0 0 0.15rem; padding: 0; overflow: hidden; font-size: 0.8rem; color: var(--pf-muted); text-align: left; white-space: nowrap; text-overflow: ellipsis; background: none; border: 0; }
.pf-conv-msg-root span { color: var(--pf-fg); }
.pf-conv-msg-root:hover span { text-decoration: underline; }
.pf-conv-replies {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.25rem;
    padding: 0.15rem 0.45rem 0.15rem 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--pf-accent) !important;
    background: none;
    border: 0;
    border-radius: var(--pf-radius);
}
.pf-conv-replies-last { font-weight: 400; color: var(--pf-muted); }

/* Writing */
.pf-conv-composer {
    position: relative;
    margin: 0 var(--pf-conv-gutter) 0.85rem;
}
.pf-conv-composer-row {
    display: flex;
    align-items: flex-end;
    gap: 0.25rem;
    padding: 0.35rem 0.35rem 0.35rem 0.25rem;
    background: var(--pf-surface);
    border: 1px solid color-mix(in oklab, var(--pf-fg) 22%, transparent);
    border-radius: var(--pf-radius-lg);
}
.pf-conv-composer-row:focus-within { border-color: var(--pf-accent); box-shadow: 0 0 0 3px var(--pf-conv-ring); }
.pf-conv-dragging .pf-conv-composer-row { border-style: dashed; border-color: var(--pf-accent); background: color-mix(in oklab, var(--pf-accent) 6%, var(--pf-surface)); }
.pf-conv-composer .pf-conv-input {
    min-height: 2.1rem;
    max-height: 15rem;
    padding: 0.4rem 0.5rem;
    resize: none;
    background: transparent;
    border: 0;
    box-shadow: none !important;
}
.pf-conv-composer-tools { display: flex; align-items: center; gap: 0.1rem; }
.pf-conv-send {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    margin-left: 0.15rem;
    padding: 0;
    color: var(--pf-accent-fg);
    background: var(--pf-accent);
    border: 0;
    border-radius: var(--pf-radius);
}
.pf-conv-send:disabled { color: var(--pf-muted); background: var(--pf-subtle); cursor: default; }
.pf-conv-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.35rem 0; }
.pf-conv-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.25rem 0.2rem 0.6rem;
    font-size: 0.8125rem;
    background: var(--pf-subtle);
    border: 1px solid var(--pf-line);
    border-radius: 999px;
}
.pf-conv-chip button { width: 1.25rem; height: 1.25rem; padding: 0; line-height: 1; background: none; border: 0; border-radius: 50%; color: var(--pf-muted); }
.pf-conv-chip button:hover { color: var(--pf-bad); }
.pf-conv-busy { opacity: 0.7; }
.pf-conv-edit { margin-top: 0.15rem; }
.pf-conv-edit-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.4rem; margin-top: 0.35rem; }
.pf-conv-edit-actions .pf-conv-hint { flex: 1; margin: 0; }

/* Things that open over the page */
.pf-conv-pop {
    position: absolute;
    z-index: 20;
    padding: 0.5rem;
    background: var(--pf-surface);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius-lg);
    box-shadow: var(--pf-pop-shadow);
}
.pf-conv-pop-label { margin: 0.25rem 0.25rem 0.35rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--pf-muted); }
.pf-conv-pop-anchor { position: absolute; z-index: 20; top: 1.25rem; right: var(--pf-conv-gutter); }
.pf-conv-pop-anchor .pf-conv-pop { position: static; }
.pf-conv-pop-up { top: auto; bottom: calc(100% + 0.35rem); right: 0; }
.pf-conv-emoji { width: 22rem; max-width: calc(100vw - 2rem); }
.pf-conv-emoji-row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 0.1rem; }
.pf-conv-emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0.1rem; max-height: 14rem; overflow-y: auto; }
.pf-conv-emoji-grid .pf-muted { grid-column: 1 / -1; margin: 0.5rem; }
.pf-conv-emoji-search { width: 100%; margin-bottom: 0.35rem; padding: 0.3rem 0.5rem; border: 1px solid var(--pf-line); border-radius: var(--pf-radius); background: var(--pf-surface); color: inherit; }
.pf-conv-emoji-tabs { display: flex; gap: 0.1rem; margin-bottom: 0.35rem; border-bottom: 1px solid var(--pf-line); }
.pf-conv-emoji-tabs button { flex: 1; padding: 0.2rem 0; font-size: 1.05rem; background: none; border: 0; border-bottom: 2px solid transparent; }
.pf-conv-emoji-tabs button[aria-selected="true"] { border-bottom-color: var(--pf-accent, currentColor); }
.pf-conv-emoji-btn { height: 2.1rem; padding: 0; font-size: 1.2rem; background: none; border: 0; border-radius: var(--pf-radius); }
.pf-conv-emoji-btn:hover, .pf-conv-emoji-btn:focus { background: var(--pf-subtle); outline: none; }
.pf-conv-suggest { bottom: calc(100% + 0.35rem); left: 0; width: min(20rem, 100%); margin: 0; list-style: none; padding: 0.3rem; }
.pf-conv-suggest button {
    display: block;
    width: 100%;
    padding: 0.35rem 0.6rem;
    text-align: left;
    background: none;
    border: 0;
    border-radius: var(--pf-radius);
}
.pf-conv-suggest button.pf-conv-active { color: var(--pf-accent-fg); background: var(--pf-accent); }
.pf-conv-pick { margin: 0.5rem 0 0; padding: 0; list-style: none; max-height: 18rem; overflow-y: auto; }
.pf-conv-pick button {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.4rem 0.5rem;
    text-align: left;
    background: none;
    border: 0;
    border-radius: var(--pf-radius);
}
.pf-conv-pick button:hover { background: var(--pf-subtle); }
.pf-conv-pick button.pf-conv-active { background: color-mix(in oklab, var(--pf-accent) 14%, transparent); font-weight: 600; }

.pf-conv-browse-list { margin: 0.25rem 0 0; padding: 0; list-style: none; max-height: 22rem; overflow-y: auto; }
.pf-conv-browse { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.55rem 0.25rem; border-bottom: 1px solid var(--pf-line); }
.pf-conv-dialog {
    width: min(34rem, 94vw);
    padding: 0;
    color: var(--pf-fg);
    background: var(--pf-surface);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius-lg);
    box-shadow: var(--pf-pop-shadow);
}
.pf-conv-dialog::backdrop { background: rgb(15 23 42 / 0.45); }
.pf-conv-dialog-body { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem 1.25rem 1.25rem; }
.pf-conv-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.pf-conv-dialog-foot { display: flex; justify-content: flex-end; }
.pf-conv-tabs { display: inline-flex; padding: 0.2rem; gap: 0.15rem; background: var(--pf-subtle); border-radius: var(--pf-radius); }
.pf-conv-tabs button { padding: 0.3rem 0.7rem; font-size: 0.8125rem; font-weight: 600; color: var(--pf-muted); background: none; border: 0; border-radius: calc(var(--pf-radius) - 2px); }
.pf-conv-tabs button.pf-conv-active { color: var(--pf-fg); background: var(--pf-surface); box-shadow: var(--pf-shadow); }
.pf-conv-field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.8125rem; font-weight: 600; }
.pf-conv-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; }
.pf-conv-toast {
    position: absolute;
    left: 50%;
    bottom: 1.25rem;
    z-index: 30;
    max-width: min(32rem, 90%);
    padding: 0.6rem 1rem;
    font-size: 0.875rem;
    color: #fff;
    background: var(--pf-bad);
    border-radius: var(--pf-radius);
    box-shadow: var(--pf-pop-shadow);
    transform: translateX(-50%);
}

/* A command's answer, for its writer alone */
.pf-conv-note {
    margin: 0.5rem var(--pf-conv-gutter);
    padding: 0.5rem 0.75rem 0.65rem;
    background: color-mix(in oklab, var(--pf-info) 7%, var(--pf-surface));
    border: 1px dashed color-mix(in oklab, var(--pf-info) 45%, transparent);
    border-radius: var(--pf-radius);
}
.pf-conv-note-head { display: flex; align-items: center; justify-content: space-between; font-size: 0.72rem; font-weight: 600; color: var(--pf-muted); }
.pf-conv-note-head .pf-conv-icon-btn { width: 1.5rem; height: 1.5rem; }
.pf-conv-note-text { margin: 0.15rem 0 0; white-space: pre-line; }
.pf-conv-suggest-command { font-weight: 700; font-family: ui-monospace, monospace; }

/* On the beacon, when the server does not answer */

/* The thread */
.pf-conv-thread {
    display: flex;
    flex-direction: column;
    grid-column: 2;
    grid-row: 1 / span 2;
    min-height: 0;
    background: var(--pf-surface);
    border-left: 1px solid var(--pf-line);
    --pf-conv-gutter: 1rem;
}
.pf-conv-thread-head { display: flex; align-items: center; justify-content: space-between; min-height: 3.5rem; padding: 0 0.75rem 0 1rem; border-bottom: 1px solid var(--pf-line); }
.pf-conv-thread-head h2 { margin: 0; font-size: 1rem; font-weight: 800; }

/* Search results */

.pf-conv-dialog { position: fixed; inset: 0; margin: auto; height: fit-content; max-height: 90vh; overflow-y: auto; }
.pf-conv-files { align-items: flex-start; }
.pf-conv-replies-count { white-space: nowrap; }
.pf-conv-replies:hover { text-decoration: none; }
.pf-conv-replies:hover .pf-conv-replies-count { text-decoration: underline; }
.pf-conv-replies-last { white-space: nowrap; }
.pf-conv-replies-last::before { content: '· '; }
.pf-conv-suggest button { display: flex; align-items: center; gap: 0.5rem; }
.pf-conv-suggest-hint { margin-left: auto; font-size: 0.75rem; opacity: 0.7; }
.pf-conv-faces { gap: 0; padding-inline: 0.4rem; }
.pf-conv-faces .pf-conv-avatar { margin-left: -0.3rem; box-shadow: 0 0 0 2px var(--pf-surface); }
.pf-conv-faces .pf-conv-avatar:first-child { margin-left: 0; }
.pf-conv-faces span:last-child { margin-left: 0.4rem; }

/* The dock: the conversations over every page of the administration (Conversations\Dock) — the
   faces of recent conversations above the launcher, the list over it, and windows at the foot. */
.pf-conv-dock { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1040; }
.pf-conv-dock-heads { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.pf-conv-dock-head {
    position: relative;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.12s ease;
}
.pf-conv-dock-head:hover { transform: scale(1.06); }
.pf-conv-dock-head .pf-conv-avatar {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 0.85rem;
    border-radius: 50%;
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}
.pf-conv-dock-head .pf-conv-presence { right: 0; bottom: 0; }
.pf-conv-dock-button {
    position: relative;
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    padding: 0;
    font-size: 1.4rem;
    color: var(--pf-accent-fg);
    background: var(--pf-accent);
    border: 0;
    border-radius: 50%;
    box-shadow: var(--pf-pop-shadow);
    cursor: pointer;
}
.pf-conv-dock-button:hover { background: color-mix(in oklab, var(--pf-accent) 88%, black); }
.pf-conv-dock-count {
    position: absolute;
    top: -0.2rem;
    right: -0.2rem;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.25rem;
    color: var(--pf-fg);
    background: var(--pf-surface);
    border: 1px solid var(--pf-line);
    border-radius: 999px;
}
.pf-conv-dock-count.pf-conv-dock-mention { color: #fff; background: var(--pf-bad); border: 2px solid var(--pf-surface); }
.pf-conv-dock-panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.75rem);
    width: min(26rem, calc(100vw - 1.5rem));
    height: min(36rem, calc(100vh - 12rem));
}

.pf-conv-dock-windows {
    position: fixed;
    right: 5.5rem;
    bottom: 0;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
    gap: 0.75rem;
}
.pf-conv-window {
    display: flex;
    flex-direction: column;
    width: 20rem;
    height: min(28rem, calc(100vh - 6rem));
    background: var(--pf-surface);
    border: 1px solid var(--pf-line);
    border-bottom: 0;
    border-radius: var(--pf-radius-lg) var(--pf-radius-lg) 0 0;
    box-shadow: 0 -6px 24px rgb(0 0 0 / 0.14);
    overflow: hidden;
}
.pf-conv-window-min { height: auto; }
.pf-conv-window-head {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    min-height: 2.6rem;
    padding: 0 0.35rem 0 0.25rem;
    color: var(--pf-accent-fg);
    background: var(--pf-accent);
}
.pf-conv-window-min .pf-conv-window-head { color: var(--pf-fg); background: var(--pf-subtle); }
.pf-conv-window-title {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.3rem 0.4rem;
    font: inherit;
    font-weight: 700;
    color: inherit;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
}
.pf-conv-window-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 0.875rem; }
.pf-conv-window-title .pf-conv-presence { border-color: var(--pf-accent); }
.pf-conv-window-btn {
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    padding: 0;
    font: inherit;
    font-size: 0.9rem;
    color: inherit !important;
    text-decoration: none !important;
    background: none;
    border: 0;
    border-radius: var(--pf-radius);
    opacity: 0.85;
    cursor: pointer;
}
.pf-conv-window-btn:hover { opacity: 1; background: rgb(255 255 255 / 0.18); }
.pf-conv-window-body { position: relative; flex: 1; min-height: 0; display: flex; font-size: 0.875rem; --pf-conv-gutter: 0.75rem; }
.pf-conv-window-body .pf-conv-main { flex: 1; grid-template-rows: minmax(0, 1fr); }
.pf-conv-compact .pf-conv-msg { grid-template-columns: 1.75rem minmax(0, 1fr); gap: 0 0.5rem; }
.pf-conv-compact .pf-conv-msg-gutter .pf-conv-avatar { width: 1.75rem; height: 1.75rem; font-size: 0.65rem; border-radius: 0.4rem; }
.pf-conv-compact .pf-conv-composer .pf-conv-hint { display: none; }
.pf-conv-compact .pf-conv-composer { margin-bottom: 0.6rem; }
/* A long name in the placeholder stays on its line, cut short, rather than wrapping out of sight. */
.pf-conv-composer .pf-conv-input::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-conv-compact .pf-conv-thread { position: absolute; inset: 0; z-index: 10; grid-column: 1; }
.pf-conv-compact:has(> .pf-conv-thread) { grid-template-columns: minmax(0, 1fr); }
.pf-conv-compact .pf-conv-start { padding-top: 0.75rem; }
/* A link's card under a message: its site, title, words, picture — a video plays in place. */
.pf-conv-unfurl {
    position: relative;
    max-width: 26rem;
    margin-top: 0.4rem;
    padding: 0.25rem 1.75rem 0.25rem 0.75rem;
    border-left: 3px solid var(--pf-line);
}
.pf-conv-unfurl-site { display: flex; align-items: center; gap: 0.35rem; font-size: 0.8em; opacity: 0.75; }
.pf-conv-unfurl-site img { width: 16px; height: 16px; }
.pf-conv-unfurl-title { display: block; font-weight: 600; }
.pf-conv-unfurl-text { margin: 0.15rem 0 0; font-size: 0.9em; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pf-conv-unfurl-media { position: relative; display: block; margin-top: 0.35rem; padding: 0; border: 0; background: none; cursor: pointer; }
.pf-conv-unfurl-media img, .pf-conv-unfurl-player {
    display: block;
    width: 100%;
    max-height: 15rem;
    object-fit: contain;
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius);
}
.pf-conv-unfurl-player { height: auto; max-height: none; }
.pf-conv-unfurl-play span {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    background: rgb(0 0 0 / 0.65);
    color: #fff;
}
.pf-conv-unfurl-hide { position: absolute; top: 0; right: 0.25rem; border: 0; background: none; cursor: pointer; opacity: 0.6; }
.pf-conv-unfurl-hide:hover { opacity: 1; }
/* GIFs to send: a search over a grid, the provider named under it. */
.pf-conv-gifs { width: min(22rem, 90vw); padding: 0.5rem; }
.pf-conv-gif-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.25rem; max-height: 16rem; overflow-y: auto; margin-top: 0.4rem; }
.pf-conv-gif { padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--pf-radius); overflow: hidden; }
.pf-conv-gif img { display: block; width: 100%; height: 5rem; object-fit: cover; }
.pf-conv-gif-btn { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; }
.pf-conv-compact .pf-conv-thumb img { max-width: 100%; max-height: 10rem; }
.pf-conv-dock-toast { position: fixed; bottom: 6rem; }

@media (max-width: 760px) {
    .pf-conv-dock { right: 0.75rem; bottom: 0.75rem; }
    .pf-conv-dock-panel { position: fixed; inset: 0; width: auto; height: auto; z-index: 2; }
    
    .pf-conv-dock-windows { inset: 0; right: 0; z-index: 3; }
    .pf-conv-dock-windows .pf-conv-window { width: 100vw; height: 100dvh; border-radius: 0; }
    .pf-conv-dock-windows .pf-conv-window-min { position: fixed; left: 0.75rem; right: 5rem; bottom: 0.75rem; width: auto; height: auto; border-radius: var(--pf-radius-lg); }
    .pf-conv-dock-windows:not(:has(.pf-conv-window:not(.pf-conv-window-min))) { inset: auto 0 0 0; }
}

/* The steps of a longer job: done, now, to come */
.pf-steps { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.pf-steps li {
    flex: 1 1 8rem;
    padding-top: 0.4rem;
    font-size: 0.8125rem;
    color: var(--pf-muted);
    border-top: 4px solid var(--pf-line);
}
.pf-steps li { display: flex; align-items: center; gap: 0.4rem; }
.pf-step-mark {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid var(--pf-line);
}
.pf-steps .pf-step-done { color: var(--pf-fg); border-color: var(--pf-ok); }
.pf-steps .pf-step-done .pf-step-mark { color: #fff; background: var(--pf-ok); border-color: var(--pf-ok); }
.pf-steps .pf-step-now { color: var(--pf-fg); font-weight: 600; border-color: var(--pf-accent); }
.pf-steps .pf-step-now .pf-step-mark { color: #fff; background: var(--pf-accent); border-color: var(--pf-accent); }
.pf-inline-fields { display: flex; gap: 0.5rem; align-items: center; }
.pf-inline-fields > * { flex: 1 1 0; min-width: 0; }
.pf-inline-fields > .pf-btn, .pf-inline-fields > button { flex: none; }
.pf-steps .pf-step-now { font-weight: 700; color: var(--pf-accent); border-color: var(--pf-accent); }

/* Narrow screens: the list, or the conversation */
@media (max-width: 760px) {
    
    
    
    
    .pf-conv-main:has(> .pf-conv-thread) { grid-template-columns: minmax(0, 1fr); }
    .pf-conv-thread { position: absolute; inset: 0; z-index: 10; grid-column: 1; }
    .pf-conv-composer .pf-conv-hint { display: none; }
    
    .pf-conv-faces .pf-conv-avatar { display: none; }
    .pf-conv-msg-actions { top: -1.2rem; }
}

/* The sidebar's sections, each folded or open and sorted as the reader left it; a conversation's own menu. */

/* A face in the dock, and the × that puts it away: on hover, or after a long press. */
.pf-conv-dock-face { position: relative; display: inline-flex; }
.pf-conv-dock-face-close {
    position: absolute;
    top: -0.3rem;
    left: -0.3rem;
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    font-size: 0.8rem;
    line-height: 1;
    color: var(--pf-fg);
    background: var(--pf-surface);
    border: 1px solid var(--pf-line);
    border-radius: 50%;
    box-shadow: 0 1px 4px rgb(0 0 0 / 0.2);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
}
.pf-conv-dock-face:hover .pf-conv-dock-face-close, .pf-conv-dock-face:focus-within .pf-conv-dock-face-close,
.pf-conv-dock-face-armed .pf-conv-dock-face-close { opacity: 1; pointer-events: auto; }

/* The conversations alone in a window of their own — popped out, installed, or opened cold. */

/* The views above the conversations: threads, activity, drafts and sent, saved, every unread message. */

/* Somebody inactive — not signed in for a long time: greyed where they already are; a note above a direct conversation's composer. */
.pf-conv-inactive { opacity: 0.55; filter: grayscale(1); }
.pf-conv-inactive-note {
    margin: 0 var(--pf-conv-gutter) 0.35rem;
    padding: 0.35rem 0.6rem;
    font-size: 0.8125rem;
    color: var(--pf-muted);
    background: var(--pf-subtle);
    border-radius: var(--pf-radius);
}

/* The dock's list: the reader's conversations, a filter, a new one, the application's links */
.pf-conv-dock-list {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
    padding: 0.75rem;
    background: var(--pf-surface);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius-lg);
    box-shadow: var(--pf-pop-shadow);
}
.pf-conv-dock-list-head { display: flex; align-items: center; justify-content: space-between; }
.pf-conv-dock-list-head h2 { margin: 0; font-size: 1rem; font-weight: 800; }
.pf-conv-dock-items { flex: 1; min-height: 0; overflow-y: auto; }
.pf-conv-dock-items .pf-conv-item { width: 100%; background: none; border: 0; text-align: left; }
.pf-conv-dock-list-foot { border-top: 1px solid var(--pf-line); padding-top: 0.35rem; }

/* The basic page: the list beside one conversation, with the theme's own cards and buttons */
.pf-conv-basic * { box-sizing: border-box; }
.pf-conv-basic { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.pf-conv-basic-list { margin: 0; padding: 0.25rem; list-style: none; }
.pf-conv-basic-item { display: flex; justify-content: space-between; width: 100%; text-align: left; }
.pf-conv-basic-current { font-weight: 700; }
.pf-conv-basic-main { display: flex; flex-direction: column; min-height: 28rem; }
.pf-conv-basic-messages { flex: 1; max-height: 60vh; overflow-y: auto; padding: 0.5rem 1rem; }
.pf-conv-basic-msg { padding: 0.35rem 0; }
.pf-conv-basic-msg time { font-size: 0.75rem; color: var(--pf-muted); }
.pf-conv-basic-earlier { margin: 0; padding: 0 1rem; }
.pf-conv-basic-error { margin: 0 1rem; color: var(--pf-bad); }
.pf-conv-basic-composer { display: flex; gap: 0.5rem; align-items: flex-end; padding: 0.75rem 1rem; border-top: 1px solid var(--pf-line); }
.pf-conv-basic-composer textarea { flex: 1; }
@media (max-width: 760px) {
    .pf-conv-basic { grid-template-columns: minmax(0, 1fr); }
}

/* The analyst's living picture — Assist\AvatarSets. The framework changes only data-state; this is
   the framework's own set, `pf`: a drop in --pf-assistant-color (the theme's accent), its eyes and
   dots moving with what it does; --pf-assistant-size is inherited, so a parent sizes it. A set of
   the application's own brings its own CSS, and respects both. Still poses where less motion is
   asked for. */
.pf-assistant-avatar { display: inline-flex; align-items: center; justify-content: center; width: var(--pf-assistant-size, 24px); height: var(--pf-assistant-size, 24px); vertical-align: middle; flex: none; color: var(--pf-assistant-color, var(--pf-accent, #2563eb)); line-height: 1; }
.pf-assistant-avatar > img, .pf-assistant-avatar > svg { width: 100%; height: 100%; display: block; }
.pf-assistant-pf .pf-assistant-body { fill: currentColor; transform-origin: 16px 30px; }
.pf-assistant-pf .pf-assistant-eyes, .pf-assistant-pf .pf-assistant-dots { fill: #fff; }
.pf-assistant-pf .pf-assistant-mouth { fill: none; stroke: #fff; stroke-width: 1.4; stroke-linecap: round; }
.pf-assistant-pf .pf-assistant-dots { opacity: 0; }
.pf-assistant-pf .pf-assistant-eyes { transform-origin: 16px 19px; animation: pf-assistant-blink 5s infinite; }
.pf-assistant-avatar[data-state="listening"] .pf-assistant-body { animation: pf-assistant-lean 1.6s ease-in-out infinite; }
.pf-assistant-avatar[data-state="thinking"] .pf-assistant-dots { opacity: 1; }
.pf-assistant-avatar[data-state="thinking"] .pf-assistant-dots circle { animation: pf-assistant-dot 1.2s infinite; }
.pf-assistant-avatar[data-state="thinking"] .pf-assistant-dots circle:nth-child(2) { animation-delay: .2s; }
.pf-assistant-avatar[data-state="thinking"] .pf-assistant-dots circle:nth-child(3) { animation-delay: .4s; }
.pf-assistant-avatar[data-state="talking"] .pf-assistant-mouth { animation: pf-assistant-talk .35s ease-in-out infinite alternate; transform-origin: 16px 24px; }
.pf-assistant-avatar[data-state="success"] .pf-assistant-body { animation: pf-assistant-hop .6s ease-out 2; }
.pf-assistant-avatar[data-state="greeting"] .pf-assistant-body { animation: pf-assistant-wave 1.2s ease-in-out 2; }
.pf-assistant-avatar[data-state="notify"] .pf-assistant-body { animation: pf-assistant-hop .5s ease-out infinite; }
.pf-assistant-avatar[data-state="error"] { color: var(--pf-bad); }
.pf-assistant-avatar[data-state="error"] .pf-assistant-body { animation: pf-assistant-shake .4s ease-in-out 2; }
.pf-assistant-avatar[data-state="offline"] { opacity: .45; filter: grayscale(1); }
.pf-assistant-avatar[data-state="offline"] .pf-assistant-eyes { animation: none; transform: scaleY(.15); }
@keyframes pf-assistant-blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes pf-assistant-lean { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-6deg); } }
@keyframes pf-assistant-dot { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes pf-assistant-talk { from { transform: scaleY(1); } to { transform: scaleY(2.2); } }
@keyframes pf-assistant-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-14%); } }
@keyframes pf-assistant-wave { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }
@keyframes pf-assistant-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8%); } 75% { transform: translateX(8%); } }
@media (prefers-reduced-motion: reduce) {
    .pf-assistant-avatar *, .pf-assistant-avatar { animation: none !important; transition: none !important; }
}

/* The analyst's living picture in the conversations: its own colours, not a person's hue. */
.pf-conv-avatar-assistant { background: none; }
.pf-conv-avatar-assistant .pf-assistant-avatar { width: 100%; height: 100%; }


/* ── Ask: the conversations page and its composer ──────────────────────────────────────────────
   Shape and layout only, on the shared tokens: the theme's own buttons, type and colours stay its
   own. An application brands it with `--pf-chat-accent` (Llm config `chat.accent`), which falls
   back on the theme's primary. Empty, the page is a greeting over one large composer, the
   examples under it; with a conversation, the composer stays at the bottom of the view. */
/* An application's accent, set on the page itself, wins over this. */
.pf-chat { --pf-chat-accent: var(--pf-accent); --pf-chat-width: 1100px; }
.pf-chat .pf-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pf-chat-main { position: relative; display: flex; flex-direction: column; min-height: 70vh; }
/* The page's own tools (⚙) in the column's top corner, their menu opening towards the edge.
   12px, not 0: the nav/aside columns beside it pad their own content by the same 12px, and
   main's own box shares their top edge (the row is align-items:flex-start) — 0 sat flush
   against main's bare edge while they started 12px in, reading as two misaligned elements. */
.pf-ask-gear { position: absolute; top: 12px; right: 12px; z-index: 10; }
.pf-ask-gear > summary { list-style: none; cursor: pointer; }
.pf-ask-gear > ul { position: absolute; right: 0; left: auto; margin: 4px 0 0; padding: 8px 12px; list-style: none; white-space: nowrap; }
.pf-chat-messages { flex: 1 0 auto; }
.pf-chat-empty .pf-chat-messages { flex: 0 0 auto; }
/* One column: the title, Share, the answers and their tools, the composer — wide enough for a report's tables. */
.pf-chat-main > :not(.pf-ask-gear) { width: 100%; max-width: var(--pf-chat-width); margin-left: auto; margin-right: auto; }
.pf-chat-empty .pf-chat-main { justify-content: center; min-height: 60vh; }
.pf-chat-hero { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 24px; text-align: center; }
.pf-chat-hero h1 { margin: 0; font-size: 1.75rem; font-weight: 600; line-height: 1.25; }
.pf-chat-composer {
    position: sticky; bottom: 12px; z-index: 5; margin-top: 8px; padding: 10px 12px 8px;
    border: 1px solid var(--pf-line); border-radius: 1.5rem; background: var(--pf-surface); color: var(--pf-fg);
    box-shadow: var(--pf-pop-shadow);
}
.pf-chat-composer:focus-within { border-color: var(--pf-chat-accent); box-shadow: var(--pf-pop-shadow), 0 0 0 3px color-mix(in oklab, var(--pf-chat-accent) 22%, transparent); }
.pf-chat-empty .pf-chat-composer { position: relative; bottom: auto; }
.pf-chat-input {
    display: block; width: 100%; min-height: 1.5rem; max-height: 40vh; padding: 4px 2px; resize: none; overflow-y: auto;
    border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; color: inherit; font: inherit;
}
.pf-chat-empty .pf-chat-input { min-height: 4.5rem; }
.pf-chat-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.pf-chat-attach {
    display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 999px;
    cursor: pointer; color: var(--pf-muted);
}
.pf-chat-attach:hover, .pf-chat-attach:focus-within { background: var(--pf-subtle); color: var(--pf-fg); }
/* The mic (llm.voice, pf-voice.js): same shape as 📎, lit while dictating. */
.pf-chat-mic {
    display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 999px;
    border: 0; cursor: pointer; color: var(--pf-muted); background: transparent; font-size: 1rem;
}
.pf-chat-mic:hover, .pf-chat-mic:focus-visible { background: var(--pf-subtle); color: var(--pf-fg); }
.pf-chat-mic[aria-pressed="true"] { color: var(--pf-bad); animation: pf-chat-mic-pulse 1.4s ease-in-out infinite; }
@keyframes pf-chat-mic-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .pf-chat-mic[aria-pressed="true"] { animation: none; } }
.pf-chat-hint { margin-left: auto; font-size: 0.75rem; color: var(--pf-muted); }
/* Over a theme's own `button[type=submit]`, which is more specific than one class. */
.pf-chat .pf-chat-send {
    display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; min-height: 0; padding: 0;
    border: 0; border-radius: 999px; background: var(--pf-chat-accent); color: var(--pf-accent-fg); font-size: 1.1rem; cursor: pointer;
}
.pf-chat .pf-chat-send:hover { background: color-mix(in oklab, var(--pf-chat-accent) 88%, #000); transform: none; }
.pf-chat .pf-chat-send:disabled { opacity: 0.4; cursor: default; }
/* Stop, drawn by pf-chat.js with the send button's class: the colour, but a word, not an icon. */
.pf-chat .pf-chat-send[data-pf-chat-stop] { width: auto; height: 2rem; padding: 0 0.9rem; margin-top: 6px; font-size: 0.85rem; font-weight: 500; }
.pf-chat-suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
/* A full reset, not just the radius: the host's own `.btn-outline-*` default — padding, border,
   font — is exactly what a Bootstrap 3.3.1 page gets wrong for this button. */
.pf-chat .pf-chat-suggestions button {
    padding: 0.35rem 0.85rem; font: inherit; font-size: 0.8125rem; line-height: 1.4;
    color: var(--pf-fg); background: var(--pf-surface); border: 1px solid var(--pf-line);
    border-radius: 999px; cursor: pointer;
}
.pf-chat .pf-chat-suggestions button:hover { background: var(--pf-subtle); }
.pf-chat-commands {
    position: absolute; left: 12px; right: 12px; bottom: 100%; z-index: 20; max-height: 260px; overflow: auto;
    margin: 0 0 6px; padding: 6px; list-style: none; border: 1px solid var(--pf-line); border-radius: var(--pf-radius-lg);
    background: var(--pf-surface); color: var(--pf-fg); box-shadow: var(--pf-pop-shadow);
}
.pf-chat-commands li { display: flex; gap: 10px; align-items: baseline; padding: 6px 10px; border-radius: var(--pf-radius); cursor: pointer; }
.pf-chat-commands li[aria-selected="true"] { background: color-mix(in oklab, var(--pf-chat-accent) 14%, transparent); }
.pf-chat-commands b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; }
.pf-chat-commands span { color: var(--pf-muted); font-size: 0.875rem; }
.pf-chat-partial { white-space: pre-wrap; }

/* `$c['btn']`/`btnGhost`/`input`/`card` in chat.html.php carry one of these alongside the
   theme's own class (e.g. `pf-chat-btn btn btn-sm btn-primary`) — the theme-native class stays
   in the markup for anything that hooks off it, but these, scoped under `.pf-chat`, are what
   actually governs the pixels: a deterministic look that owes nothing to whatever
   Bootstrap/daisyUI version (if any) the host page has loaded. */
.pf-chat .pf-chat-btn, .pf-chat .pf-chat-btn-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
    padding: 0.35rem 0.85rem; font: inherit; font-size: 0.8125rem; line-height: 1.4;
    border: 1px solid transparent; border-radius: var(--pf-radius); cursor: pointer;
    text-decoration: none;
}
.pf-chat .pf-chat-btn { color: var(--pf-accent-fg); background: var(--pf-chat-accent); }
.pf-chat .pf-chat-btn:hover { background: color-mix(in oklab, var(--pf-chat-accent) 88%, #000); }
.pf-chat .pf-chat-btn-ghost { color: var(--pf-fg); background: transparent; }
.pf-chat .pf-chat-btn-ghost:hover { background: var(--pf-subtle); }
.pf-chat .pf-chat-input {
    display: block; width: 100%; padding: 0.4rem 0.6rem; font: inherit; color: var(--pf-fg);
    background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: var(--pf-radius);
}
.pf-chat .pf-chat-input:focus { outline: 2px solid var(--pf-chat-accent); outline-offset: 1px; }
.pf-chat .pf-chat-card {
    color: var(--pf-fg); background: var(--pf-surface); border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius-lg);
}

/* The assistant's answer — Markdown-rendered, so headings/lists/tables/code are real content,
   not markup this page controls — gets its own explicit typography instead of inheriting
   whatever the host page's global heading/list/table/code styles happen to be. */
.pf-chat-answer { color: var(--pf-fg); font-size: 0.9375rem; line-height: 1.6; }
.pf-chat-answer > *:first-child { margin-top: 0; }
.pf-chat-answer > *:last-child { margin-bottom: 0; }
.pf-chat-answer h1, .pf-chat-answer h2, .pf-chat-answer h3,
.pf-chat-answer h4, .pf-chat-answer h5, .pf-chat-answer h6 { margin: 1em 0 0.4em; font-weight: 600; line-height: 1.3; }
.pf-chat-answer h1 { font-size: 1.25rem; }
.pf-chat-answer h2 { font-size: 1.125rem; }
.pf-chat-answer h3 { font-size: 1rem; }
.pf-chat-answer h4, .pf-chat-answer h5, .pf-chat-answer h6 { font-size: 0.9375rem; }
.pf-chat-answer p { margin: 0 0 0.75em; }
.pf-chat-answer ul, .pf-chat-answer ol { margin: 0 0 0.75em; padding-left: 1.4em; }
.pf-chat-answer li { margin: 0.2em 0; }
.pf-chat-answer a { color: var(--pf-chat-accent); text-decoration: underline; }
.pf-chat-answer blockquote {
    margin: 0 0 0.75em; padding-left: 0.85em; border-left: 3px solid var(--pf-line); color: var(--pf-muted);
}
.pf-chat-answer code {
    padding: 0.15em 0.35em; font-size: 0.85em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: var(--pf-subtle); border-radius: 0.3em;
}
.pf-chat-answer pre {
    margin: 0 0 0.75em; padding: 0.75em 1em; overflow-x: auto; background: var(--pf-subtle); border-radius: var(--pf-radius);
}
.pf-chat-answer pre code { padding: 0; background: none; }
.pf-chat-answer table { width: 100%; margin: 0 0 0.75em; border-collapse: collapse; font-size: 0.875em; }
.pf-chat-answer th, .pf-chat-answer td { padding: 0.4em 0.6em; border: 1px solid var(--pf-line); text-align: left; }
.pf-chat-answer th { background: var(--pf-subtle); font-weight: 600; }

/* The gear glyph (⚙) renders high relative to its baseline in some fonts/OSes; nudged down
   rather than left to default alignment, which drifted visibly against adjacent text. */
.pf-chat-gear { display: inline-block; vertical-align: -0.08em; line-height: 1; }

/* 👍, the note and 👎 under an answer, on one line: a theme's input is a block a row wide. */
.pf-rating { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
.pf-rating form { display: inline-flex !important; align-items: center; gap: 0.25rem; }
.pf-rating button { padding: 0.25rem 0.4rem; font-size: 1.15rem; line-height: 1; text-decoration: none; }
/* A theme's link-button hover (`.btn.btn-link:hover`, three classes) underlines and fills 👎: not here. */
.pf-rating button, .pf-rating button:hover, .pf-rating button:focus, .pf-rating button:active { text-decoration: none !important; box-shadow: none !important; background: transparent !important; }
.pf-rating button:focus-visible { outline: 2px solid var(--pf-accent) !important; outline-offset: 2px; }
.pf-rating button[aria-pressed="true"] { background: color-mix(in oklab, var(--pf-accent) 14%, transparent) !important; border-radius: var(--pf-radius); }
.pf-rating input[type="text"] { display: inline-block; width: 14rem; height: auto; min-height: 0; padding: 0.25rem 0.5rem; font-size: 0.85rem; }

/* ── pf-tour.js: a spotlight product tour ──────────────────────────────────────────────────────
   Mechanism only — the steps and their text are an application's own (window.PfTour.start()).
   Shape and layout on the shared tokens, like the rest of this file. */
.pf-tour-backdrop { position: fixed; inset: 0; z-index: 90; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; cursor: default; }
.pf-tour-dim { position: fixed; inset: 0; z-index: 91; width: 100%; height: 100%; pointer-events: none; }
.pf-tour-dim-fill { fill: rgba(15, 23, 42, 0.72); }
.pf-tour-glow {
    position: fixed; z-index: 92; border-radius: 16px; border: 2px solid var(--pf-accent);
    box-shadow: 0 0 24px color-mix(in oklab, var(--pf-accent) 60%, transparent);
    pointer-events: none; transition: top .3s ease-out, left .3s ease-out, width .3s ease-out, height .3s ease-out;
}
.pf-tour-card {
    z-index: 93; width: min(360px, calc(100vw - 16px)); padding: 16px; border-radius: var(--pf-radius-lg);
    border: 1px solid var(--pf-line); background: var(--pf-surface); color: var(--pf-fg); box-shadow: var(--pf-pop-shadow);
}
.pf-tour-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--pf-line); }
.pf-tour-badge { font-size: 0.75rem; font-weight: 600; color: var(--pf-muted); }
.pf-tour-close { width: 1.75rem; height: 1.75rem; border: 0; border-radius: 999px; background: transparent; color: var(--pf-muted); cursor: pointer; }
.pf-tour-close:hover, .pf-tour-close:focus-visible { background: var(--pf-subtle); color: var(--pf-fg); }
.pf-tour-body { display: flex; gap: 12px; align-items: flex-start; margin: 12px 0; }
.pf-tour-avatar { flex: none; width: 40px; }
.pf-tour-avatar:empty { display: none; }
.pf-tour-text { min-width: 0; }
.pf-tour-title { margin: 0 0 4px; font-size: 1rem; font-weight: 700; }
.pf-tour-desc { margin: 0; font-size: 0.8rem; color: var(--pf-muted); line-height: 1.5; }
.pf-tour-dots { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px 0; }
.pf-tour-dot { width: 8px; height: 6px; padding: 0; border: 0; border-radius: 999px; background: var(--pf-line); cursor: pointer; transition: width .2s, background .2s; }
.pf-tour-dot-active { width: 22px; background: var(--pf-accent); }
.pf-tour-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--pf-line); }
.pf-tour-speak { border: 0; background: transparent; color: var(--pf-muted); font-size: 0.8rem; cursor: pointer; padding: 4px 6px; border-radius: var(--pf-radius); }
.pf-tour-speak:hover, .pf-tour-speak:focus-visible { background: var(--pf-subtle); color: var(--pf-fg); }
.pf-tour-speak[aria-pressed="true"] { color: var(--pf-accent); font-weight: 600; }
.pf-tour-nav { display: flex; gap: 6px; }
.pf-tour-back, .pf-tour-next {
    padding: 6px 12px; font-size: 0.8rem; border-radius: 999px; cursor: pointer;
}
.pf-tour-back { border: 1px solid var(--pf-line); background: transparent; color: var(--pf-fg); }
.pf-tour-back:hover { background: var(--pf-subtle); }
.pf-tour-next { border: 0; background: var(--pf-accent); color: var(--pf-accent-fg); font-weight: 600; }
.pf-tour-next:hover { background: color-mix(in oklab, var(--pf-accent) 88%, #000); }
@media (prefers-reduced-motion: reduce) { .pf-tour-glow { transition: none; } }

/* ── pf-companion.js: a floating companion dock ────────────────────────────────────────────────
   Shape and positioning only — no pose-specific styling, deliberately: what a pose looks like is
   the application's own stylesheet reacting to [data-pose="…"], not this file's business. */
.pf-companion-dock {
    position: fixed; z-index: 80; width: 56px; height: 56px; cursor: pointer;
    transition: opacity .3s ease, transform .3s ease;
}
.pf-companion-dock--top-left { top: 16px; left: 16px; }
.pf-companion-dock--top-right { top: 16px; right: 16px; }
.pf-companion-dock--bottom-left { bottom: 16px; left: 16px; }
.pf-companion-dock--bottom-right { bottom: 16px; right: 16px; }
.pf-companion-dock[data-pf-companion-activity="away"] { opacity: .55; }
.pf-companion-dock .pf-assistant-avatar { width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) { .pf-companion-dock { transition: none; } }

/* pf-companion-debug.js: a generic preview panel for whatever is mounted. */
.pf-companion-debug-panel {
    position: fixed; z-index: 95; bottom: 16px; left: 16px; width: min(280px, calc(100vw - 32px));
    padding: 12px; border-radius: var(--pf-radius-lg); border: 1px solid var(--pf-line);
    background: var(--pf-surface); color: var(--pf-fg); box-shadow: var(--pf-pop-shadow);
    font-size: 0.8rem;
}
.pf-companion-debug-preview { width: 96px; height: 96px; margin: 0 auto 10px; }
.pf-companion-debug-states, .pf-companion-debug-poses { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pf-companion-debug-panel button { padding: 4px 10px; font-size: 0.75rem; border-radius: 999px; border: 1px solid var(--pf-line); background: transparent; color: var(--pf-fg); cursor: pointer; }
.pf-companion-debug-panel button:hover { background: var(--pf-subtle); }
.pf-companion-debug-panel input[type="text"] { width: 100%; padding: 4px 8px; margin-bottom: 6px; border: 1px solid var(--pf-line); border-radius: var(--pf-radius); background: var(--pf-surface); color: var(--pf-fg); font-size: 0.75rem; }

/* A group of dashboard cards as tabs. The theme's own tabs draw the strip; these are for a view
   that uses the framework's tab classes instead, as the plain theme does. */
.pf-dashboard-tab-strip { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .75rem; }
.pf-dashboard-tab-strip .pf-dashboard-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: .4rem .75rem; cursor: pointer; font: inherit; color: inherit; }
.pf-dashboard-tab-strip .pf-dashboard-tab.is-active { border-bottom-color: currentColor; font-weight: 600; }
/* A card dragged over a group's strip, which takes it when let go; a tab being dragged. */
.pf-dashboard-tabs-target { outline: 2px dashed currentColor; outline-offset: 2px; }
.pf-dashboard-tab-dragging { opacity: .5; }
/* The presets and dashboards dialog: one width in every theme, its tabs, forms and footer. */
.pf-dashboard-presets-dialog { width: min(640px, 95vw); }
.pf-dashboard-presets { padding: 1rem; }
.pf-dashboard-presets-list { list-style: none; padding: 0; margin: 0 0 .5rem; max-height: 45vh; overflow: auto; }
.pf-dashboard-form { display: grid; gap: .6rem; }
.pf-dashboard-inline-form { display: inline-flex; gap: .25rem; align-items: center; }
.pf-dashboard-people { list-style: none; padding: 0; margin: 0; max-height: 14rem; overflow: auto; }
.pf-dashboard-person { display: block; width: 100%; text-align: left; background: none; border: 0; padding: .35rem .5rem; cursor: pointer; }
.pf-dashboard-presets-foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: 1rem; padding-top: .75rem; border-top: 1px solid rgba(127, 127, 127, .25); }
/* A field for one choice, hidden: a theme's display utility (Bootstrap's d-block is !important)
   must not keep it showing. And the tools' symbols (⧉ ⇱ ⚙) from a font that has them. */
[data-pf-show-when][hidden] { display: none !important; }
.pf-dashboard-tools button, .pf-dashboard-tools .btn { font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", "DejaVu Sans", sans-serif; }

/* Metric reports: a wide table scrolls on its own, totals stand out, print leaves the controls out. */
.pf-report-scroll { overflow-x: auto; margin-bottom: 1.5rem; }
.pf-report td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pf-report thead th:not(:first-child) { text-align: right; }
.pf-report-total th, .pf-report-total td { font-weight: 600; border-top: 2px solid currentColor; }
.pf-report-section { margin: 1.5rem 0 .5rem; font-weight: 600; }
@media print {
    .pf-no-print { display: none !important; }
    .pf-report-page { padding: 0; }
    .pf-report-scroll { overflow: visible; }
}

/* A message's picture opened large: a blurred backdrop, a bar, and a stage it zooms and pans in. */
.pf-conv-lightbox { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(6px); }
.pf-conv-lightbox-bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.9rem; color: #fff; }
.pf-conv-lightbox-bar a { color: #fff; }
.pf-conv-lightbox-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-conv-lightbox-bar button { background: none; border: 0; color: #fff; font-size: 1.1rem; cursor: pointer; min-width: 2rem; }
.pf-conv-lightbox-percent { font-size: 0.9rem !important; font-variant-numeric: tabular-nums; }
.pf-conv-lightbox-stage { position: relative; flex: 1; overflow: hidden; touch-action: none; }
.pf-conv-lightbox-stage img { position: absolute; top: 0; left: 0; transform-origin: 0 0; max-width: none; user-select: none; }
.pf-conv-lightbox-zoomed { cursor: grab; }
.pf-conv-lightbox-zoomed:active { cursor: grabbing; }

/* The to-do list (/admin/Todo) and the header's urgent five */
.pf-todo-list { list-style: none; margin: 0; padding: 0; }
.pf-todo { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.5rem 0; border-top: 1px solid var(--pf-line); }
.pf-todo:first-child { border-top: 0; }
.pf-todo-done { margin-top: 0.3rem; }
.pf-todo-main { flex: 1; min-width: 0; }
.pf-todo-title { white-space: pre-wrap; overflow-wrap: anywhere; outline: none; }
.pf-todo-title[contenteditable]:focus { box-shadow: 0 0 0 2px var(--pf-subtle); border-radius: 0.25rem; }
.pf-todo-link { margin-left: 0.4rem; font-size: 0.85rem; }
.pf-todo-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.25rem; font-size: 0.85rem; }
.pf-todo-chip { width: auto; height: 1.8rem; padding: 0 0.4rem; font-size: 0.85rem; }
.pf-todo-closed .pf-todo-title { color: var(--pf-muted); text-decoration: line-through; }
.pf-todo-overdue .pf-todo-title { color: var(--pf-bad); }
.pf-todo-error { outline: 1px solid var(--pf-bad); }
.pf-todo-menu { position: relative; }
.pf-todo-menu > summary { list-style: none; cursor: pointer; padding: 0 0.4rem; border-radius: var(--pf-radius); }
.pf-todo-menu > summary::-webkit-details-marker { display: none; }
.pf-todo-menu-body { position: absolute; right: 0; z-index: 5; display: flex; flex-direction: column; gap: 0.25rem; min-width: 12rem; padding: 0.4rem; background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: var(--pf-radius); box-shadow: var(--pf-shadow); }
.pf-todo-bar { display: flex; height: 0.6rem; background: var(--pf-subtle); border-radius: 999px; overflow: hidden; }
.pf-todo-bar-done { background: var(--pf-ok); }
.pf-todo-bar-open { background: var(--pf-info); }
.pf-todo-bar-overdue { background: var(--pf-bad); }
.pf-todo-urgent { position: relative; display: inline-block; }
.pf-todo-urgent > summary { list-style: none; cursor: pointer; }
.pf-todo-urgent > summary::-webkit-details-marker { display: none; }
.pf-todo-urgent-count { display: inline-block; min-width: 1.1rem; padding: 0 0.3rem; margin-left: 0.15rem; font-size: 0.7rem; line-height: 1.1rem; text-align: center; color: #fff; background: var(--pf-bad); border-radius: 999px; }
.pf-todo-urgent-panel { position: absolute; right: 0; z-index: 50; width: 20rem; max-width: 90vw; margin: 0; padding: 0.4rem; list-style: none; background: var(--pf-surface); color: var(--pf-fg); border: 1px solid var(--pf-line); border-radius: var(--pf-radius); box-shadow: var(--pf-shadow); }
.pf-todo-urgent-panel li { padding: 0.35rem 0.4rem; border-radius: var(--pf-radius); overflow-wrap: anywhere; }
.pf-todo-urgent-panel .pf-todo-overdue { color: var(--pf-bad); }