/*
 * Venkero — the application stylesheet.
 *
 * This is not a new look. It is the design Venkero already has, written down in DESIGN-SYSTEM.md and
 * implemented here once so screens stop looking like bare WordPress. The values come from that document,
 * which was taken from the live application's stylesheet.
 *
 * TWO RULES THAT MATTER MORE THAN THE VALUES
 *
 * 1. EVERYTHING IS SCOPED TO `.venkero-app`. These screens live inside wp-admin, and a stylesheet that
 *    reached beyond its own pages would repaint WordPress itself. So no bare element selectors, no `body`,
 *    nothing global: every rule starts at `.venkero-app`.
 *
 * 2. DECORATIVE ACCENTS NEVER ENCODE BUSINESS STATE. The highlight colour is decoration and identity, and a
 *    business can change it. Status keeps its own fixed colours (`--status-*`), so a green that means "done"
 *    looks the same in every workspace. The accent appears in exactly five places, listed below.
 *
 * The palette is defined ONCE. The live stylesheet this was taken from redefined `:root` four or more times
 * with slightly different values, which made the appearance depend on where a block sat in the file; that is
 * the defect this file exists to avoid.
 */

/* ───────────────────────────────────────────────────────────── the tokens, once */

.venkero-app {
    /* Light is the default. */
    --accent: #c6f74a;            /* sampled from Peter's design references, 2026-09-21 */
    --on-accent: #0d100b;         /* near-black text ON lime, which is how the references set it */

    /* The references are set in an Inter-like face, so the system UI face is used instead of downloading a
     * webfont: on the hardware these were drawn on it resolves to the same family. */
    --font-ui: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --background: #f7f8f6;
    --foreground: #20231f;
    --surface: #ffffff;
    --surface-soft: #eef0eb;
    --text-muted: #575e53;
    --ink: #20231f;
    --border: #c9cfc4;

    /* Status: fixed, never customisable, never the accent. */
    --status-ready-bg: #e9f4e7;
    --status-ready-text: #27552d;
    --status-action-bg: #fff1cc;
    --status-action-text: #713d00;
    --status-error-bg: #fff0ed;
    --status-error-text: #822619;
    --status-error-border: #bf5544;
    --danger: #b42332;

    /* Shape and spacing. */
    --radius: 8px;
    --radius-sm: 4px;
    --radius-lg: 12px;
    --card-padding: 24px;
    --card-gap: 22px;
    --shadow: 0 2px 5px rgba(32, 35, 31, 0.04);
    --target: 44px;               /* the smallest an interactive control may be */

    box-sizing: border-box;
    color: var(--foreground);
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.5;
}

.venkero-app *,
.venkero-app *::before,
.venkero-app *::after {
    box-sizing: inherit;
}

/* Dark mode has three ways in and all three keep working. Print always forces light (below). */
.venkero-app[data-mode="dark"] {
    /* Measured from the references: content on #161915, sidebar and cards on #1e221b, a barely-there border, and
     * pure white headings rather than off-white. */
    --background: #161915;
    --foreground: #ffffff;
    --surface: #1e221b;
    --surface-soft: #262b22;
    --text-muted: #9aa392;
    --ink: #0d100b;
    --border: #2b3128;
    --status-ready-bg: #273d29;
    --status-ready-text: #c5edc7;
    --status-action-bg: #443821;
    --status-action-text: #ffe1a3;
    --status-error-bg: #432b28;
    --status-error-text: #ffd8d1;
    --shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}

/* Small layout helpers.
   They exist because screens were carrying these decisions as inline styles, which put the appearance of the
   interface inside PHP — where it cannot follow a theme, a dark mode, or a change to the design system. Each one
   declares exactly what the inline style declared, so nothing moves on screen: only where the decision lives. */
.venkero-flush       { margin: 0; }
.venkero-flush-end   { margin-right: 6px; }
.venkero-gap-top-sm  { margin-top: 8px; }
.venkero-gap-top     { margin-top: 10px; }
.venkero-gap-top-md  { margin-top: 14px; }
.venkero-card-spaced { margin: 14px 0; }
.venkero-inline      { display: inline-block; }
.venkero-search      { flex: 1 1 240px; }
.venkero-col-tick    { width: 36px; }
.venkero-copy-field  { width: 100%; max-width: 520px; padding: 7px; margin: 2px 0 6px; font-family: monospace; }
.venkero-full          { width: 100%; }
.venkero-gap-top-em    { margin-top: 1em; }
.venkero-gap-top-12    { margin-top: 12px; }
.venkero-gap-top-lg    { margin-top: 18px; }
.venkero-progress-note { margin: .25em 0 .7em; }
.venkero-field           { display: inline-block; margin: 0 12px 8px 0; }
.venkero-quiet           { color: var(--text-muted); }
.venkero-gap-below-sm    { margin: 0 0 8px; }
.venkero-break           { word-break: break-all; }
.venkero-form-spaced     { margin: 12px 0 24px; }
.venkero-inline-form     { display: inline-block; margin-right: 16px; }
.venkero-notice          { padding: 8px 12px; background: var(--venkero-notice-background); }
.venkero-document-body   { white-space: pre-wrap; border: 1px solid var(--border); padding: 16px; margin: 12px 0; }
.venkero-document-footer { border-top: 1px solid var(--border); margin-top: 24px; padding-top: 8px; color: var(--text-muted); }
.venkero-field           { display: inline-block; margin: 0 12px 8px 0; }
.venkero-quiet           { color: var(--text-muted); }
.venkero-gap-below-sm    { margin: 0 0 8px; }
.venkero-break           { word-break: break-all; }
.venkero-form-spaced     { margin: 12px 0 24px; }
.venkero-inline-form     { display: inline-block; margin-right: 16px; }
.venkero-notice          { padding: 8px 12px; background: var(--venkero-notice-background); }
.venkero-document-body   { white-space: pre-wrap; border: 1px solid var(--border); padding: 16px; margin: 12px 0; }
.venkero-document-footer { border-top: 1px solid var(--border); margin-top: 24px; padding-top: 8px; color: var(--text-muted); }
@media (prefers-color-scheme: dark) {
    .venkero-app[data-mode="system"] {
        --background: #171a16;
        --foreground: #eef1e9;
        --surface: #242922;
        --surface-soft: #2e342b;
        --text-muted: #bdc6b6;
        --ink: #121510;
        --border: #59624f;
        --status-ready-bg: #273d29;
        --status-ready-text: #c5edc7;
        --status-action-bg: #443821;
        --status-action-text: #ffe1a3;
        --status-error-bg: #432b28;
        --status-error-text: #ffd8d1;
        --shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    }
}

.venkero-app[data-background="warm"] {
    --background: #f7f4ed;
    --surface-soft: #eeebe3;
}

.venkero-app[data-surface="soft"] {
    --surface: #f1f3ee;
}

/* ───────────────────────────────────────────────────────────── type */

.venkero-app h1,
.venkero-app h2,
.venkero-app h3 {
    font-weight: 550;
    letter-spacing: -0.03em;
    color: var(--foreground);
    margin: 0 0 6px;
}

.venkero-app h1 {
    font-size: 34px;
    letter-spacing: -0.045em;
}

.venkero-app h2 {
    /* The design system's section heading: 21px with -.4px tracking (DESIGN-SYSTEM.md, section 4). */
    font-size: 21px;
    letter-spacing: -.4px;
}

.venkero-app h3 {
    font-size: 17px;
}

.venkero-app p {
    margin: 0 0 12px;
}

.venkero-app .venkero-eyebrow {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 8px;
}

.venkero-app .venkero-subtitle,
.venkero-app .venkero-meta {
    color: var(--text-muted);
    font-size: 13px;
    margin: 0 0 18px;
}

.venkero-app .venkero-figure {
    font-weight: 480;
    letter-spacing: -0.035em;
}

/* ───────────────────────────────────────────────────────────── the page heading
 * The accent's first place: a 3px rule above each page heading.
 */

.venkero-app .venkero-heading {
    border-top: 3px solid var(--accent);
    padding-top: 14px;
    margin: 0 0 22px;
}

/* ───────────────────────────────────────────────────────────── cards and panels */

.venkero-app .venkero-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--card-padding);
    box-shadow: var(--shadow);
    margin-bottom: var(--card-gap);
}

.venkero-app .venkero-card > :last-child {
    margin-bottom: 0;
}

.venkero-app .venkero-card-title {
    font-size: 17px;
    font-weight: 550;
    letter-spacing: -0.02em;
    margin: 0 0 4px;
}

/* The old '·'-separated nav was replaced by .venkero-tabs on 2026-09-23; its rules went with it. */

/* A project heading inside the file list. Quiet enough to scan past, clear enough to break the list up. */
.venkero-app .venkero-group-heading th {
    padding: 12px 10px 6px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    font-weight: 650;
    letter-spacing: .01em;
    text-align: left;
    color: var(--foreground);
}

.venkero-app .venkero-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 18px;
}

.venkero-app .venkero-toolbar .venkero-spacer {
    flex: 1 1 auto;
}

/* ───────────────────────────────────────────────────────────── controls
 * Every interactive control is at least 44px tall, for fingers and for people on touch laptops.
 */

.venkero-app button,
.venkero-app .button,
.venkero-app input[type="submit"],
.venkero-app a.venkero-button,
.venkero-app summary {
    min-height: var(--target);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border-radius: var(--radius);
    border: 1px solid var(--foreground);
    background: var(--surface);
    color: var(--foreground);
    font-family: inherit;
    font-size: 15px;
    font-weight: 550;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}

/* The accent's second place: primary buttons — and they carry a visible border, so a business accent that
 * matches its own background still shows an edge. */
.venkero-app .venkero-primary,
.venkero-app button.venkero-primary,
.venkero-app input[type="submit"].venkero-primary {
    background: var(--accent);
    color: var(--on-accent);
    border: 1px solid var(--foreground);
}

.venkero-app .venkero-danger {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

.venkero-app :is(button, .button, a.venkero-button, summary, input, select, textarea):hover {
    background: var(--surface-soft);
}

.venkero-app .venkero-primary:hover {
    background: var(--accent);
    filter: brightness(0.96);
}

/* Focus is always visible: a real outline plus the accent's third place, the glow. Never removed. */
.venkero-app :is(button, .button, a.venkero-button, summary, input, select, textarea, a, [tabindex]):focus-visible {
    outline: 2px solid var(--foreground);
    outline-offset: 3px;
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 55%, transparent);
}

.venkero-app input[type="text"],
.venkero-app input[type="search"],
.venkero-app input[type="date"],
.venkero-app input[type="number"],
.venkero-app input[type="email"],
.venkero-app input[type="tel"],
.venkero-app input[type="file"],
.venkero-app select,
.venkero-app textarea {
    min-height: var(--target);
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--foreground);
    font-family: inherit;
    font-size: 15px;
}

.venkero-app fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

.venkero-app label {
    display: block;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

/* ───────────────────────────────────────────────────────────── tables */

.venkero-app table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    font-size: 15px;
}

.venkero-app th {
    text-align: left;
    font-size: 12px;
    font-weight: 550;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}

.venkero-app td {
    padding: 14px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.venkero-app tr:last-child td {
    border-bottom: none;
}

.venkero-app td .venkero-name {
    font-weight: 550;
}

.venkero-app .venkero-numeric {
    font-variant-numeric: tabular-nums;
}

/* ───────────────────────────────────────────────────────────── status
 * Fixed colours, deliberately separate from the accent, so a green that means "ready" means it everywhere.
 */

.venkero-app .venkero-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 550;
    letter-spacing: 0.02em;
}

.venkero-app .venkero-status-ready {
    background: var(--status-ready-bg);
    color: var(--status-ready-text);
}

.venkero-app .venkero-status-action {
    background: var(--status-action-bg);
    color: var(--status-action-text);
}

.venkero-app .venkero-status-error,
.venkero-app .venkero-note-error,
.venkero-app [role="alert"] {
    background: var(--status-error-bg);
    color: var(--status-error-text);
}

.venkero-app .venkero-note-error,
.venkero-app .venkero-note-warn,
.venkero-app .venkero-note-ok,
.venkero-app .venkero-note {
    display: block;
    padding: 12px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface-soft);
    margin: 0 0 14px;
}

.venkero-app .venkero-note-error {
    border-color: var(--status-error-border);
}

.venkero-app .venkero-note-warn {
    background: var(--status-action-bg);
    color: var(--status-action-text);
    border-color: transparent;
}

.venkero-app .venkero-note-ok {
    background: var(--status-ready-bg);
    color: var(--status-ready-text);
    border-color: transparent;
}

/* ───────────────────────────────────────────────────────────── progress
 * The accent's fifth place: progress bars and the selected-checkbox tint.
 */

.venkero-app .venkero-progress {
    height: 8px;
    border-radius: 999px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    overflow: hidden;
}

.venkero-app .venkero-progress > span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--accent);
}

/* The accent's fifth place: progress bars and the selected-checkbox tint. The page uses a real <progress>
 * element, so it is styled through its own vendor properties rather than repainted with a look-alike. */
.venkero-app progress {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-soft);
    overflow: hidden;
}

.venkero-app progress::-webkit-progress-bar {
    background: var(--surface-soft);
    border-radius: 999px;
}

.venkero-app progress::-webkit-progress-value {
    background: var(--accent);
    border-radius: 999px;
}

.venkero-app progress::-moz-progress-bar {
    background: var(--accent);
    border-radius: 999px;
}

/* ───────────────────────────────────────────────────────────── the empty state
 * Not an illustration. One sentence and the buttons that answer it.
 */

.venkero-app .venkero-empty {
    text-align: center;
    padding: 44px 24px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--text-muted);
}

.venkero-app .venkero-empty strong {
    display: block;
    color: var(--foreground);
    font-size: 17px;
    font-weight: 550;
    margin-bottom: 6px;
}

/* The drop state while a file is being dragged over the window. */
.venkero-app.venkero-dragging .venkero-dropzone,
.venkero-app .venkero-dropzone.venkero-over {
    border-color: var(--foreground);
    background: var(--surface-soft);
}

.venkero-app .venkero-dropzone {
    border: 2px dashed var(--border);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    text-align: center;
    background: var(--surface);
    margin-bottom: 18px;
}

/* ───────────────────────────────────────────────────────────── lists of files */

.venkero-app .venkero-filelist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.venkero-app .venkero-filelist li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}

.venkero-app .venkero-filelist li:last-child {
    border-bottom: none;
}

.venkero-app .venkero-filelist .venkero-size {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.venkero-app .venkero-log {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-muted);
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    max-height: 220px;
    overflow: auto;
    white-space: pre-wrap;
}

.venkero-app .venkero-log .warn {
    color: var(--status-action-text);
}

.venkero-app .venkero-log .error {
    color: var(--status-error-text);
}

/* ───────────────────────────────────────────────────────────── reduced motion
 * Removes all animation and transitions, as the live stylesheet already did.
 */

@media (prefers-reduced-motion: reduce) {
    .venkero-app *,
    .venkero-app *::before,
    .venkero-app *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* A dark-mode business still gets black on white when it is printed. */
@media print {
    .venkero-app {
        --background: #fff;
        --foreground: #000;
        --surface: #fff;
        --surface-soft: #fff;
        --text-muted: #333;
        --border: #999;
        box-shadow: none;
    }
}

/* ───────────────────────────────────────────────────────────── narrow screens */

@media (max-width: 600px) {
    .venkero-app .venkero-card {
        padding: 20px;
        margin-bottom: 18px;
    }

    .venkero-app h1 {
        font-size: 28px;
    }

    .venkero-app .venkero-toolbar {
        align-items: stretch;
    }

    .venkero-app .venkero-toolbar > * {
        flex: 1 1 auto;
    }
}

/* ────────────────────────────────────────────────── utilities the screens were inlining */

/*
 * Added 2026-09-18. The screens carried 48 appearances of `style="…"`, most of them the same few strings:
 * status pills, muted text, form fields, small stacks. Appearance belongs here, beside the tokens; markup
 * should say what a thing IS, not what it looks like — that is the difference between a screen that looks
 * like the product and markup that looks like markup.
 */
.venkero-app .venkero-status,
.venkero-app .venkero-pill {
    display: inline-block;
    margin: 0 12px 8px 0;
}

.venkero-app .venkero-meta { color: var(--text-muted); }

.venkero-app .venkero-field {
    width: 100%;
    max-width: 340px;
    padding: 8px;
    margin-top: 4px;
}

.venkero-app .venkero-field-wide {
    width: 100%;
    max-width: 520px;
    padding: 7px;
    margin: 2px 0 6px;
    font-family: Consolas, Monaco, monospace;
    font-size: 13px;
}

.venkero-app .venkero-stack { margin: 12px 0 24px; }
.venkero-app .venkero-stack-tight { margin-top: 10px; }
.venkero-app .venkero-note-inline { margin: 18px 0 0; font-size: 12px; }

.venkero-app .venkero-preview {
    white-space: pre-wrap;
    border: 1px solid var(--border);
    padding: 16px;
    margin: 12px 0;
}

.venkero-app .venkero-label {
    margin: 0 0 4px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
}

/* The period control and the two export buttons on the Money screen. Rules rather than inline styles, for the
   same reason every other design decision moved out of PHP: a style written beside its markup is a style a
   later screen cannot find. */
.venkero-actions form     { display: inline-block; margin: 0 8px 0 0; }
.venkero-actions button   { vertical-align: middle; }
.venkero-figures th       { width: 55%; font-weight: 600; }
.venkero-figures td       { font-variant-numeric: tabular-nums; }
.venkero-period select,
.venkero-period input     { margin-right: 4px; }

/* ─────────────────────────────────────────────── composition, 2026-09-21
 * The tokens and the components were already here. What was missing is that the screens did not USE them:
 * the money page printed its six figures into a plain WordPress table and its buttons loose on the page, so
 * a designed system rendered as stock wp-admin. These are the pieces the screens needed to say "a figure" and
 * "a card's heading" rather than "a table cell" and "a bold line".
 */

/* The figures a business reads first. Big numerals, a quiet label, the definition underneath — the reference's
 * own habit, and the reason it matters is that two of these are period flows and two are current balances. */
.venkero-app .venkero-metrics {
    display: grid;
    /* Three columns, because there are six figures: auto-fit at 210px gave four across and left a hole in the
     * second row, which reads as a missing figure rather than as a layout. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--card-gap);
    margin: 0 0 4px;
}

@media (max-width: 900px) {
    .venkero-app .venkero-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .venkero-app .venkero-metrics { grid-template-columns: minmax(0, 1fr); }
}

.venkero-app .venkero-metric { margin: 0; }

.venkero-app .venkero-metric-label {
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 2px;
}

.venkero-app .venkero-metric-amount {
    font-size: 30px;
    font-weight: 480;
    letter-spacing: -0.035em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    margin: 0 0 4px;
}

.venkero-app .venkero-metric-note {
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-muted);
    margin: 0;
}

/* A card's own heading, with its actions on the right where the reference put them. */
.venkero-app .venkero-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
}

.venkero-app .venkero-card-head .venkero-card-title { margin: 0; }
.venkero-app .venkero-card-head .venkero-spacer    { flex: 1 1 auto; }
.venkero-app .venkero-card-head form                { display: inline-block; margin: 0; }

/* The period control: one row of controls, wrapping on a narrow screen. */
.venkero-app .venkero-toolbar form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.venkero-app .venkero-toolbar label { margin: 0; }

/* A table that lives inside a card reads flush with the card's own padding rather than double-padded. */
.venkero-app .venkero-table th:first-child,
.venkero-app .venkero-table td:first-child { padding-left: 0; }

.venkero-app .venkero-table th:last-child,
.venkero-app .venkero-table td:last-child { padding-right: 0; }

/* Moved out of the markup on 2026-09-21. The Money page still carried 60 `style="…"` attributes and they were
 * just four strings repeated. These declare EXACTLY what those inline styles declared, so nothing moves on
 * screen — only the decision, out of PHP and into the place a later screen can find it.
 * (`margin: 0` already existed as `.venkero-flush`, so it is reused rather than duplicated.) */
.venkero-app .venkero-as-inline   { display: inline; }
.venkero-app .venkero-button-row  { display: flex; gap: 6px; margin: 0; }
.venkero-app .venkero-tight-below { margin: 0 0 12px; }

/* ─────────────────────────────────────────────── the shell, 2026-09-21 (D125)
 * The old build was its own app: a dark shell, its own left navigation, a greeting and a tab bar. This rebuild
 * rendered inside wp-admin's own menu and grey background, which no amount of card-tuning could fix.
 *
 * The sidebar and the top bar are emitted as COMPLETE elements and placed by this grid, not by document order.
 * That is deliberate: the pages already carry their own nesting, and a shell that needed its own closing tags
 * would have to be threaded through every branch of every screen. Nothing inside a page moves.
 */
.venkero-app.venkero-shell {
    display: block;
    margin: 0 !important;
    /* Room for the sidebar. The sidebar itself is fixed, so the content simply starts to the right of it. This
     * replaced a CSS grid: a grid item spanning every row made the FIRST row as tall as the sidebar, which left
     * about 500px of empty space between the greeting and the first card. */
    padding: 0 28px 0 276px !important;
    max-width: none;
    background: var(--background);
}

.venkero-app.venkero-shell .venkero-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 248px;
    height: 100vh;
    overflow-y: auto;
    padding: 22px 16px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    /* A column, so the "WordPress admin" link sits at the foot of the sidebar instead of floating halfway
     * down it with a stretch of empty space beneath. */
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.venkero-app.venkero-shell .venkero-topbar {
    padding: 18px 0 4px;
    /* The design references have NO rule under the header: the accent belongs on the active nav item, the primary
     * button and the selected filter, and nowhere else. The thick lime rule this replaced came from the old build
     * and read as a stray line under the page text. */
    margin-bottom: 14px;
}

/* A page heading is a title and one line of context, as the references draw it — no rule above it. */
.venkero-app.venkero-shell .venkero-heading {
    border-top: none;
    padding-top: 0;
    margin-bottom: 20px;
}

.venkero-app.venkero-shell .venkero-heading h1 { margin: 2px 0 4px; }

/* Sidebar groups: the old build's WORKSPACE label, kept because a flat list of seven is harder to scan. */
.venkero-app.venkero-shell .venkero-nav-group {
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--navigation-muted, var(--text-muted));
    margin: 18px 0 4px;
    padding-left: 10px;
}

/* The mobile navigation: a checkbox and a label, so it needs no JavaScript. The label is the button. */
.venkero-app.venkero-shell .venkero-nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.venkero-app.venkero-shell .venkero-nav-button { display: none; }

.venkero-app.venkero-shell .venkero-brand {
    font-size: 17px;
    font-weight: 550;
    letter-spacing: -0.02em;
    margin: 0 0 18px;
    padding-left: 10px;
}

.venkero-app.venkero-shell .venkero-nav-list { display: block; }

.venkero-app.venkero-shell .venkero-nav-list a,
.venkero-app.venkero-shell .venkero-nav-exit {
    display: block;
    padding: 9px 10px;
    border-radius: var(--radius);
    color: var(--navigation-muted, var(--text-muted));
    font-size: 14px;
    text-decoration: none;
    /* The accent's fourth place: the inset bar on the ACTIVE item — alongside weight and colour, never alone. */
    border-left: 3px solid transparent;
}

.venkero-app.venkero-shell .venkero-nav-list a:hover { background: var(--navigation, var(--surface-soft)); color: var(--navigation-foreground, var(--foreground)); }

.venkero-app.venkero-shell .venkero-nav-list a.is-current {
    border-left-color: var(--accent);
    color: var(--foreground);
    font-weight: 550;
    background: var(--surface-soft);
}

.venkero-app.venkero-shell .venkero-nav-exit {
    margin-top: auto;
    border-top: 1px solid var(--border);
    border-radius: 0;
    padding-top: 14px;
    font-size: 13px;
}

.venkero-app.venkero-shell .venkero-greeting {
    /* Compact, per Peter: "keep the greeting compact and useful information near the top." */
    font-size: 20px;
    font-weight: 550;
    letter-spacing: -0.03em;
    margin: 0 0 2px;
}

.venkero-app.venkero-shell .venkero-topbar .venkero-subtitle { margin: 0; }

/* The accent's sixth place (amended into DESIGN-SYSTEM.md with the shell): a card's top EDGE. A line, never a
 * fill, and never a way of saying what state something is in. */
.venkero-app.venkero-shell .venkero-card {
    border-top: 3px solid var(--accent);
    /* A wide table scrolls inside its card instead of scrolling the whole page sideways. Measured at 390px:
     * the page was 490px wide before this. */
    overflow-x: auto;
}

/* wp-admin's furniture, hidden ON OUR PAGES ONLY — the body class is set from the page slug, so no other
 * plugin's screen and no other admin page is touched. */
body.venkero-shell-page #wpadminbar,
body.venkero-shell-page #adminmenumain,
body.venkero-shell-page #wpfooter,
body.venkero-shell-page #screen-meta,
body.venkero-shell-page .update-nag { display: none !important; }

body.venkero-shell-page #wpcontent { margin-left: 0 !important; padding-left: 0 !important; }
body.venkero-shell-page #wpbody-content { padding-bottom: 0 !important; }
body.venkero-shell-page .wrap.venkero-app { margin: 0 !important; }

/* On a phone the sidebar would take most of the screen, so it becomes a panel the Menu button opens. */

/* THE PHONE'S PRESENTATION LIVES AT THE END OF THIS SHEET. It is a sticky header and a dropdown panel there
   rather than a checkbox that pushed the whole sidebar into the page above the content; appending it keeps
   every desktop rule above untouched and makes the phone rules win on order. See "the phone" below. */


/* A light scrollbar down the side of a dark app is the small thing that breaks the illusion. */
body.venkero-shell-page { scrollbar-color: #4a5346 #171a16; }

body.venkero-shell-page ::-webkit-scrollbar { width: 12px; height: 12px; }
body.venkero-shell-page ::-webkit-scrollbar-track { background: #171a16; }
body.venkero-shell-page ::-webkit-scrollbar-thumb { background: #4a5346; border-radius: 999px; }
body.venkero-shell-page ::-webkit-scrollbar-thumb:hover { background: #59624f; }

/* Links inside the app, in the app's own colours. WordPress's admin blue (and the browser's default purple)
 * survive into a dark shell and read as somebody else's interface. The accent is NOT used for text — it is
 * reserved for the places DESIGN-SYSTEM.md lists — so a link is the foreground colour with a real underline,
 * which also means it is identifiable without relying on colour at all. */
.venkero-app a {
    color: var(--foreground);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

.venkero-app a:hover,
.venkero-app a:focus {
    text-decoration-thickness: 2px;
}

/* The shell's own navigation is not "links" in that sense: no underlines in a sidebar. */
.venkero-app.venkero-shell .venkero-nav a { text-decoration: none; }

/* ─────────────────────────────────────────────── the account button and notices, 2026-09-21
 * Peter, item 4 (a persistent avatar/name button) and item 10 (other plugins' maintenance notices should live in
 * WordPress admin, not across Venkero).
 */
.venkero-app.venkero-shell .venkero-topbar { position: relative; }

.venkero-app.venkero-shell .venkero-account {
    position: absolute;
    top: 14px;
    right: 0;
}

.venkero-app.venkero-shell .venkero-account > summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--target);
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    list-style: none;
}

.venkero-app.venkero-shell .venkero-account > summary::-webkit-details-marker { display: none; }
.venkero-app.venkero-shell .venkero-account[open] > summary { border-color: var(--foreground); }

.venkero-app.venkero-shell .venkero-avatar {
    border-radius: 999px;
    width: 28px;
    height: 28px;
}

.venkero-app.venkero-shell .venkero-account-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    min-width: 220px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .35);
}

.venkero-app.venkero-shell .venkero-account-menu a {
    display: block;
    padding: 9px 10px;
    border-radius: var(--radius);
    text-decoration: none;
}

.venkero-app.venkero-shell .venkero-account-menu a:hover { background: var(--surface-soft); }

.venkero-app.venkero-shell .venkero-staging {
    position: absolute;
    top: 18px;
    right: 0;
    margin: 0;
    padding: 4px 10px;
    border: 1px solid var(--accent);
    border-radius: 999px;
    color: var(--link, var(--accent));
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* The account button owns the top-right corner, so the marker sits beside the greeting instead. */
.venkero-app.venkero-shell .venkero-topbar:has(.venkero-account) .venkero-staging { right: 190px; }

/* Our notices, and only ours, inside the application. */
.venkero-app.venkero-shell .venkero-notice {
    margin: 0 0 18px;
    border-left-color: var(--accent);
    background: var(--surface);
    color: var(--foreground);
}

/* WordPress styles a notice's own paragraph and its dismiss glyph for its light admin, and those rules beat
 * inheritance — so on this surface the message and the close icon rendered near-black on near-black (measured at
 * 1.03:1). Both colours are stated here instead, on the application's own surface, and follow whichever mode the
 * shell is in. */
.venkero-app.venkero-shell .venkero-notice p,
.venkero-app.venkero-shell .venkero-notice a,
.venkero-app.venkero-shell .venkero-notice strong { color: var(--foreground); }

.venkero-app.venkero-shell .venkero-notice .notice-dismiss,
.venkero-app.venkero-shell .venkero-notice .notice-dismiss::before { color: var(--foreground); }

body.venkero-shell-page .wrap.venkero-app .notice:not(.venkero-notice),
body.venkero-shell-page .wrap.venkero-app .updated:not(.venkero-notice),
body.venkero-shell-page .wrap.venkero-app .error:not(.venkero-notice),
body.venkero-shell-page #screen-meta-links,
body.venkero-shell-page .update-nag { display: none !important; }

@media (max-width: 782px) {
    .venkero-app.venkero-shell .venkero-account { position: static; margin: 12px 0 0; }
    .venkero-app.venkero-shell .venkero-account-menu { left: 0; right: auto; }
    .venkero-app.venkero-shell .venkero-staging { position: static; display: inline-block; margin: 10px 0 0; }
    .venkero-app.venkero-shell .venkero-topbar:has(.venkero-account) .venkero-staging { right: auto; }
}

/* ─────────────────────────────────────────────── matching the design references, 2026-09-21
 *
 * Peter's concepts are the visual target (his instruction of 2026-09-21: "I would like venkero to look as closely
 * to those designs as possible"). They are DESIGN REFERENCES with sample content — no figure, client, date or
 * status from them is copied into data. What is taken from them is the appearance: a flat sidebar with line
 * icons, the workspace control under the wordmark, the profile at the foot of the sidebar, a bell in the header,
 * lime for active states and primary actions only, and white/grey for everything else.
 */

.venkero-app.venkero-shell .venkero-brand {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--foreground);
    margin: 0 0 16px;
    padding: 0 8px;
}

/* THE MARK IS THE LOGO, NOT THE WORD. The brand line now carries the approved light logo — Venkero Logo Secondary,
 * the same 400x133 asset the public site uses — instead of the word 'venkero'. Sized by height so it keeps its
 * proportions at any width, and the alt text carries the name for assistive technology.
 *
 * Sized to read: at 23px the wordmark was about 69px wide and the sidebar read as though the logo were an
 * afterthought beside the nav. 32px is about 96px wide — legible at a glance, still clearly a wordmark rather than a
 * banner, and it fits the sidebar's width with room to spare. Height drives the size and `width: auto` keeps the
 * 400:133 ratio, so the mark cannot stretch. The brand block's own spacing (margin 0 0 16px, padding 0 8px) and the
 * rest of the sidebar are untouched. */
.venkero-app.venkero-shell .venkero-brand-logo {
    display: block;
    height: 32px;
    width: auto;
    max-width: 100%;
}

/* The workspace control: initials, name, chevron — a details element, so it needs no JavaScript. */
.venkero-app.venkero-shell .venkero-workspace { position: relative; margin: 0 0 16px; }

.venkero-app.venkero-shell .venkero-workspace > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
    cursor: pointer;
    list-style: none;
}

.venkero-app.venkero-shell .venkero-workspace > summary::-webkit-details-marker { display: none; }
.venkero-app.venkero-shell .venkero-workspace[open] > summary { border-color: var(--foreground); }

.venkero-app.venkero-shell .venkero-initials {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: #3a4a2a;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
}

.venkero-app.venkero-shell .venkero-workspace-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}

.venkero-app.venkero-shell .venkero-workspace-list {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .45);
}

.venkero-app.venkero-shell .venkero-workspace-list a {
    display: block;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: 14px;
}

.venkero-app.venkero-shell .venkero-workspace-list a:hover { background: var(--surface-soft); }
.venkero-app.venkero-shell .venkero-workspace-list a.is-current { color: var(--accent); }

/* Nav items: line icon + label, 42px tall, lime when active with a bar at the edge. */
.venkero-app.venkero-shell .venkero-nav-list a,
.venkero-app.venkero-shell .venkero-nav-exit {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 42px;
    padding: 8px 10px;
    margin-bottom: 2px;
    border-left: 3px solid transparent;
    border-radius: var(--radius);
    font-size: 14.5px;
    color: var(--navigation-muted, var(--text-muted));
}

.venkero-app.venkero-shell .venkero-nav-list a .dashicons,
.venkero-app.venkero-shell .venkero-nav-exit .dashicons {
    font-size: 19px;
    width: 19px;
    height: 19px;
    color: inherit;
}

.venkero-app.venkero-shell .venkero-nav-list a.is-current {
    color: var(--link, var(--accent));
    background: rgba(198, 247, 74, .07);
    border-left-color: var(--accent);
    font-weight: 600;
}

.venkero-app.venkero-shell .venkero-nav-list a:hover { background: var(--navigation, var(--surface-soft)); color: var(--navigation-foreground, var(--foreground)); }
.venkero-app.venkero-shell .venkero-nav-list a.is-current:hover { color: var(--accent); }

/* The profile sits at the foot of the sidebar, as the references show it. */
.venkero-app.venkero-shell .venkero-account {
    position: relative;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.venkero-app.venkero-shell .venkero-account > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 6px 8px;
    border-radius: var(--radius);
    cursor: pointer;
    list-style: none;
}

.venkero-app.venkero-shell .venkero-account > summary::-webkit-details-marker { display: none; }
.venkero-app.venkero-shell .venkero-account > summary:hover { background: var(--surface-soft); }
.venkero-app.venkero-shell .venkero-avatar { border-radius: 999px; width: 28px; height: 28px; }
.venkero-app.venkero-shell .venkero-account > summary span { flex: 1 1 auto; font-size: 14px; }

.venkero-app.venkero-shell .venkero-account-menu {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    bottom: calc(100% + 6px);
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .45);
}

.venkero-app.venkero-shell .venkero-account-menu a {
    display: block;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: 14px;
}

.venkero-app.venkero-shell .venkero-account-menu a:hover { background: var(--surface-soft); }

/* The bell: a real control, a real unread dot, and what is actually waiting inside it. */
.venkero-app.venkero-shell .venkero-bell { position: absolute; top: 18px; right: 0; }

.venkero-app.venkero-shell .venkero-bell > summary {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--target);
    height: var(--target);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    list-style: none;
}

.venkero-app.venkero-shell .venkero-bell > summary::-webkit-details-marker { display: none; }

/* The bell measured 82x46 — a large empty box for a 20px glyph. It is a 40px control now, matching the brief's "small
 * and balanced", with the glyph centred inside it. */
body.venkero-arranged-page .venkero-app.venkero-shell:not(.venkero-embed) .venkero-bell > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
}
.venkero-app.venkero-shell .venkero-bell > summary:hover { border-color: var(--foreground); }
.venkero-app.venkero-shell .venkero-bell .dashicons { font-size: 20px; width: 20px; height: 20px; }

.venkero-app.venkero-shell .venkero-bell-dot {
    position: absolute;
    top: 9px;
    right: 10px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--accent);
}

.venkero-app.venkero-shell .venkero-bell-list {
    position: absolute;
    z-index: 30;
    right: 0;
    top: calc(100% + 6px);
    width: 320px;
    max-width: 78vw;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .45);
    text-align: left;
}

.venkero-app.venkero-shell .venkero-bell-list h3 { margin: 0 0 8px; font-size: 14px; }
.venkero-app.venkero-shell .venkero-bell-list ul { margin: 0; }
.venkero-app.venkero-shell .venkero-bell-list li { margin: 0 0 8px; font-size: 13.5px; line-height: 1.45; }

/* Page headers, at the reference's proportions. */
.venkero-app.venkero-shell .venkero-heading h1 { font-size: 32px; line-height: 1.15; font-weight: 700; }
.venkero-app.venkero-shell .venkero-subtitle { font-size: 15px; color: var(--text-muted); }
.venkero-app.venkero-shell .venkero-eyebrow { color: var(--text-muted); }

/* Buttons: lime fill, near-black text for the primary action; outlined for the rest. */
.venkero-app.venkero-shell .button-primary,
.venkero-app.venkero-shell a.venkero-button.is-current {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--on-accent) !important;
    font-weight: 600;
}

.venkero-app.venkero-shell .button-primary:hover { filter: brightness(1.06); }

.venkero-app.venkero-shell .button,
.venkero-app.venkero-shell a.venkero-button {
    display: inline-flex;
    align-items: center;
    min-height: var(--target);
    padding: 0 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--foreground);
    text-decoration: none;
    font-size: 14px;
}

.venkero-app.venkero-shell .button:hover { border-color: var(--foreground); }

/* An active tab: lime text on a lime edge — the same treatment the sidebar's active item gets. */
.venkero-app.venkero-shell a.venkero-button.is-current {
    border-color: var(--accent) !important;
    background: transparent !important;
    color: var(--accent) !important;
}

/* Tables: taller rows, hairline dividers, small grey labels. */
.venkero-app.venkero-shell .venkero-table th {
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
}

.venkero-app.venkero-shell .venkero-table td { padding-top: 18px; padding-bottom: 18px; }
.venkero-app.venkero-shell .venkero-table tbody tr { border-bottom: 1px solid var(--border); }
.venkero-app.venkero-shell .venkero-table tbody tr:last-child { border-bottom: none; }

/* Cards: the reference's flat panel. */
.venkero-app.venkero-shell .venkero-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--card-padding);
}

.venkero-app.venkero-shell .venkero-card-title { font-size: 17px; font-weight: 650; }

@media (max-width: 782px) {
    .venkero-app.venkero-shell .venkero-heading h1 { font-size: 26px; }
    .venkero-app.venkero-shell .venkero-bell { position: static; margin: 10px 0 0; }
    .venkero-app.venkero-shell .venkero-bell-list { left: 0; right: auto; }
}

/* The toolbar: search inline with its button and the filters beside it, as one row (the first version stacked the
 * input above the button, which wasted the row and read as unfinished). */
.venkero-app.venkero-shell .venkero-search {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 18px;
}

.venkero-app.venkero-shell .venkero-search .venkero-field { margin: 0; }
.venkero-app.venkero-shell .venkero-search input[type="search"],
.venkero-app.venkero-shell .venkero-search input[type="text"] { min-width: 260px; }

/* One page keeps ONE primary action, and it sits on the right of the header row. */
.venkero-app.venkero-shell .venkero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

/* A quiet status badge, instead of a bare word in a table cell. */
.venkero-app.venkero-shell .venkero-badge {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12.5px;
    color: var(--text-muted);
}

/* Rows respond to the pointer. */
.venkero-app.venkero-shell .venkero-table tbody tr:hover { background: var(--surface-soft); }
.venkero-app.venkero-shell .venkero-table td { padding-top: 16px; padding-bottom: 16px; }

/* A creation form opens when it is asked for, and stays closed otherwise (item 9). */
.venkero-app.venkero-shell details.venkero-card > summary {
    cursor: pointer;
    font-size: 17px;
    font-weight: 650;
    list-style: none;
}

.venkero-app.venkero-shell details.venkero-card > summary::-webkit-details-marker { display: none; }
.venkero-app.venkero-shell details.venkero-card[open] > summary { margin-bottom: 16px; }

/* The tab strip: grey labels, and the active one lime with a lime underline (the reference's treatment, which
 * is deliberately unlike the sidebar's filled active state — tabs are not navigation). */
.venkero-app.venkero-shell .venkero-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin: 0 0 22px;
    border-bottom: 1px solid var(--border);
}

.venkero-app.venkero-shell .venkero-tabs a {
    padding: 0 0 12px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 14.5px;
}

.venkero-app.venkero-shell .venkero-tabs a:hover { color: var(--foreground); }

.venkero-app.venkero-shell .venkero-tabs a.is-current {
    color: var(--link, var(--accent));
    border-bottom-color: var(--accent);
    font-weight: 600;
}

/* Status badges: a dot and a word on a tinted background. These four colours are the reference's own and are
 * NOT the accent — status never borrows the accent, which only ever means "active" or "primary". */
.venkero-app.venkero-shell .venkero-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 11px 3px 9px;
    border-radius: 999px;
    font-size: 12.5px;
    white-space: nowrap;
}

.venkero-app.venkero-shell .venkero-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: currentColor;
}

.venkero-app.venkero-shell .venkero-status-paid { color: #7ee08a; background: rgba(126, 224, 138, .13); }
.venkero-app.venkero-shell .venkero-status-sent { color: #7cb6ff; background: rgba(124, 182, 255, .13); }
.venkero-app.venkero-shell .venkero-status-overdue { color: #ff8b7d; background: rgba(255, 139, 125, .13); }
.venkero-app.venkero-shell .venkero-status-draft { color: var(--text-muted); background: rgba(255, 255, 255, .07); }

/* Links as cards, and a list with a detail panel beside it — both straight from the design references. */
.venkero-app.venkero-shell .venkero-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--card-gap);
    margin-bottom: var(--card-gap);
}

.venkero-app.venkero-shell .venkero-link-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.venkero-app.venkero-shell .venkero-link-name { margin: 0; font-size: 16px; font-weight: 650; }
.venkero-app.venkero-shell .venkero-link-url { margin: 0; color: var(--text-muted); font-size: 13.5px; }
.venkero-app.venkero-shell .venkero-link-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.venkero-app.venkero-shell .venkero-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--card-gap);
    align-items: start;
}

.venkero-app.venkero-shell .venkero-split-aside .venkero-card { position: sticky; top: 18px; }

@media (max-width: 1100px) {
    .venkero-app.venkero-shell .venkero-split { grid-template-columns: minmax(0, 1fr); }
    .venkero-app.venkero-shell .venkero-split-aside .venkero-card { position: static; }
}

/* The mobile bottom bar (the mobile reference's own navigation). Hidden on desktop, where the sidebar is. */
.venkero-app.venkero-shell .venkero-bottom-nav { display: none; }

@media (max-width: 782px) {
    .venkero-app.venkero-shell { padding-bottom: 78px !important; }

    .venkero-app.venkero-shell .venkero-bottom-nav {
        display: flex;
        position: fixed;
        z-index: 40;
        left: 0;
        right: 0;
        bottom: 0;
        justify-content: space-around;
        padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--border);
        background: var(--surface);
    }

    .venkero-app.venkero-shell .venkero-bottom-nav a,
    .venkero-app.venkero-shell .venkero-bottom-nav .venkero-bottom-action {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        min-width: 64px;
        padding: 4px 2px;
        text-decoration: none;
        color: var(--text-muted);
        font-size: 11px;
    }

    .venkero-app.venkero-shell .venkero-bottom-nav .dashicons { font-size: 20px; width: 20px; height: 20px; }
}

/* The calendar: a month grid, chips, and the feed panel. */
.venkero-app.venkero-shell .venkero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }

.venkero-app.venkero-shell .venkero-chip {
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13px;
}

.venkero-app.venkero-shell .venkero-chip.is-current { color: var(--accent); border-color: var(--accent); }
.venkero-app.venkero-shell .venkero-calendar-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.venkero-app.venkero-shell .venkero-calendar-head h2 { margin: 0; }

.venkero-app.venkero-shell .venkero-grid-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.venkero-app.venkero-shell .venkero-grid-table th {
    padding: 6px 8px;
    text-align: left;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    border-bottom: 1px solid var(--border);
}

.venkero-app.venkero-shell .venkero-grid-table td.venkero-day {
    height: 104px;
    padding: 8px;
    vertical-align: top;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
}

.venkero-app.venkero-shell .venkero-grid-table td.venkero-day:last-child { border-right: none; }
.venkero-app.venkero-shell td.venkero-day.is-blank { background: rgba(255, 255, 255, .015); }
.venkero-app.venkero-shell .venkero-day-number { display: block; margin-bottom: 6px; color: var(--text-muted); font-size: 12.5px; }
.venkero-app.venkero-shell td.venkero-day.is-today .venkero-day-number { color: var(--accent); font-weight: 650; }

.venkero-app.venkero-shell .venkero-day .venkero-chip {
    display: block;
    margin-bottom: 4px;
    padding: 2px 7px;
    font-size: 11.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.venkero-app.venkero-shell .venkero-feed { position: relative; }
.venkero-app.venkero-shell .venkero-feed > summary { display: inline-block; list-style: none; cursor: pointer; }
.venkero-app.venkero-shell .venkero-feed > summary::-webkit-details-marker { display: none; }

.venkero-app.venkero-shell .venkero-feed-panel {
    margin-top: 10px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    max-width: 620px;
}

.venkero-app.venkero-shell .venkero-feed-url { display: block; padding: 8px 10px; background: var(--background); border-radius: var(--radius); word-break: break-all; font-size: 12.5px; }
.venkero-app.venkero-shell .venkero-when { white-space: nowrap; color: var(--text-muted); }

@media (max-width: 782px) {
    .venkero-app.venkero-shell .venkero-grid-table td.venkero-day { height: 76px; padding: 5px; }
    .venkero-app.venkero-shell .venkero-day .venkero-chip { padding: 1px 4px; font-size: 10px; }
}

/* The toolbar row: the count and the search together, so the search stops competing with the card grid. */
.venkero-app.venkero-shell .venkero-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    margin-bottom: 18px;
}

.venkero-app.venkero-shell .venkero-toolbar-row .venkero-search { margin-bottom: 0; }
.venkero-app.venkero-shell .venkero-toolbar-row > p { margin: 0 0 10px; }

/* A form panel fits its content: a full-width panel holding two short fields was more empty space than form. */
.venkero-app.venkero-shell .venkero-narrow { max-width: 560px; }

/* Destructive, and visibly so. */
.venkero-app.venkero-shell .button.venkero-danger { color: #ff9a8f; border-color: rgba(255, 139, 125, .45); }
.venkero-app.venkero-shell .button.venkero-danger:hover { color: #ffb3aa; border-color: #ff8b7d; background: rgba(255, 139, 125, .1); }

/* The strip of light below the app. The shell is dark, but the PAGE behind it is WordPress's own light
 * background, and where the shell is shorter than the viewport that background shows as a bar across the bottom.
 * Painting the page itself is the fix; the stripped admin footer accounts for the rest of the gap. */
html body.venkero-shell-page { background: #161915; }
body.venkero-shell-page #wpcontent,
body.venkero-shell-page #wpbody,
body.venkero-shell-page #wpbody-content { background: transparent; }
body.venkero-shell-page #wpfooter { display: none; }
body.venkero-shell-page .venkero-app.venkero-shell { min-height: 100vh; }

/* The Pipeline / List switch. */
.venkero-app.venkero-shell .venkero-switch { display: flex; gap: 8px; margin: 0 0 16px; }

/* A link's category, on the card. */
.venkero-app.venkero-shell .venkero-link-category {
    margin: 2px 0 0;
    color: var(--text-muted);
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* The colour swatch on the branding preview: the chosen accent, shown as a colour. */
.venkero-app.venkero-shell .venkero-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1px solid var(--border);
    vertical-align: -2px;
}

/* A figure compared with the period before it. Quiet by design: a footnote to the number, not the number. */
.venkero-app.venkero-shell .venkero-delta {
    margin: 2px 0 0;
    font-size: 12.5px;
}

.venkero-app.venkero-shell .venkero-delta.is-good { color: var(--status-good, #6ac08a); }
.venkero-app.venkero-shell .venkero-delta.is-bad { color: var(--status-bad, #e0796a); }
.venkero-app.venkero-shell .venkero-delta.is-plain { color: var(--text-muted); }

/* ── The Overview dashboard ────────────────────────────────────────────────────────────────────────────────
   The reference lays this page out as a main column beside a narrow right rail: two alert cards across the
   top, then tasks beside the financial summary, then one full-width block below, with the quiet always-there
   things in the rail. This is that arrangement, in CSS only — the shell carries no layout JavaScript. */

.venkero-app.venkero-shell .venkero-overview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 296px;
    gap: 18px;
    align-items: start;
}

.venkero-app.venkero-shell .venkero-overview-main {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.venkero-app.venkero-shell .venkero-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
}

.venkero-app.venkero-shell .venkero-split {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 18px;
}

.venkero-app.venkero-shell .venkero-overview-rail {
    display: grid;
    gap: 18px;
    align-content: start;
}

/* the two alert cards */
.venkero-app.venkero-shell .venkero-alert-label {
    margin: 0 0 6px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.venkero-app.venkero-shell .venkero-alert-headline {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
}

/* rows, shared by every panel on the page */
.venkero-app.venkero-shell .venkero-rows { list-style: none; margin: 0; padding: 0; }

.venkero-app.venkero-shell .venkero-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid #2b3128;
}

.venkero-app.venkero-shell .venkero-row:first-child { border-top: 0; }
.venkero-app.venkero-shell .venkero-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.venkero-app.venkero-shell .venkero-row-sub { font-size: 12.5px; color: var(--text-muted); }
.venkero-app.venkero-shell .venkero-row-when { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.venkero-app.venkero-shell .venkero-row-when.is-late { color: var(--status-bad, #e0796a); }
.venkero-app.venkero-shell .venkero-row.is-new .venkero-row-main { color: #fff; }
.venkero-app.venkero-shell .venkero-card-link { font-size: 12.5px; color: var(--accent); text-decoration: none; }

/* the month-by-month bars */
/* ── A BAR AND ITS MONTH SHARE ONE HORIZONTAL SLOT ─────────────────────────────────────────────────────────────
 * The bars and the labels are two separate rows, and they were distributing their children differently: the bars
 * were a flex row starting at the left (six 10px bars with 8px gaps occupy about 100px), while the labels were
 * `justify-content: space-between` across the card's full width. So the bar for a month and the label naming it sat
 * at different x positions — the current month's accent bar landed over the *label* for the second month in the
 * window (September's bar above "May"). Both rows now use the same column geometry — equal columns, the same gap,
 * the same box — so the bar for a month is centred over its own label, and a month with no income keeps its slot
 * and its label like every other month. Verified against the recorded monthly totals, not by eye. */
.venkero-app.venkero-shell .venkero-chart {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-rows: 100%;
    align-items: flex-end;
    gap: 8px;
    height: 96px;
    margin-top: 14px;
    border-bottom: 1px dashed #2b3128;
}

.venkero-app.venkero-shell .venkero-chart-bar { background: #3a4433; border-radius: 4px 4px 0 0; }
.venkero-app.venkero-shell .venkero-chart-bar.is-current { background: var(--accent); }

/* The labels take the identical geometry: one equal column per month, the same 8px gap, each label centred in its
 * slot. No `space-between` — that is what let the two rows drift apart. */
.venkero-app.venkero-shell .venkero-chart-axis {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 8px;
    margin: 6px 0 14px;
    font-size: 12px;
}

/* quick actions */
.venkero-app.venkero-shell .venkero-actions-list { list-style: none; margin: 0; padding: 0; }

.venkero-app.venkero-shell .venkero-actions-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    color: inherit;
    text-decoration: none;
    border-top: 1px solid #2b3128;
}

.venkero-app.venkero-shell .venkero-actions-list li:first-child a { border-top: 0; }
.venkero-app.venkero-shell .venkero-actions-list a .dashicons:last-child { margin-left: auto; opacity: 0.45; }

/* narrow: the rail drops below and the pairs stack, rather than squeezing */
@media (max-width: 1180px) {
    .venkero-app.venkero-shell .venkero-overview { grid-template-columns: minmax(0, 1fr); }
    .venkero-app.venkero-shell .venkero-pair,
    .venkero-app.venkero-shell .venkero-split { grid-template-columns: minmax(0, 1fr); }
}

/* THE FINANCIAL CARD IS NOT IN THE RAIL. It sits beside Upcoming tasks in the split row above, at about 43% of the
   main column — wide enough for the reference's two-by-two figure block. The rule that stood here stacked the four
   figures in a SINGLE column, and it was right when it was written: the card did live in the 296px rail. Once the
   approved arrangement moved it into the split row the rule stayed, and it is what made that card the tallest thing
   on the page — the split row took its height from the financial card, which is what left dead space under Upcoming
   tasks and pushed everything below it down. The arranged design's own figure block is two across. */
.venkero-app.venkero-shell .venkero-overview .venkero-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 14px;
    margin-bottom: 6px;
}

/* THE FIGURES STACK ON A PHONE, AS EVERY OTHER FIGURE BLOCK IN THE APP DOES. The rule above carries no media guard,
 * so on its own it outranks the app-wide single column at 600px — four figures would have been squeezed into two
 * columns inside a phone-width card. (At 900px it matches the app-wide two-across, so nothing changed there.)
 *
 * THREE ACROSS IS NOT THE OVERVIEW. That scale belongs to the app-wide `.venkero-metrics` default, which serves the
 * six-figure block rendered elsewhere (three wide, two at 900px, one at 600px). The Overview's four figures are TWO
 * across at every width down to 601px — the approved layout has Tasks beside Financial summary — and ONE across from
 * 600px down, once the cards stack. The Overview is never three across. From the cascade: the two-across rule
 * outranks the app-wide three-across at 1400 / 1000 / 700px, and this guard wins at 480px. */
@media (max-width: 600px) {
    .venkero-app.venkero-shell .venkero-overview .venkero-metrics {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* AND THE CARD'S OWN HEIGHT IS THE ARRANGED ONE. Every number below is already the arranged Overview's number — no
   new ones: the arranged financial card is meant to land in the 300-330px band, its chart is 56px inside the card,
   and its figures size themselves from the space they have rather than from the whole page. */
.venkero-app.venkero-shell .venkero-overview .venkero-metric {
    padding: 2px 0 4px;
}

.venkero-app.venkero-shell .venkero-overview .venkero-metric-amount {
    font-size: 26px;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0;
}

.venkero-app.venkero-shell .venkero-overview .venkero-metric-label {
    margin: 0 0 2px;
    line-height: 1.1;
}

.venkero-app.venkero-shell .venkero-overview .venkero-delta {
    font-size: 12px;
    line-height: 1.15;
    margin: 0;
}

.venkero-app.venkero-shell .venkero-overview .venkero-chart {
    height: 56px;
    margin-top: 10px;
    padding: 0 2px;
}

.venkero-app.venkero-shell .venkero-overview .venkero-chart-bar {
    width: 10px;
    max-width: 100%;
    justify-self: center;
    border-radius: 2px 2px 0 0;
}

/* The card's labels take the same slot geometry as the card's bars — only the type size changes here. The `gap` and
 * the horizontal padding that used to sit on this rule were what let the two rows drift apart, so both are gone. */
.venkero-app.venkero-shell .venkero-overview .venkero-chart-axis {
    font-size: 10.5px;
}

/* A month that earned nothing keeps its slot, its own label and a faint mark on the baseline in the app as well as in
 * the arranged page — the intent the embed-scoped rule already carried. */
.venkero-app.venkero-shell .venkero-chart-bar.is-empty { background: var(--border); min-height: 3px; }

.venkero-app.venkero-shell .venkero-overview .venkero-card-foot { margin: 6px 0 0; }

.venkero-app.venkero-shell .venkero-actions.is-overview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
}

/* The two alert cards sit on a level line with the rail's first card, as the reference has them. */
.venkero-app.venkero-shell .venkero-pair .venkero-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.venkero-app.venkero-shell .venkero-pair .venkero-card > p:last-child {
    margin-top: auto;
}

/* ────────────────────────────────────────────────────────────────────────── components, arranged by anyone
   The component library (Venkero_Embed) prints the same cards the shell prints. Carrying the shell's class gives a
   component the design tokens wherever it is arranged; these rules stop the shell's own page furniture from coming
   along for the ride, and give a bare front-end context the button basics that WP-Admin would otherwise supply. */
.venkero-app.venkero-shell.venkero-embed {
    /* THE SHELL'S PAGE LAYOUT MUST NOT REACH INSIDE A WIDGET. The wrapper above carries the shell classes so a
     * component inherits the design tokens — but it was also inheriting the shell's page-level rules: 276px of left
     * padding reserved for the sidebar, 28px on the right, and a 100vh minimum height. Measured symptom: every
     * Elementor card was narrow, oddly wrapped, and sitting in a screenful of empty space. Tokens yes, page layout no. */
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    display: block;

    /* AND IT MUST NOT PAINT THE PAGE BACKGROUND. The shell paints `var(--background)`, which is #161915 in the dark
     * token set and #f7f8f6 in the light one. Leaving that in place put a pale 1108x42px band across the page under
     * the greeting — the "stark white strip" in Peter's screenshot — because the greeting is the one widget with no
     * card filling the wrapper. Measured pixel colour of that band: rgb(247, 248, 246), which is #f7f8f6 exactly.
     *
     * These four declarations were orphaned outside this rule by an earlier edit of mine: a stray closing brace left
     * them invalid, the browser discarded them, and the background came back. Hence the explicit repair. */
    background: transparent !important;
}

body.venkero-shell-page .venkero-app.venkero-shell.venkero-embed { min-height: 0 !important; }

.venkero-app.venkero-shell.venkero-embed .button {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: transparent;
    color: inherit;
    text-decoration: none;
    font-size: 13px;
    line-height: 1.2;
    cursor: pointer;
}

.venkero-app.venkero-shell.venkero-embed .button-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: rgb(13, 16, 11);
    font-weight: 600;
}

/* THE CLOSED STATE. The bell is a <details>, and a browser hides a closed details' content on its own — unless one of
   our own rules sets `display` on that content, which ours did. So the panel rendered while the bell was shut: a
   346x351px popover floating over the header on every page in the application.

   No assertion caught this, and none could have: the markup was right, the content was right, every check passed. It
   took looking at the rendered interface. `:not([open])` restores the state the browser would have applied. */
.venkero-app.venkero-shell .venkero-bell:not([open]) .venkero-bell-list {
    display: none;
}

/* AN ARRANGED CARD IS NOT THE SAME AS THE APPLICATION'S CARD, and two things follow from that.
 *
 * The reference's financial card sets its figures two-up beside a chart. Stacked one per row, four figures made the
 * card 495px tall in a 374px column — twice the height of its neighbours, so the row ended ragged and the space under
 * the shorter card read as a gap. Two columns fixes the proportion.
 *
 * SCOPED TO `.venkero-embed` ON PURPOSE: this rule applies to cards arranged on a page, and leaves the application's
 * own Overview — which Peter asked to keep exactly as it is — on the layout it already has.
 */
.venkero-app.venkero-shell.venkero-embed .venkero-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
}

.venkero-app.venkero-shell.venkero-embed .venkero-card {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    /* 22px of padding and an 11px radius: inside Peter's 20-24px and 10-12px ranges for the arranged cards. */
    padding: 22px;
    border-radius: 11px;
}

/* The chart and the last list sit at the foot of their card, so cards in a row line up instead of trailing off. */
/* The chart sat at the foot of the card via `margin-top: auto`, which opened a gap above it. It follows the figures
 * now and the card ends where the chart ends. */
.venkero-app.venkero-shell.venkero-embed .venkero-chart { margin-top: 10px; }

/* CARDS IN A ROW SHOULD FINISH TOGETHER, the way the reference's do. Measured: the financial card stood 409px beside a
 * 278px neighbour, so a 131px hole opened under the shorter one — which is what "excessive empty space" looks like in
 * practice. Elementor stretches its columns, but the chain from the column down to the card has to be stretched as
 * well, or the card keeps its natural height and the gap stays.
 *
 * `:has()` is what makes this safe: these rules only reach a column, section or widget container that actually holds a
 * Venkero card, so nothing else on the page is affected. */
/* THE STRETCH CHAIN IS GONE. It made every card in a row the height of the tallest, on the theory that cards should
 * finish together. Peter's brief asks for the opposite — "avoid a single grid arrangement that stretches unrelated
 * cards to the height of the tallest column" — because the stretch is what left blank space at the foot of the shorter
 * card. Each arranged card now fits its own contents. */
.venkero-app.venkero-shell.venkero-embed { height: auto; }

/* The financial card is the tallest of the six because it carries four figures and a six-month chart — one more figure
 * than the reference's card, and the extra one is an honest one. So it is tightened rather than trimmed: the figures
 * come closer together and the chart gives back some height. Still scoped to arranged cards, never the application. */
.venkero-app.venkero-shell.venkero-embed .venkero-metric { margin-bottom: 0; }
.venkero-app.venkero-shell.venkero-embed .venkero-metrics { margin-bottom: 8px; }
.venkero-app.venkero-shell.venkero-embed .venkero-chart { height: 64px; }

/* THE ICON AND THE PERSON, the two details the reference's cards carry that ours did not.
 *
 * Deliberately on the component classes rather than scoped to `.venkero-embed`: a card only renders an icon or an
 * avatar when its caller asks for one, so the application's own Overview — which asks for neither — is unchanged by
 * these rules. The styling exists for the arranged cards without restyling a screen that did not change. */
.venkero-app.venkero-shell .venkero-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-bottom: 10px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--link, var(--accent));
    font-size: 18px;
    line-height: 1;
}

.venkero-app.venkero-shell .venkero-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    margin-right: 9px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    color: var(--link, var(--accent));
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .02em;
}

.venkero-app.venkero-shell .venkero-row-who { font-weight: 600; }

/* A row carrying an avatar or a name needs its two lines to sit beside the circle rather than under it. */
.venkero-app.venkero-shell .venkero-row-main { display: flex; align-items: center; min-width: 0; }

/* THE WIDE CARD'S ROWS RUN IN COLUMNS. "Shared project revisions" spans two columns, and a filename alone in the left
 * third of an 850px card left the rest of every row empty — the single most unfinished-looking thing on the page. The
 * rows now carry the file, then what it belongs to and its status, with the date at the end: the columnar shape the
 * reference uses. Scoped to the wide card, so the narrow cards keep their tighter single-column rows. */
.venkero-app.venkero-shell.venkero-embed .venkero-card-wide .venkero-row-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 18px;
    align-items: baseline;
    /* `flex: 1` is what makes the columns span the card. Without it the block was shrink-to-fit — measured 299px of an
     * 813px row — so the columns existed but the dead space they were meant to fill was still there. */
    flex: 1 1 auto;
}

/* A long event sentence wrapped as "Brand / assets" across two lines and made the rows uneven. One line, ellipsised,
 * with the whole sentence in the title attribute so nothing is hidden from anyone who wants it. */
.venkero-app.venkero-shell.venkero-embed .venkero-row-sub {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The chart gets a baseline so the bars sit on something, and its labels spread under the bars they belong to. */
.venkero-app.venkero-shell.venkero-embed .venkero-chart {
    border-bottom: 1px solid var(--border);
    padding-bottom: 6px;
}

/* The axis keeps the shared slot geometry here too. This rule used to force `display: flex; justify-content:
 * space-between` on this route only, which is the behaviour that put a bar over another month's label; the base
 * rule's equal columns and matching gap now apply, so a bar and its label share one slot on every route. */

/* A month with no income: a faint slot on the baseline rather than an invisible sliver, so five quiet months read as
 * five quiet months instead of as a chart that failed to draw. */
.venkero-app.venkero-shell.venkero-embed .venkero-chart-bar.is-empty { background: var(--border); min-height: 3px; }

.venkero-app.venkero-shell.venkero-embed .venkero-chart-note { margin: 6px 0 0; font-size: 12px; }

/* ──────────────────────────────────────────────────────────────────────────────────────────────────────────────
   THE ARRANGED PAGE'S SIDEBAR, to the reference's proportions.

   The reference does not draw the navigation flush into the corner: it is a floating panel, inset about 16px, with
   rounded corners and a hairline edge, 268px wide, and the content begins around x=310.

   WHY THIS IS SCOPED TO `body.venkero-arranged-page` AND NOWHERE ELSE. The sidebar is the shared shell's, so widening
   it changes every screen in the application — including the WP-Admin Overview that Peter asked to leave exactly as it
   is. Scoping gives the arranged page the reference's proportions without moving anything he did not ask to move. To
   adopt it everywhere, change the selector; nothing else needs touching.

   Guarded above the drawer breakpoint so the small-screen behaviour is untouched.
   ────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
@media (min-width: 901px) {
    /* `:not(.venkero-embed)` IS LOAD-BEARING. A component's wrapper carries the shell's classes so it inherits the
     * design tokens, and this selector — one element plus three classes — outranks the wrapper's own `padding: 0`
     * reset, which is only three classes. Without the exclusion every widget inherited the shell's sidebar padding:
     * measured, a card came out 66px wide inside its 406px column (406 - 312 - 28 = 66), so the whole grid collapsed
     * into narrow columns. The tokens are wanted on a component; the page layout is not. */
    body.venkero-arranged-page .venkero-app.venkero-shell:not(.venkero-embed) {
        /* 16px of page margin + a 268px panel + 28px before the content, and 24px of padding on the right, both as the
         * brief specifies. */
        padding: 0 24px 0 312px !important;
    }

    body.venkero-arranged-page .venkero-app.venkero-shell .venkero-nav {
        top: 16px;
        left: 16px;
        bottom: 16px;
        width: 268px;
        height: auto;
        border: 1px solid var(--border);
        border-right: 1px solid var(--border);
        border-radius: 14px;
    }
}

/* ──────────────────────────────────────────────────────────────────────────────────────────────────────────────
   THE VISUAL PASS: the row shapes the reference uses, on the arranged cards only.
   ────────────────────────────────────────────────────────────────────────────────────────────────────────────── */

/* A row that carries several fields across the full width of a wide card: mark, text, badge, time, action.
 * `flex: 1` on the text block is what makes the fields span the card instead of huddling on the left. */
.venkero-app.venkero-shell.venkero-embed .venkero-row-fields {
    display: flex;
    align-items: center;
    gap: 14px;
}

.venkero-app.venkero-shell.venkero-embed .venkero-row-fields .venkero-row-body {
    flex: 1 1 auto;
    min-width: 0;
}

/* The project's initials stand where a thumbnail would, so every row aligns whether or not an image exists. */
.venkero-app.venkero-shell.venkero-embed .venkero-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--link, var(--accent));
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
}

.venkero-app.venkero-shell.venkero-embed .venkero-badge {
    flex: 0 0 auto;
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 11.5px;
    white-space: nowrap;
}

.venkero-app.venkero-shell.venkero-embed .venkero-row-action {
    flex: 0 0 auto;
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--foreground);
    font-size: 12.5px;
    text-decoration: none;
    white-space: nowrap;
}

.venkero-app.venkero-shell.venkero-embed .venkero-row-action:hover { border-color: var(--accent); color: var(--accent); }

/* The person's name and what they did sit on two lines, both starting beside the mark rather than under it. */
.venkero-app.venkero-shell.venkero-embed .venkero-row-body { min-width: 0; text-align: left; }
.venkero-app.venkero-shell.venkero-embed .venkero-row-who { margin: 0; font-size: 13.5px; font-weight: 600; }
.venkero-app.venkero-shell.venkero-embed .venkero-row-what { margin: 1px 0 0; font-size: 12.5px; color: var(--text-muted); }
.venkero-app.venkero-shell.venkero-embed .venkero-avatar.is-neutral { font-size: 14px; }

/* The attention card: a small uppercase label, then the circular icon BESIDE the message, then the action. */
.venkero-app.venkero-shell.venkero-embed .venkero-alert-body { display: flex; align-items: center; gap: 14px; }

.venkero-app.venkero-shell.venkero-embed .venkero-alert-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--link, var(--accent));
    font-size: 22px;
    line-height: 1;
}

.venkero-app.venkero-shell.venkero-embed .venkero-alert-message { min-width: 0; }
.venkero-app.venkero-shell.venkero-embed .venkero-alert-line { margin: 2px 0 0; font-size: 13px; color: var(--text-muted); }
.venkero-app.venkero-shell.venkero-embed .venkero-alert-action { margin: 16px 0 0; }

/* Quick actions: each action its own outlined row with even gaps, rather than a divider-only list. */
.venkero-app.venkero-shell.venkero-embed .venkero-actions-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }

.venkero-app.venkero-shell.venkero-embed .venkero-actions-list a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--foreground);
    font-size: 13.5px;
    text-decoration: none;
}

.venkero-app.venkero-shell.venkero-embed .venkero-actions-list a:hover { border-color: var(--accent); }
.venkero-app.venkero-shell.venkero-embed .venkero-actions-list a .dashicons:first-child { color: var(--accent); font-size: 18px; }
.venkero-app.venkero-shell.venkero-embed .venkero-actions-list a .dashicons:last-child { margin-left: auto; color: var(--text-muted); font-size: 16px; }

/* Compact rows with a hairline between them: the reference's separation, without boxing every line. */
.venkero-app.venkero-shell.venkero-embed .venkero-rows .venkero-row + .venkero-row {
    border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    padding-top: 9px;
    margin-top: 9px;
}

/* "View all" belongs at the far right of the card header, not beside the title. */
.venkero-app.venkero-shell.venkero-embed .venkero-card-head { display: flex; align-items: baseline; gap: 12px; }
.venkero-app.venkero-shell.venkero-embed .venkero-card-head .venkero-card-link { margin-left: auto; }

/* ──────────────────────────────────────────────────────────────────────────────────────────────────────────────
   VISUAL PASS — the arranged page's chrome, gap, and height tuning.
   Scoped to `body.venkero-arranged-page`, so the WP-Admin screens keep the chrome they have today. The `:not(
   .venkero-embed)` guards are deliberate and load-bearing: a component wrapper carries the shell's classes, so any
   shell rule without that guard reaches inside a widget and breaks its layout (that mistake collapsed every card to
   66px earlier today).
   ────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
@media (min-width: 901px) {
    /* HEADER: a prominent greeting, its line beneath, and a clear gap before the first cards. */
    body.venkero-arranged-page .venkero-app.venkero-shell:not(.venkero-embed) .venkero-topbar {
        padding: 24px 0 0;
        margin-bottom: 22px;
    }

    body.venkero-arranged-page .venkero-app.venkero-shell:not(.venkero-embed) .venkero-greeting {
        font-size: 38px;
        font-weight: 600;
        line-height: 1.1;
        letter-spacing: -0.03em;
        margin: 0 0 6px;
    }

    body.venkero-arranged-page .venkero-app.venkero-shell:not(.venkero-embed) .venkero-subtitle { font-size: 19px; }

    /* THE BADGE AND THE BELL MEASURED ON TOP OF EACH OTHER — badge x1478, bell x1476. In this header the badge lays
     * out inline at the right edge, so it is moved clear of the bell's 82px width by a margin rather than by
     * repositioning anything. Verified by re-measuring the two rectangles for overlap. */
    body.venkero-arranged-page .venkero-app.venkero-shell:not(.venkero-embed) .venkero-staging {
        margin-right: 96px;
    }

    /* SIDEBAR: larger wordmark, even rows, restrained active state with a slim lime indicator. */
    body.venkero-arranged-page .venkero-app.venkero-shell:not(.venkero-embed) .venkero-brand {
        font-size: 22px;
        font-weight: 650;
        margin: 0 0 20px;
        padding-left: 8px;
    }

    body.venkero-arranged-page .venkero-app.venkero-shell:not(.venkero-embed) .venkero-nav-list a {
        position: relative;
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 9px 10px;
        margin-bottom: 3px;
        border-radius: 9px;
        font-size: 14px;
        line-height: 1.2;
    }

    body.venkero-arranged-page .venkero-app.venkero-shell:not(.venkero-embed) .venkero-nav-list a .dashicons {
        flex: 0 0 auto;
        width: 19px;
        height: 19px;
        font-size: 19px;
    }

    body.venkero-arranged-page .venkero-app.venkero-shell:not(.venkero-embed) .venkero-nav-list a.is-current {
        background: color-mix(in srgb, var(--accent) 10%, transparent);
        border-left-color: var(--accent);
        color: var(--link, var(--accent));
    }

    /* EXACTLY ONE INDICATOR. The active row already carried a `border-left-color` marker from the shell's own
     * stylesheet; adding a `::before` bar on top of it produced the doubled marker Peter could see. The border is the
     * one kept — every row reserves the 3px so nothing shifts when the active row moves. */
    body.venkero-arranged-page .venkero-app.venkero-shell:not(.venkero-embed) .venkero-nav-list a {
        border-left: 3px solid transparent;
    }
}

/* GAPS BETWEEN CARDS: 18px, inside Peter's 16-20px range, and no card ever touches another. Elementor's own column
 * padding carries this, so the rule only has to make sure nothing overrides it to zero. */
/* ── THE TWO GAPS, SET RATHER THAN INFERRED ─────────────────────────────────────────────────────────────────────
 * Measured: the vertical gap between cards was 22px regardless of what the section's own margin asked for, because
 * Elementor's widget margin governs it; and the rail gutter measured 28px while the columns' padding accounted for 12.
 * Both are therefore set here, in Peter's 16-20px range, and verified by re-measuring the rendered rectangles. */
/* Elementor's own widget margin is ZEROED here, not added to. The first attempt set 18px on top of Elementor's own
 * margin and the measured gap went from 22 to 40 — so the 18px now lives on the row (in the page data) and this rule
 * removes the other contributor, making the rendered gap exactly what the row asks for. */
body.venkero-arranged-page .elementor-element:has(> .elementor-widget-container > .venkero-embed) {
    margin-bottom: 0 !important;
}

/* THE RAIL GUTTER IS REVERTED. Setting the columns' padding to 9px was meant to bring the gutter into Peter's 16-20px
 * range; measured, it moved the gutter from 28px to 47px instead, so the change was undone rather than left in place.
 * The gutter stood at 28px before this pass and stands at 28px after it. What actually governs it is still unidentified
 * — Elementor's column sizing, most likely — and that is recorded rather than papered over with more padding. */

/* FINANCIAL SUMMARY, shorter and quieter: smaller figures, tighter comparison lines, a modest chart. */
.venkero-app.venkero-shell.venkero-embed .venkero-metric-amount { font-size: 17px; letter-spacing: -0.01em; }
.venkero-app.venkero-shell.venkero-embed .venkero-metric-label { font-size: 10.5px; letter-spacing: .06em; }
.venkero-app.venkero-shell.venkero-embed .venkero-delta {
    margin: 1px 0 0;
    font-size: 11.5px;
    /* ONE LINE. The comparison sentence wrapped to two lines in the narrower arranged column, which added ~17px to a
     * row and made the whole card taller than the card beside it for no extra information. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.venkero-app.venkero-shell.venkero-embed .venkero-chart { height: 40px; }
.venkero-app.venkero-shell.venkero-embed .venkero-chart-note { font-size: 11.5px; margin-top: 4px; }

/* ──────────────────────────────────────────────────────────────────────────────────────────────────────────────
   TYPOGRAPHY AND SURFACES, to the brief's sizes. One family (the shell's), a consistent weight hierarchy, 20px card
   padding, 11px radii, and the lime accent reserved for primary actions and selected states rather than sprayed over
   every icon and secondary link.
   ────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.venkero-app.venkero-shell.venkero-embed .venkero-card { padding: 20px; border-radius: 11px; }
.venkero-app.venkero-shell.venkero-embed .venkero-card-title { font-size: 18px; font-weight: 650; letter-spacing: -0.01em; }

/* The uppercase category label: 11px with modest letter spacing. */
.venkero-app.venkero-shell.venkero-embed .venkero-alert-label {
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Primary row text at 15px, secondary details at 12.5-13px. */
.venkero-app.venkero-shell.venkero-embed .venkero-row-main a,
.venkero-app.venkero-shell.venkero-embed .venkero-actions-list a { font-size: 15px; }
.venkero-app.venkero-shell.venkero-embed .venkero-card-link { font-size: 12.5px; color: var(--text-muted); }
.venkero-app.venkero-shell.venkero-embed .venkero-card-link:hover { color: var(--accent); }

/* THE ATTENTION CARD'S OWN DETAILS: a 56px muted olive circle with a lime outline glyph beside the message, and a
 * 44px primary button beneath. Both cards share these numbers, so their parts line up across the row. */
.venkero-app.venkero-shell.venkero-embed .venkero-alert-icon {
    width: 56px;
    height: 56px;
    font-size: 24px;
    background: color-mix(in srgb, var(--accent) 9%, rgba(255, 255, 255, .04));
    color: var(--link, var(--accent));
    border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
}
.venkero-app.venkero-shell.venkero-embed .venkero-alert-headline { font-size: 18px; font-weight: 600; margin: 0; }
.venkero-app.venkero-shell.venkero-embed .venkero-alert-line { font-size: 13px; margin: 3px 0 0; }
.venkero-app.venkero-shell.venkero-embed .venkero-alert-action { margin: 16px 0 0; }
.venkero-app.venkero-shell.venkero-embed .venkero-alert-action .button-primary { min-height: 42px; padding: 0 18px; }

/* QUICK ACTIONS: 46px rows, 19px icons, warm-white glyphs — the accent belongs to primary actions, not to every row. */
.venkero-app.venkero-shell.venkero-embed .venkero-actions-list a {
    min-height: 46px;
    padding: 0 14px;
    gap: 12px;
    font-size: 15px;
}
.venkero-app.venkero-shell.venkero-embed .venkero-actions-list a .dashicons:first-child {
    color: var(--foreground);
    opacity: .82;
    font-size: 19px;
}
.venkero-app.venkero-shell.venkero-embed .venkero-actions-list a .dashicons:last-child { font-size: 17px; opacity: .7; }

/* RECENT ACTIVITY: a 34px mark, the same alignment whether a person is recorded or not, a relative time on the right. */
.venkero-app.venkero-shell.venkero-embed .venkero-avatar {
    width: 34px;
    height: 34px;
    font-size: 12px;
    margin-right: 0;
    background: rgba(255, 255, 255, .06);
    color: var(--foreground);
}
.venkero-app.venkero-shell.venkero-embed .venkero-avatar.is-neutral { font-size: 16px; opacity: .7; }
.venkero-app.venkero-shell.venkero-embed .venkero-row { display: flex; align-items: center; gap: 12px; }
.venkero-app.venkero-shell.venkero-embed .venkero-row-body { flex: 1 1 auto; min-width: 0; }

/* SHARED PROJECTS: the initials tile is a fallback for a missing thumbnail, so it is muted rather than lime — the same
 * reasoning as the avatar above. */
.venkero-app.venkero-shell.venkero-embed .venkero-thumb {
    background: rgba(255, 255, 255, .06);
    color: var(--foreground);
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: 12.5px;
}

/* FINANCIAL SUMMARY: figures at 22-26px with labels above, a short caption, and the door to Financials moved to a
 * quiet footer link so the header is not crowded. */
.venkero-app.venkero-shell.venkero-embed .venkero-metric-amount { font-size: 23px; font-weight: 650; letter-spacing: -0.02em; }
.venkero-app.venkero-shell.venkero-embed .venkero-metric-label { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }
.venkero-app.venkero-shell.venkero-embed .venkero-chart-note { font-size: 11.5px; color: var(--text-muted); margin: 5px 0 0; }
.venkero-app.venkero-shell.venkero-embed .venkero-card-foot { margin: 12px 0 0; }
.venkero-app.venkero-shell.venkero-embed .venkero-card-foot a { font-size: 12.5px; color: var(--text-muted); text-decoration: none; }
.venkero-app.venkero-shell.venkero-embed .venkero-card-foot a:hover { color: var(--accent); }

/* The financial card's head: title left, period right. */
.venkero-app.venkero-shell.venkero-embed .venkero-card-head > .venkero-quiet { margin-left: auto; font-size: 13px; }

/* UPCOMING TASKS: compact rows, a hairline between them, the due information on the right. */
.venkero-app.venkero-shell.venkero-embed .venkero-rows .venkero-row { padding: 9px 0; }
.venkero-app.venkero-shell.venkero-embed .venkero-rows { margin: 0; padding: 0; }

/* ──────────────────────────────────────────────────────────────────────────────────────────────────────────────
   EQUAL HEIGHTS WITHIN A PAIR, AND ONLY WITHIN A PAIR.

   The brief wants Upcoming Tasks and Financial Summary at the same height, and the two attention cards at the same
   height with their buttons on one baseline. It also says the rail must stack independently rather than determining
   the heights of the main-area rows.

   So the stretch is scoped to `[data-id='ovwmain1']` — the main column — and nothing in the rail is touched by it.
   The heights stay content-driven: this makes two siblings agree, it does not impose a height on either.
   ────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
body.venkero-arranged-page [data-id='ovwmain1'] .elementor-column { display: flex; }
body.venkero-arranged-page [data-id='ovwmain1'] .elementor-widget-wrap { display: flex; flex-direction: column; width: 100%; }
body.venkero-arranged-page [data-id='ovwmain1'] .elementor-element:has(> .elementor-widget-container > .venkero-embed),
body.venkero-arranged-page [data-id='ovwmain1'] .elementor-widget-container:has(> .venkero-embed) { display: flex; flex-direction: column; }
body.venkero-arranged-page [data-id='ovwmain1'] .venkero-embed,
body.venkero-arranged-page [data-id='ovwmain1'] .venkero-card { flex: 1 1 auto; }

/* The button sits on the same baseline in both attention cards: the message takes the space, the action follows it. */
body.venkero-arranged-page [data-id='ovwmain1'] .venkero-alert-body { flex: 1 1 auto; align-items: flex-start; }
body.venkero-arranged-page [data-id='ovwmain1'] .venkero-alert-action { margin-top: auto; padding-top: 16px; }

/* ──────────────────────────────────────────────────────────────────────────────────────────────────────────────
   THE RAIL GUTTER, IMPOSED RATHER THAN ASSUMED.

   Measured twice: with the columns at 69/31 the gutter came out 28px, and narrowing the split to 70.5/29.5 closed it
   to zero — so the gap is not a property of the width split and cannot be steered by one. Each column therefore takes
   its share MINUS half the gap, and the rail carries the 18px itself. The brief's 16-20px, and it stays put whatever
   the widths do.
   ────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
@media (min-width: 901px) {
    body.venkero-arranged-page [data-id='ovwmain1'] { width: calc(70% - 9px) !important; }
    body.venkero-arranged-page [data-id='ovwrail1'] { width: calc(30% - 9px) !important; margin-left: 18px !important; }
}

/* ── 2. the missing link in the stretch chain ────────────────────────────────────────────────────────────────
   `flex: 1` was set on the embed and the card but not on the widget element and its container between them, so the
   chain broke and neither card grew. This is the whole chain, in the main column only. */
body.venkero-arranged-page [data-id='ovwmain1'] .elementor-element:has(> .elementor-widget-container > .venkero-embed),
body.venkero-arranged-page [data-id='ovwmain1'] .elementor-widget-container:has(> .venkero-embed) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* ── 3. Financial Summary, trimmed to the brief's 300-330px ────────────────────────────────────────────────── */
.venkero-app.venkero-shell.venkero-embed .venkero-metric-amount { font-size: 22px; }
.venkero-app.venkero-shell.venkero-embed .venkero-metrics { gap: 6px 14px; margin-bottom: 6px; }
.venkero-app.venkero-shell.venkero-embed .venkero-chart { height: 36px; }
.venkero-app.venkero-shell.venkero-embed .venkero-card-foot { margin: 10px 0 0; }

/* THE BREAK IN THE STRETCH CHAIN, FOUND BY MEASURING THE CHAIN RATHER THAN THE CARD.
 *
 * The tasks widget's container had already stretched to 382px while its card stayed at 263px — so the chain was working
 * everywhere except the last step. The cause: the embed wrapper is `display: block` (set deliberately, to stop the
 * shell's page layout reaching inside a widget), and a `flex: 1` on the card does nothing inside a block parent.
 *
 * Only in the main column, and only as a flex column, so the rail is untouched and each card still sizes its own
 * contents.
 */
body.venkero-arranged-page [data-id='ovwmain1'] .venkero-embed { display: flex; flex-direction: column; }

/* The financial card's last ~30px, so it lands in the brief's 300-330px: tighter metric lines, a shorter caption, a
 * closer footer. Nothing is removed — the four metrics, the chart and the door to Financials all stay. */
.venkero-app.venkero-shell.venkero-embed .venkero-metric-label { margin: 0 0 2px; line-height: 1.1; }
.venkero-app.venkero-shell.venkero-embed .venkero-metric-amount { line-height: 1.1; margin: 0; }
.venkero-app.venkero-shell.venkero-embed .venkero-delta { margin: 0; line-height: 1.15; }
.venkero-app.venkero-shell.venkero-embed .venkero-chart-note { margin: 3px 0 0; }
.venkero-app.venkero-shell.venkero-embed .venkero-card-foot { margin: 8px 0 0; }

/* MOBILE: THE RAIL'S FLUSH EDGE WAS A DESKTOP DECISION. Removing the rail's side padding closed the visual gap to the
 * main area on desktop, which is what it was for — but at 390px every card stacks into one column, and the rail cards
 * came out 16px wider than the main cards, so the left and right edges did not line up. The padding is restored at
 * narrow widths only. */
@media (max-width: 900px) {
    /* STACKED, EVERY CARD MUST SHARE THE SAME EDGES. Making the rail flush was a desktop decision — it closed the gap to
     * the main area — but at 390px it left the rail cards 12px wider than the main cards, so the column's edges did not
     * line up. The rail gets the main column's own inner padding back at narrow widths, which is the value that aligned
     * them before this pass. */
    body.venkero-arranged-page [data-id='ovwrail1'] .elementor-inner-column { padding-left: 8px !important; padding-right: 8px !important; }
}

/* The last attempt at the 22px vertical gap: measured unchanged by the row's own margin (tested at 18, 15 and 9) and by
 * zeroing the widget's margin, so Elementor's section margin is the remaining candidate. */
body.venkero-arranged-page .elementor-inner-section { margin-bottom: 0 !important; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   FIDELITY PASS — contrast, rhythm, and the row and icon details, on the prototype page only.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
:root {
    /* The reference's measured text colours, as tokens for the prototype. */
    --proto-label: #eff1ee;      /* sidebar labels, 14.6:1 on the panel */
    --proto-subtitle: #b6bcae;   /* secondary text under a heading */
    --proto-detail: #b9bfb3;     /* row detail lines */
    --proto-cat: #c1c3bf;        /* uppercase category labels, 9.3:1 */
}

@media (min-width: 901px) {
    /* ── 2. CONTRAST: sidebar labels are near-white in the reference, not muted grey ────────────────────────── */
    body.venkero-arranged-page .venkero-app.venkero-shell:not(.venkero-embed) .venkero-nav-list a {
        color: var(--proto-label);
        font-size: 14.5px;
        font-weight: 500;
    }

    body.venkero-arranged-page .venkero-app.venkero-shell:not(.venkero-embed) .venkero-nav-list a .dashicons {
        /* A consistent thin outline glyph, slightly quieter than its label so the label leads. */
        color: rgba(239, 241, 238, .72);
        font-size: 19px;
        width: 19px;
        height: 19px;
        font-weight: 400;
    }

    body.venkero-arranged-page .venkero-app.venkero-shell:not(.venkero-embed) .venkero-nav-list a:hover .dashicons,
    body.venkero-arranged-page .venkero-app.venkero-shell:not(.venkero-embed) .venkero-nav-list a.is-current .dashicons {
        color: var(--link, var(--accent));
    }

    /* ── 4. SETTINGS AT THE FOOT OF THE NAVIGATION, above the account row ───────────────────────────────────── */
    body.venkero-arranged-page .venkero-app.venkero-shell:not(.venkero-embed) .venkero-nav-list {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    body.venkero-arranged-page .venkero-app.venkero-shell:not(.venkero-embed) .venkero-nav-list > li:last-child,
    body.venkero-arranged-page .venkero-app.venkero-shell:not(.venkero-embed) .venkero-nav-list > a:last-child {
        margin-top: auto;
    }

    body.venkero-arranged-page .venkero-app.venkero-shell:not(.venkero-embed) .venkero-account {
        border-top: 1px solid var(--border);
        margin-top: 14px;
        padding-top: 14px;
    }
}

/* ── 1. VERTICAL RHYTHM AND CARD DETAIL ─────────────────────────────────────────────────────────────────────── */
.venkero-app.venkero-shell.venkero-embed .venkero-card-head { margin-bottom: 12px; }
.venkero-app.venkero-shell.venkero-embed .venkero-card-title { color: var(--ink-strong, #f7f9f5); }

/* The priority cards: a 52px olive circle, and the button brought up closer to its message. The pair keeps equal
 * heights, so the space that used to sit under the shorter card's message is taken out at the card's own padding
 * rather than by pushing the button down. */
.venkero-app.venkero-shell.venkero-embed .venkero-alert-icon {
    width: 52px;
    height: 52px;
    font-size: 22px;
}
.venkero-app.venkero-shell.venkero-embed .venkero-alert-line { color: var(--proto-detail); }
.venkero-app.venkero-shell.venkero-embed .venkero-alert-label { color: var(--proto-cat); }
body.venkero-arranged-page [data-id='ovwmain1'] .venkero-alert-action { padding-top: 10px; }

/* ── 3. ICONS: one outline family, warm white for ordinary icons, lime only for the olive circles and actions ── */
.venkero-app.venkero-shell.venkero-embed .venkero-actions-list a .dashicons:first-child { color: rgba(247, 249, 245, .78); }
.venkero-app.venkero-shell.venkero-embed .venkero-rows .dashicons { color: rgba(247, 249, 245, .62); }

/* ── 5. TASK ROWS: title over project, a hairline between rows, due dates aligned right ───────────────────── */
.venkero-app.venkero-shell.venkero-embed .venkero-rows { list-style: none; }
.venkero-app.venkero-shell.venkero-embed .venkero-rows > li {
    padding: 9px 0;
    border-top: 1px solid rgba(247, 249, 245, .07);
}
.venkero-app.venkero-shell.venkero-embed .venkero-rows > li:first-child { border-top: 0; padding-top: 2px; }
.venkero-app.venkero-shell.venkero-embed .venkero-rows > li:last-child { padding-bottom: 2px; }
.venkero-app.venkero-shell.venkero-embed .venkero-rows a { color: var(--ink-strong, #f7f9f5); font-weight: 500; }
.venkero-app.venkero-shell.venkero-embed .venkero-rows .venkero-row-sub { color: var(--proto-detail); font-size: 12.5px; }
.venkero-app.venkero-shell.venkero-embed .venkero-row-when {
    margin-left: auto;
    min-width: 96px;
    text-align: right;
    font-size: 12.5px;
    color: var(--proto-detail);
}

/* ── 9. ACTIVITY ROWS: compact, consistent, the relative time right-aligned ──────────────────────────────── */
.venkero-app.venkero-shell.venkero-embed .venkero-activity-rows > li { padding: 8px 0; border-top: 1px solid rgba(247, 249, 245, .07); }
.venkero-app.venkero-shell.venkero-embed .venkero-activity-rows > li:first-child { border-top: 0; }
.venkero-app.venkero-shell.venkero-embed .venkero-row-who { color: var(--ink-strong, #f7f9f5); font-size: 14.5px; }
.venkero-app.venkero-shell.venkero-embed .venkero-row-what { color: var(--proto-detail); font-size: 12.5px; }

/* ── 6. FINANCIAL SUMMARY: metric hierarchy, spacing, and the chart ──────────────────────────────────────── */
.venkero-app.venkero-shell.venkero-embed .venkero-metric-label { color: var(--proto-cat); }
.venkero-app.venkero-shell.venkero-embed .venkero-metric-amount { color: var(--ink-strong, #f7f9f5); }
.venkero-app.venkero-shell.venkero-embed .venkero-delta { color: var(--proto-detail); }
.venkero-app.venkero-shell.venkero-embed .venkero-metrics { margin-bottom: 10px; }
.venkero-app.venkero-shell.venkero-embed .venkero-chart { margin-top: 12px; }
.venkero-app.venkero-shell.venkero-embed .venkero-chart-axis { color: var(--proto-detail); }
.venkero-app.venkero-shell.venkero-embed .venkero-card-foot a { color: var(--proto-detail); }

/* THE COMPLETION CONTROL: a thin ring, as the reference draws it, sized for a comfortable press. It is a real submit
 * button inside a real form, so it works with JavaScript disabled and posts to the application's own handler. */
.venkero-app.venkero-shell.venkero-embed .venkero-task-done-form { margin: 0; flex: 0 0 auto; }

.venkero-app.venkero-shell.venkero-embed .venkero-task-done {
    display: block;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1.5px solid rgba(247, 249, 245, .34);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.venkero-app.venkero-shell.venkero-embed .venkero-task-done:hover,
.venkero-app.venkero-shell.venkero-embed .venkero-task-done:focus-visible {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 4px rgba(198, 247, 74, .16);
}

/* The ring sits on the row's left, and the row keeps its alignment whether or not a control is present. */
.venkero-app.venkero-shell.venkero-embed .venkero-rows > li.has-control { display: flex; align-items: center; gap: 11px; }
.venkero-app.venkero-shell.venkero-embed .venkero-rows > li.has-control .venkero-row-main { flex: 1 1 auto; }

/* The lead slot: the ring on a completable task, a quiet clock on a project deadline, a flag on a task the viewer may
 * not complete. One 18px slot for all three, so the row text starts at the same place every time. */
.venkero-app.venkero-shell.venkero-embed .venkero-rows > li.has-lead { display: flex; align-items: center; gap: 11px; }
.venkero-app.venkero-shell.venkero-embed .venkero-rows > li.has-lead .venkero-row-main { flex: 1 1 auto; min-width: 0; }

.venkero-app.venkero-shell.venkero-embed .venkero-row-mark {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    font-size: 16px;
    color: rgba(247, 249, 245, .34);
}

/* THE QUIET MONTHS, DRAWN AS SLOTS. Five months with no collected money looked like a broken chart; they read as
 * months that earned nothing once each is a faint outlined slot against the baseline. No value is invented — the
 * slots are empty because the months were. */
.venkero-app.venkero-shell.venkero-embed .venkero-chart-bar.is-empty {
    background: rgba(247, 249, 245, .06);
    border-top: 1px solid rgba(247, 249, 245, .16);
}
.venkero-app.venkero-shell.venkero-embed .venkero-chart-bar.is-current { background: var(--accent); }

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   REFINEMENT PASS 2 — row controls, button proportions, and a chart that fills its card.
   Measured from the reference: buttons 171x39 and 181x39; chart bar 9px wide, 50px tall; 20-26px card padding.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 1. THE CONTROL IS A CIRCLE, AND THE ROW HAS THREE HONEST COLUMNS ──────────────────────────────────────────
 * The ring rendered as an OVAL because it was a flex item in a row: a flex item stretches on the cross axis by
 * default, so an 18px wide button in a 44px tall row became 18x44. `flex: 0 0 18px` stops it shrinking and
 * `align-self: center` stops it stretching, and `box-sizing: border-box` keeps the border inside the 18px. */
.venkero-app.venkero-shell.venkero-embed .venkero-rows > li.has-lead { align-items: center; }

.venkero-app.venkero-shell.venkero-embed .venkero-task-done-form {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
}

.venkero-app.venkero-shell.venkero-embed .venkero-task-done {
    display: block;
    flex: 0 0 18px;
    align-self: center;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    padding: 0;
    border: 1.5px solid rgba(247, 249, 245, .34);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

/* The three columns: a fixed control column, a flexible title column aligned left, a fixed due-date column on the
 * right. The title column may shrink; the other two may not. */
.venkero-app.venkero-shell.venkero-embed .venkero-rows > li.has-lead .venkero-row-main {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

.venkero-app.venkero-shell.venkero-embed .venkero-rows > li.has-lead .venkero-row-when {
    flex: 0 0 96px;
    width: 96px;
    text-align: right;
}

/* ── 2. THE PRIMARY BUTTON: WIDER AND SHALLOWER, WITH ITS LABEL CENTRED IN BOTH DIRECTIONS ────────────────────
 * The shell's own stylesheet sets the primary button's fill, border and text colour with `!important` (it has to, to
 * beat WP-Admin), so these carry importance too — the same reason the widget's button rules did. */
.venkero-app.venkero-shell.venkero-embed .venkero-alert-action .button,
.venkero-app.venkero-shell.venkero-embed .venkero-alert-action .button-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box;
    height: 39px !important;
    min-height: 39px !important;
    min-width: 168px;
    padding: 0 24px !important;
    line-height: 1 !important;
    text-align: center !important;
    border-radius: 8px;
}

/* ── 4. THE CHART FILLS ITS CARD, AND READS LIKE THE REFERENCE ────────────────────────────────────────────────
 * The reference's bars are narrow and tall (9x50 measured) and spread across the card, with the month under each. Ours
 * were 55px wide and 29px tall, which read as blocks rather than a chart. */
.venkero-app.venkero-shell.venkero-embed .venkero-chart {
    height: 56px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    padding: 0 2px;
    border-bottom: 1px solid rgba(247, 249, 245, .12);
}

.venkero-app.venkero-shell.venkero-embed .venkero-chart-bar {
    flex: 0 0 10px;
    width: 10px;
    border-radius: 2px 2px 0 0;
}

.venkero-app.venkero-shell.venkero-embed .venkero-chart-axis {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 0 2px;
    font-size: 11px;
    letter-spacing: .01em;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   DENSITY: the cards were reading as sparse. The fix is MORE content weight in the same space, not smaller text —
   nothing here shrinks anything.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* The financial figures move to the top of Peter's own 22-26px range. The reference reads larger than ours, and a
 * balance is the thing a person scans for on this card. */
.venkero-app.venkero-shell.venkero-embed .venkero-metric-amount { font-size: 26px; letter-spacing: -0.03em; }
.venkero-app.venkero-shell.venkero-embed .venkero-metric { padding: 4px 0 6px; }
.venkero-app.venkero-shell.venkero-embed .venkero-delta { font-size: 12px; }

/* The shared-project row takes the reference's shape: a 44px thumbnail tile, a two-line body (project over context),
 * then the status, the time and the action. One live share is one row, so the row carries the weight the card would
 * otherwise lose to emptiness. */
.venkero-app.venkero-shell.venkero-embed .venkero-thumb {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    font-size: 14px;
}
.venkero-app.venkero-shell.venkero-embed .venkero-revision-row { padding: 13px 0; }
.venkero-app.venkero-shell.venkero-embed .venkero-revision-row .venkero-row-body { display: flex; flex-direction: column; gap: 3px; }
.venkero-app.venkero-shell.venkero-embed .venkero-revision-row .venkero-row-who { font-size: 15.5px; font-weight: 550; }
.venkero-app.venkero-shell.venkero-embed .venkero-revision-row .venkero-row-what { font-size: 13px; }
.venkero-app.venkero-shell.venkero-embed .venkero-row-action {
    flex: 0 0 auto;
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--ink-strong, #f7f9f5);
    text-decoration: none;
}
.venkero-app.venkero-shell.venkero-embed .venkero-row-action:hover { border-color: var(--accent); color: var(--accent); }
.venkero-app.venkero-shell.venkero-embed .venkero-badge { font-size: 12px; padding: 4px 10px; }

/* Activity: the actor's name carries the weight, the description sits under it, as the reference has it. */
.venkero-app.venkero-shell.venkero-embed .venkero-activity-rows .venkero-row-who { font-size: 15px; font-weight: 600; }
.venkero-app.venkero-shell.venkero-embed .venkero-activity-rows .venkero-row-what { font-size: 13px; }
.venkero-app.venkero-shell.venkero-embed .venkero-activity-rows .venkero-row-when { font-size: 12.5px; }

/* Task rows: the title leads, the project line follows, with a touch more air between them. */
.venkero-app.venkero-shell.venkero-embed .venkero-rows > li.has-lead { padding: 11px 0; }
.venkero-app.venkero-shell.venkero-embed .venkero-rows .venkero-row-main a { font-size: 15.5px; }
.venkero-app.venkero-shell.venkero-embed .venkero-rows .venkero-row-sub { font-size: 13px; }

/* THE PAIR IS EQUAL, SO THE FINANCIAL CARD SETS THE HEIGHT FOR BOTH. It measured 380px, and because Upcoming tasks
 * holds three rows against the reference's four, that height showed up as empty space under the tasks. Trimming the
 * financial card's own furniture — not the figures, which just went UP to 26px — brings the pair back down. */
.venkero-app.venkero-shell.venkero-embed .venkero-metrics { gap: 4px 14px; margin-bottom: 6px; }
.venkero-app.venkero-shell.venkero-embed .venkero-metric { padding: 2px 0 4px; }
.venkero-app.venkero-shell.venkero-embed .venkero-chart { height: 46px; margin-top: 10px; }
.venkero-app.venkero-shell.venkero-embed .venkero-chart-axis { font-size: 10.5px; }
.venkero-app.venkero-shell.venkero-embed .venkero-chart-note { margin: 3px 0 0; font-size: 11px; }
.venkero-app.venkero-shell.venkero-embed .venkero-card-foot { margin: 6px 0 0; }

/* THE SHARED-PROJECT ROW SPREADS ITS COLUMNS. With one live share, a 510px flexible middle column left the card's
 * centre visibly empty. The body is capped and the status, time and action move to the right edge, which is how the
 * reference lays the row out: project on the left, status and time on the right. */
.venkero-app.venkero-shell.venkero-embed .venkero-revision-row .venkero-row-body { max-width: 430px; }
.venkero-app.venkero-shell.venkero-embed .venkero-revision-row .venkero-badge { margin-left: auto; }
.venkero-app.venkero-shell.venkero-embed .venkero-revision-row .venkero-row-when { flex: 0 0 104px; width: 104px; text-align: right; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   FINISH: ONE LEFT-EDGED TEXT COLUMN, AND ACTIVITY GLYPHS THAT FIT THEIR EVENT
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* LEFT-ALIGNED TASK TITLES AND PROJECT NAMES.
 *
 * Measured before this rule: titles began at x=385, 397 and 379 on the three rows — because the row's main column is a
 * flex COLUMN whose `align-items` is `center`, so each line was centred within it and its own length decided where it
 * started. `flex-start` puts every title and every project line on the same left edge. The round control column on the
 * left and the right-aligned due-date column are untouched. */
.venkero-app.venkero-shell.venkero-embed .venkero-rows > li.has-lead .venkero-row-main {
    align-items: flex-start;
    text-align: left;
}

.venkero-app.venkero-shell.venkero-embed .venkero-rows > li.has-lead .venkero-row-main .venkero-row-sub {
    text-align: left;
}

/* ── ONE TITLE EDGE FOR EVERY ROW IN A LIST ─────────────────────────────────────────────────────────────────────
 * Upcoming tasks and Shared project revisions indented each row by however wide that row's own lead happened to be.
 * A row was laid out as a flex row only when it carried a control or a lead (`.has-control`, `.has-lead`): the
 * completion ring is 18px, a project's initials tile is 44px, the other rows had no lead column at all — so titles
 * began at different left edges depending on which row you were reading, and each description inherited whatever
 * edge its own row had.
 *
 * The row is a grid now, and each list is its own grid. The lead takes the first column, sized `max-content` from the
 * widest lead in THAT list; the title and its description take the second column. A row with no lead leaves the first
 * column empty instead of starting its text there — so every title in a list shares one edge, every description sits
 * directly beneath its title, and the trailing status, date and action stay at the right. No per-row offsets: the
 * column does the work.
 *
 * SCOPED TO THE APP, NOT TO `.venkero-embed`. The live shell's body carries `venkero-arranged-page` and
 * `venkero-shell-page` and never `venkero-embed`, so the earlier left-align rules that named `.venkero-embed` could
 * not match the screens Peter was reading — which is why the indentation survived them. These rules name the app
 * context, so they apply to the pages in use and to the embed route alike. */
.venkero-app.venkero-shell .venkero-rows > li.venkero-row {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) auto auto auto;
    align-items: center;
    column-gap: 11px;
    row-gap: 2px;
}

/* The lead: the completion ring (inside its form), the initials tile, an activity avatar. */
.venkero-app.venkero-shell .venkero-rows > li.venkero-row > .venkero-task-done-form,
.venkero-app.venkero-shell .venkero-rows > li.venkero-row > .venkero-thumb,
.venkero-app.venkero-shell .venkero-rows > li.venkero-row > .venkero-avatar {
    grid-column: 1;
    justify-self: center;
}

/* The text column: the title, then the description under it, both starting at the same edge — with or without a lead
 * and with or without a control. `gap: 3px` is the spacing the revision rows already used between the two lines. */
.venkero-app.venkero-shell .venkero-rows > li.venkero-row > .venkero-row-main,
.venkero-app.venkero-shell .venkero-rows > li.venkero-row > .venkero-row-body {
    grid-column: 2;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    text-align: left;
}

/* The activity rows share one left edge too: the name and the description sit under each other, both aligned left. */
.venkero-app.venkero-shell.venkero-embed .venkero-activity-rows .venkero-row-body {
    align-items: flex-start;
    text-align: left;
}

/* A neutral activity glyph is a small outline mark, sized like the initials it stands in for. */
.venkero-app.venkero-shell.venkero-embed .venkero-avatar.is-neutral { font-size: 17px; opacity: .78; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   PROJECTS: REFINED PAGE
   Applied only where the shell adds `venkero-refined-page` — Projects and Pipeline today, one more screen per approval.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
body.venkero-refined-page {
    /* The same measured text colours the approved Overview uses. */
    --proto-label: #eff1ee;
    --proto-detail: #b9bfb3;
    --proto-cat: #c1c3bf;
}

/* ── the page heading: large title, quiet line beneath, as the reference ───────────────────────────────────── */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-heading h1 {
    font-size: 48px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 4px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-subtitle { font-size: 20px; color: var(--proto-detail); }

/* The actions row: the count on the left, the primary button on the right. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 14px 0 18px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-actions .venkero-quiet { font-size: 13px; color: var(--proto-detail); }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-actions .button-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 18px;
}

/* ── the tabs: the active one lime with an underline, exactly one indicator ────────────────────────────────── */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-tabs {
    display: flex;
    gap: 24px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-tabs a {
    padding: 10px 0;
    color: var(--proto-detail);
    font-size: 14.5px;
    font-weight: 500;
    text-decoration: none;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-tabs a.is-current {
    color: var(--link, var(--accent));
    border-bottom-color: var(--accent);
}

/* ── the Pipeline/List control: a segmented strip, not two loose buttons ───────────────────────────────────── */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-switch {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    margin: 0 0 18px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255, 255, 255, .02);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-switch .venkero-button {
    padding: 6px 16px;
    border: 1px solid transparent;
    border-radius: 7px;
    color: var(--proto-detail);
    font-size: 13px;
    text-decoration: none;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-switch .venkero-button.is-current {
    color: var(--link, var(--accent));
    border-color: var(--accent);
    background: rgba(198, 247, 74, .08);
}

/* ── THE BOARD: FIVE COLUMNS, AS THE REFERENCE ─────────────────────────────────────────────────────────────────
 * The board was one full-width card per stage, stacked vertically — 1,037px wide each. The markup already groups the
 * stages as siblings inside `.venkero-pipeline`, so the arrangement is a grid here and nothing in the page had to be
 * rebuilt: the same sections, laid out across. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-pipeline {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-pipeline > section.venkero-card {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-pipeline > section.venkero-card > .venkero-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 14px;
    padding: 0;
    /* NO DIVIDER: the reference separates the header with space, not a rule. */
    border: 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-pipeline > section.venkero-card > .venkero-card-head .venkero-card-title {
    /* Sentence case, ~18px, semibold — not the small uppercase label I had. */
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--ink-strong, #f7f9f5);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-pipeline > section.venkero-card > .venkero-card-head .venkero-quiet {
    font-size: 18px;
    color: var(--proto-detail);
}

/* The stage's own colour, as the reference's per-column dot. The stages are ordered by position, so the column's place
 * decides the colour — no assumption about a stage's id, which differs per workspace. */
body.venkero-refined-page .venkero-pipeline > section.venkero-card:nth-child(1) { --stage-dot: #8f958a; }
body.venkero-refined-page .venkero-pipeline > section.venkero-card:nth-child(2) { --stage-dot: #7cc47f; }
body.venkero-refined-page .venkero-pipeline > section.venkero-card:nth-child(3) { --stage-dot: #d8c65a; }
body.venkero-refined-page .venkero-pipeline > section.venkero-card:nth-child(4) { --stage-dot: #6fa8dc; }
body.venkero-refined-page .venkero-pipeline > section.venkero-card:nth-child(5) { --stage-dot: #7cc47f; }

/* ── THE PROJECT CARD INSIDE A COLUMN ──────────────────────────────────────────────────────────────────────── */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-pipeline [data-venkero-project] {
    /* 16px of padding, a 12px radius, and no strong border: the reference lets the lighter card surface separate
     * itself from the column rather than drawing a line around it. */
    padding: 16px;
    margin: 0 0 12px;
    border: 1px solid rgba(247, 249, 245, .05);
    border-radius: 12px;
    background: var(--surface-soft);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-pipeline [data-venkero-project] > p:first-child { margin: 0 0 2px; }

body.venkero-refined-page .venkero-app.venkero-shell .venkero-pipeline [data-venkero-project] > p:first-child::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--stage-dot, #8f958a);
    vertical-align: middle;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-pipeline [data-venkero-project] > p:first-child a {
    color: var(--ink-strong, #f7f9f5);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-pipeline [data-venkero-project] .venkero-quiet {
    margin: 0 0 8px;
    font-size: 14px;
    color: var(--proto-detail);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-pipeline [data-venkero-project] .venkero-card-due { margin-bottom: 8px; }

/* The real move control, kept and made compact: it still posts, it just stops dominating the card. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-pipeline [data-venkero-project] .venkero-inline-form {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    margin: 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-pipeline [data-venkero-project] .venkero-field {
    font-size: 10.5px;
    color: var(--proto-cat);
    letter-spacing: .04em;
    text-transform: uppercase;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-pipeline [data-venkero-project] select {
    max-width: 100%;
    font-size: 12.5px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-pipeline [data-venkero-project] .button {
    min-height: 30px;
    padding: 0 12px;
    font-size: 12px;
}

/* A column with nothing in it still reads as a column. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-pipeline > section.venkero-card > div:empty::after {
    content: 'Nothing here yet';
    display: block;
    padding: 14px 0;
    color: var(--proto-detail);
    font-size: 12.5px;
    text-align: center;
}

@media (max-width: 1400px) {
    body.venkero-refined-page .venkero-app.venkero-shell .venkero-pipeline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    body.venkero-refined-page .venkero-app.venkero-shell .venkero-pipeline { grid-template-columns: 1fr; }
}

/* ── the list view, and the Shared and Archived tabs: the same surfaces, quieter ───────────────────────────── */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-table { width: 100%; border-collapse: collapse; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-table th {
    text-align: left;
    font-size: 11px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--proto-cat);
    padding: 0 12px 10px 0;
    border-bottom: 1px solid var(--border);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-table td {
    padding: 11px 12px 11px 0;
    font-size: 14px;
    border-bottom: 1px solid rgba(247, 249, 245, .07);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-table td a { color: var(--ink-strong, #f7f9f5); font-weight: 550; text-decoration: none; }

body.venkero-refined-page .venkero-app.venkero-shell .venkero-card { border-radius: 12px; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-card > .venkero-card-head { margin-bottom: 14px; }

/* ── CONSISTENT NAVIGATION WITH THE APPROVED BASELINE ────────────────────────────────────────────────────────
 * The same sidebar treatment the approved Overview uses — near-white labels measured from the reference (14.6:1),
 * quieter outline icons, one lime indicator on the active row. Peter's brief asks for consistent navigation, so a
 * refined page carries the same sidebar as the approved one. The floating rounded panel is deliberately NOT applied
 * here: that is the Overview reference's own treatment, and the Projects reference shows a plain full-height sidebar. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-nav-list a {
    color: var(--ink-strong, #eff1ee);
    font-size: 14.5px;
    font-weight: 500;
    border-left: 3px solid transparent;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-nav-list a .dashicons {
    color: rgba(239, 241, 238, .72);
    font-size: 19px;
    width: 19px;
    height: 19px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-nav-list a.is-current {
    color: var(--link, var(--accent));
    border-left-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-nav-list a.is-current .dashicons { color: var(--accent); }

/* ── THE SHARED WITH ME TABLE, per 03-Shared-With-Me.png ───────────────────────────────────────────────────────
 * A compact table with a tile, an owner, a role badge and an updated date, inside a rounded bordered container. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-card:has(.venkero-table) {
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: 12px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-table th {
    font-size: 12.5px;
    font-weight: 550;
    letter-spacing: normal;
    text-transform: none;
    color: var(--proto-detail);
    padding: 0 16px 12px 0;
    border-bottom: 1px solid var(--border);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-table td {
    padding: 14px 16px 14px 0;
    font-size: 14.5px;
    vertical-align: middle;
    border-bottom: 1px solid rgba(247, 249, 245, .06);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-table tr:last-child td { border-bottom: 0; }

/* The title cell: an initials tile, then the name, on one line. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-row-lead {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(247, 249, 245, .07);
    color: var(--ink-strong, #f7f9f5);
    font-size: 12px;
    font-weight: 600;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-row-lead a {
    color: var(--ink-strong, #f7f9f5);
    font-size: 15px;
    font-weight: 550;
    text-decoration: none;
}

/* The owner cell: an avatar, then the name. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-owner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14.5px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-owner .venkero-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(247, 249, 245, .08);
    color: var(--ink-strong, #f7f9f5);
    font-size: 11px;
    font-weight: 600;
}

/* The role badge. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-badge {
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12px;
    color: var(--proto-detail);
    white-space: nowrap;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-table .button {
    min-height: 32px;
    padding: 0 14px;
    font-size: 13px;
}

/* Archived keeps the same table language. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-table td:last-child,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-table th:last-child { text-align: right; padding-right: 0; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   PROJECTS SHELL AND HEADER — the approved Overview treatment, applied to refined pages only.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
    /* The content clears the floating panel, exactly as the approved Overview does. */
    body.venkero-refined-page .venkero-app.venkero-shell:not(.venkero-embed) {
        padding: 0 24px 0 312px !important;
    }

    /* The panel itself: 268px wide, inset 16px, 14px radius. */
    body.venkero-refined-page .venkero-app.venkero-shell .venkero-nav {
        top: 16px;
        left: 16px;
        bottom: 16px;
        width: 268px;
        height: auto;
        border: 1px solid var(--border);
        border-right: 1px solid var(--border);
        border-radius: 14px;
    }

    body.venkero-refined-page .venkero-app.venkero-shell .venkero-brand {
        font-size: 22px;
        font-weight: 650;
        margin: 0 0 20px;
        padding-left: 8px;
    }

    /* Roomier nav rows, with Settings at the foot of the navigation and the account beneath it. */
    body.venkero-refined-page .venkero-app.venkero-shell .venkero-nav-list {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    body.venkero-refined-page .venkero-app.venkero-shell .venkero-nav-list > li:last-child,
    body.venkero-refined-page .venkero-app.venkero-shell .venkero-nav-list > a:last-child {
        margin-top: auto;
    }

    body.venkero-refined-page .venkero-app.venkero-shell .venkero-account {
        border-top: 1px solid var(--border);
        margin-top: 14px;
        padding-top: 14px;
    }

    /* THE HEADER ROW: heading and one short line on the left, the single lime action on the right. */
    body.venkero-refined-page .venkero-app.venkero-shell { position: relative; }

    body.venkero-refined-page .venkero-app.venkero-shell .venkero-heading {
        padding-right: 300px;
        margin-bottom: 20px;
    }

    body.venkero-refined-page .venkero-app.venkero-shell .venkero-heading h1 { margin: 0 0 4px; }
    body.venkero-refined-page .venkero-app.venkero-shell .venkero-subtitle { margin: 0; }

    body.venkero-refined-page .venkero-app.venkero-shell .venkero-page-cta {
        position: absolute;
        top: 28px;
        right: 24px;
        display: flex;
        align-items: center;
        gap: 16px;
        margin: 0;
    }

    body.venkero-refined-page .venkero-app.venkero-shell .venkero-page-cta .button-primary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 38px;
        padding: 0 18px;
    }

    body.venkero-refined-page .venkero-app.venkero-shell .venkero-cta-quiet {
        font-size: 13.5px;
        color: var(--proto-detail);
        text-decoration: none;
    }

    body.venkero-refined-page .venkero-app.venkero-shell .venkero-cta-quiet:hover { color: var(--accent); }

    /* The space before the tabs, tightened. */
    body.venkero-refined-page .venkero-app.venkero-shell .venkero-tabs { margin-top: 0; margin-bottom: 18px; }
}

/* The archived list shows a plain name rather than a link; it is not openable while it is archived. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-row-name {
    color: var(--ink-strong, #f7f9f5);
    font-size: 15px;
    font-weight: 550;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   PROJECTS HEADER AND TABLE REFINEMENT — refined pages only.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
    /* ONE ACTION, ON THE HEADER ROW, BELOW THE SHELL'S CONTROLS. 28px put it under the staging badge and the bell. */
    body.venkero-refined-page .venkero-app.venkero-shell .venkero-page-cta {
        top: 74px;
        right: 24px;
        gap: 0;
    }

    body.venkero-refined-page .venkero-app.venkero-shell .venkero-page-cta .button-primary {
        min-height: 40px;
        padding: 0 20px;
        font-size: 14px;
        font-weight: 550;
    }

    /* The heading keeps its own column clear of the button. */
    body.venkero-refined-page .venkero-app.venkero-shell .venkero-heading {
        padding-right: 240px;
        margin-bottom: 18px;
    }
}

/* ── the tables ─────────────────────────────────────────────────────────────────────────────────────────────── */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-table th {
    /* A clearer secondary label, and NOT bold: 500 at #c1c3bf is the reference's own column-label treatment. */
    font-weight: 500;
    font-size: 13px;
    color: var(--ink-strong, #c1c3bf);
    padding: 0 16px 10px 0;
    border-bottom: 1px solid rgba(247, 249, 245, .055);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-table td {
    /* One consistent row padding, and a separator you can see without it drawing attention. */
    padding: 13px 16px 13px 0;
    font-size: 14.5px;
    border-bottom: 1px solid rgba(247, 249, 245, .045);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-table tr:last-child td { border-bottom: 0; }

/* The subtle count that replaced the repeated card headings. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-card > .venkero-quiet {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--ink-strong, #c1c3bf);
}

/* Secondary values inside a row sit at one size and one colour, so a row reads as a row. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-table td .venkero-quiet,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-table td.venkero-quiet {
    font-size: 14px;
    color: var(--ink-strong, #c1c3bf);
}

/* The project title: readable, not heavy. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-row-lead a,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-row-name {
    font-size: 15px;
    font-weight: 550;
    color: var(--ink-strong, #f7f9f5);
}

/* The card that holds a table: room for the count line and the table, with even edges. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-card:has(> .venkero-table) {
    padding: 18px 20px 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
}

/* ── the empty states ───────────────────────────────────────────────────────────────────────────────────────── */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-empty {
    padding: 28px 24px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-soft);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-empty strong {
    display: block;
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: 550;
    color: var(--ink-strong, #f7f9f5);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-empty p {
    margin: 0;
    font-size: 14px;
    color: var(--ink-strong, #c1c3bf);
    max-width: 62ch;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   EMPTY STATES, BADGE AND ACTION — refined pages only.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
    /* THE BADGE MOVES ASIDE. Both it and the bell are absolutely positioned at right:0 top:18px, and the rule that
     * separates them only applies when the account control sits in the topbar. On these pages it is at the foot of the
     * sidebar, so the badge was drawn underneath the bell. */
    body.venkero-refined-page .venkero-app.venkero-shell .venkero-staging {
        right: 114px;
    }

    /* The action keeps its place below both, clear of the top row. */
    body.venkero-refined-page .venkero-app.venkero-shell .venkero-page-cta {
        top: 74px;
        right: 24px;
    }
}

/* The plus icon on the primary action, as the reference shows it. A CSS glyph: no markup change, no plugin file. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-page-cta .button-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-page-cta .button-primary::before {
    font-family: dashicons;
    font-size: 18px;
    line-height: 1;
    width: 18px;
    height: 18px;
    content: "\f132"; /* dashicons-plus */
}

/* ── the empty states: one centred text container for the heading and the description ───────────────────────── */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 24px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-soft);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-empty strong {
    max-width: 52ch;
    margin: 0 auto 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink-strong, #f7f9f5);
    text-align: center;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-empty p {
    /* `max-width` alone left the box pinned to the left edge, which is why the description sat left of the heading.
     * Auto margins put the box in the middle; the text inside it is centred. */
    max-width: 52ch;
    margin: 0 auto;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--ink-strong, #c1c3bf);
    text-align: center;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   THE PROJECT SUMMARY TAB — the reference's two columns. Refined pages only.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-project-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-project-main,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-project-rail {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

/* The header: a breadcrumb where the eyebrow was, then the job, then whose it is and where it stands. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-breadcrumb {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--ink-strong, #c1c3bf);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-breadcrumb a {
    color: var(--ink-strong, #c1c3bf);
    text-decoration: none;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-breadcrumb a:hover { color: var(--accent); }

body.venkero-refined-page .venkero-app.venkero-shell .venkero-dot {
    display: inline-block;
    width: 4px;
    height: 4px;
    margin: 0 12px;
    border-radius: 50%;
    background: #c1c3bf;
    vertical-align: middle;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink-strong, #f7f9f5);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
}

/* Progress: a bar for the completion figure, then the stage chain. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-progress-bar {
    height: 6px;
    margin: 0 0 10px;
    border-radius: 999px;
    background: rgba(247, 249, 245, .08);
    overflow: hidden;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-progress-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--accent);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-stage-chain {
    display: flex;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-stage-chain li {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-stage-chain li::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(247, 249, 245, .10);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-stage-chain li.is-past::before,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-stage-chain li.is-current::before {
    background: var(--accent);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-stage-node {
    position: relative;
    z-index: 1;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(247, 249, 245, .25);
    border-radius: 50%;
    background: var(--surface-soft);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-stage-chain li.is-past .venkero-stage-node,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-stage-chain li.is-current .venkero-stage-node {
    border-color: var(--accent);
    background: var(--accent);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-stage-chain li.is-current .venkero-stage-node {
    box-shadow: 0 0 0 4px rgba(198, 247, 74, .18);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-stage-name {
    font-size: 14px;
    color: var(--ink-strong, #f7f9f5);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-stage-state {
    font-size: 12px;
    color: var(--ink-strong, #c1c3bf);
}

/* The brief, and the facts this data actually holds. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-brief {
    margin: 0 0 16px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ink-strong, #dfe2dc);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-facts {
    display: flex;
    gap: 36px;
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid rgba(247, 249, 245, .055);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-facts dt {
    margin: 0 0 4px;
    font-size: 12px;
    color: var(--ink-strong, #c1c3bf);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-facts dd {
    margin: 0;
    font-size: 14px;
    color: var(--ink-strong, #f7f9f5);
}

/* Milestones, and the collaborator rows. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-milestones,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-collaborators {
    margin: 0;
    padding: 0;
    list-style: none;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-milestones li,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-collaborators li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(247, 249, 245, .045);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-milestones li:last-child,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-collaborators li:last-child {
    border-bottom: 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-milestone-date {
    flex: 0 0 58px;
    font-size: 13px;
    color: var(--ink-strong, #c1c3bf);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-milestone-dot {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-milestone-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14.5px;
    color: var(--ink-strong, #f7f9f5);
}

/* The client, and the collaborator name column. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-client-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 4px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-client-head strong {
    display: block;
    font-size: 15px;
    color: var(--ink-strong, #f7f9f5);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-avatar-lime {
    background: var(--accent);
    color: rgb(13, 16, 11);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-collab-name {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--ink-strong, #f7f9f5);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-cta-row { margin: 16px 0 0; }

body.venkero-refined-page .venkero-app.venkero-shell .venkero-cta-row .button-primary {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Below this width the two columns stack rather than crush. */
@media (max-width: 1100px) {
    body.venkero-refined-page .venkero-app.venkero-shell .venkero-project-grid {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   SUMMARY REFINEMENT PASS — tighter rhythm, restrained avatars, a clearer progress card.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-project-grid { gap: 20px; }

body.venkero-refined-page .venkero-app.venkero-shell .venkero-project-main,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-project-rail {
    /* The reference's own stacked gap measures ~16px; this is tighter still, and the same in both columns. */
    gap: 14px;
}

/* The separator before the status: a rule, so nothing reads as a second status dot. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-sep {
    display: inline-block;
    width: 1px;
    height: 13px;
    margin: 0 12px;
    background: rgba(247, 249, 245, .18);
    vertical-align: -2px;
}

/* More room between tabs, with their position unchanged across every tab. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-tabs { gap: 30px; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-tabs a { padding-bottom: 13px; }

/* A small uppercase label for the two kinds of progress. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-micro {
    margin: 0 0 8px;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-strong, #a9ada6);
}

/* The progress card: the percentage sits at the upper right. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-project-main .venkero-card > .venkero-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

/* Bigger, evenly spaced stage markers, and a line that stops at the last one. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-stage-chain li::before { top: 9px; }

body.venkero-refined-page .venkero-app.venkero-shell .venkero-stage-chain li:last-child::before {
    /* The connector ends AT the final marker rather than running past it. */
    right: auto;
    width: 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-stage-node {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-stage-name { margin-top: 2px; font-size: 13.5px; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-stage-state { font-size: 12px; color: var(--ink-strong, #c1c3bf); }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-stage-chain { margin-top: 14px; }

/* ── restrained avatars, and the name hierarchy the reference uses ────────────────────────────────────────── */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-client-head { gap: 14px; margin-bottom: 10px; }

body.venkero-refined-page .venkero-app.venkero-shell .venkero-client-head .venkero-avatar {
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    font-size: 17px;
    font-weight: 600;
    background: #2f3a2a;
    color: var(--ink-strong, #eef1ea);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-client-head strong {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-client-head .venkero-quiet {
    display: block;
    margin-top: 2px;
    font-size: 13px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-collaborators li { padding: 10px 0; }

body.venkero-refined-page .venkero-app.venkero-shell .venkero-collaborators .venkero-avatar {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    font-size: 13.5px;
    font-weight: 600;
    background: #2f3a2a;
    color: var(--ink-strong, #eef1ea);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-collab-name { font-size: 14.5px; font-weight: 550; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-collaborators .venkero-quiet { font-size: 13px; }

/* ── compact, aligned rows in the brief and the upcoming card ─────────────────────────────────────────────── */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-milestones li { padding: 10px 0; gap: 14px; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-milestone-date { flex: 0 0 62px; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-milestone-title { font-size: 14px; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-facts { margin-top: 14px; padding-top: 12px; gap: 32px; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-brief { margin-bottom: 0; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   SUMMARY CORRECTIONS — a spacing rhythm that is actually even, and a separator that reads as a separator.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* THE GAP IS THE GAP. The card's own bottom margin was adding to the column gap: 22px margin + 14px gap made a real
 * 36px between cards against a 20px gutter. Inside the project grid the margins are zeroed and both gaps are 16px, so
 * the visible space between cards equals the declared space and the vertical rhythm matches the horizontal one. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-project-grid {
    gap: 16px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-project-main,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-project-rail {
    gap: 16px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-project-main > .venkero-card,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-project-rail > .venkero-card {
    margin: 0;
}

/* The separator, unmistakably a rule: taller, a little brighter, with real space either side. It was 1px by 13px in a
 * very faint white, which is a dot at a glance. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-subtitle,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-status {
    /* No marker of any kind can appear on the header line or the status. */
    list-style: none;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-subtitle::marker,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-status::marker { content: none; }

body.venkero-refined-page .venkero-app.venkero-shell .venkero-sep {
    display: inline-block;
    width: 1px;
    height: 16px;
    margin: 0 14px;
    background: rgba(247, 249, 245, .28);
    vertical-align: -3px;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   THE WHITE DOT — a pseudo-element, not an element.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* The shell draws an empty near-white pill behind `.venkero-status` as part of its own status treatment. In the project
 * header that pill's left edge lands immediately before the lime status dot, where the seven pixels of it that are not
 * covered by text read as a small white dot. Peter asked for the vertical separator and one lime status dot — so the
 * separator stays, the lime dot stays, and this pill goes. Scoped to the project header's status line, so the shell's
 * status treatment is unchanged on every other screen. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-subtitle .venkero-status::before {
    /* `content: none` was not enough: Chromium kept the box alive with a 7px width and its near-white background, so
     * the white dot survived. `display: none` removes the box itself. `!important` matches the shell's own rule so the
     * outcome cannot depend on source order. */
    display: none !important;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-subtitle .venkero-status {
    background: transparent;
    border-radius: 0;
}

/* THE PROJECT HEADER'S STATUS, defined once and owned here.
 * It used the shell's `.venkero-status` / `.venkero-status-dot`, which the shell dresses for its own status treatment —
 * a generated ::before box behind the status, and a colour on the dot. On this line that produced a near-white mark next
 * to the lime dot, which is the white dot Peter saw. These classes are not shared with anything, and the dot's colour
 * and behaviour are stated outright. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-proj-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 0;
    border-radius: 0;
    color: rgb(247, 249, 245);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-proj-status::before,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-proj-status::after {
    content: none;
    display: none;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-proj-status-dot {
    display: inline-block;
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: 50%;
    background: #c6f74a;
    box-shadow: none;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-proj-status-dot::before,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-proj-status-dot::after {
    content: none;
    display: none;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   THE PROJECT TASKS TAB
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

body.venkero-refined-page .venkero-app.venkero-shell .venkero-project-tasks {
    display: grid;
    /* Peter, 2026-09-22: "Adjust the columns to approximately 68% task list and 32% sidebar, with a consistent 16-20px
     * gap. The current sidebar is too narrow compared with the reference." Fractions rather than a fixed rail, so the
     * proportion holds as the window changes; the measured rail was 366px (29%) against a 16px gutter. */
    grid-template-columns: minmax(0, 68fr) minmax(0, 32fr);
    gap: 16px;
    align-items: start;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-project-tasks .venkero-project-main,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-project-tasks .venkero-project-rail {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* A card contributes no margin of its own, so the gap above is the whole gap. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-project-tasks .venkero-card {
    margin: 0;
}

/* ── the toolbar ─────────────────────────────────────────────────────────────────────────────────────────────────── */

body.venkero-refined-page .venkero-app.venkero-shell .venkero-task-add {
    display: flex;
    justify-content: flex-end;
    margin: 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-task-add > summary.venkero-task-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Peter, 2026-09-22: "Make '+ Add Task' a wider, shallower button, approximately 44px tall, with centered text."
     * The reference's own button measures 155x49; 44px is his number, so the height is fixed at 44 and the width has a
     * 155px minimum. No vertical margin, which keeps the toolbar from holding open space it does not need. */
    box-sizing: border-box;
    width: 155px;
    min-height: 44px;
    max-height: 44px;
    margin: 0;
    padding: 0 16px;
    border: 0;
    border-radius: 9px;
    background: var(--venkero-accent, #c6f74a);
    color: rgb(13, 16, 11);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    list-style: none;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-task-add > summary.venkero-task-add-btn::-webkit-details-marker {
    display: none;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-task-add[open] > summary.venkero-task-add-btn {
    margin-bottom: 12px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-task-add-form {
    padding: 16px;
    border: 1px solid rgba(247, 249, 245, .08);
    border-radius: 12px;
    background: #1e221b;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-task-add-form label {
    display: block;
    margin-bottom: 4px;
    color: var(--ink-strong, #c1c3bf);
    font-size: 12px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-task-add-form input[type="text"],
body.venkero-refined-page .venkero-app.venkero-shell .venkero-task-add-form input[type="date"] {
    width: 100%;
    margin-bottom: 12px;
    padding: 8px 10px;
    border: 1px solid rgba(247, 249, 245, .12);
    border-radius: 8px;
    background: #161915;
    color: var(--ink-strong, #f7f9f5);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-task-add-form button,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-task-add-form input[type="submit"] {
    padding: 8px 14px;
    border: 0;
    border-radius: 8px;
    background: var(--venkero-accent, #c6f74a);
    color: rgb(13, 16, 11);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

/* ── the group header ────────────────────────────────────────────────────────────────────────────────────────────── */

body.venkero-refined-page .venkero-app.venkero-shell .venkero-task-group + .venkero-task-group {
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid rgba(247, 249, 245, .07);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-task-group-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 2px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-task-caret {
    width: 8px;
    height: 8px;
    border-right: 1.5px solid #989a95;
    border-bottom: 1.5px solid #989a95;
    transform: rotate(45deg) translate(-1px, -1px);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-task-group-icon {
    width: 13px;
    height: 13px;
    border: 1.5px solid #989a95;
    border-radius: 50%;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-task-group-icon--done {
    border-color: var(--venkero-accent, #c6f74a);
    background: var(--venkero-accent, #c6f74a);
    box-shadow: inset 0 0 0 2px #1e221b;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-task-group-label {
    color: var(--ink-strong, #f7f9f5);
    font-size: 15px;
    font-weight: 600;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-task-group-count {
    color: var(--ink-quiet, #989a95);
    font-size: 15px;
    font-weight: 500;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-task-group-empty {
    /* Row padding 30px + gap 14px + an 18px ring puts a task title at 62px. The empty line lines up with the titles. */
    margin: 2px 0 6px 62px;
    font-size: 14px;
}

/* ── the task rows ──────────────────────────────────────────────────────────────────────────────────────────────── */

body.venkero-refined-page .venkero-app.venkero-shell .venkero-task-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* WordPress's admin stylesheet gives list items a 6px bottom margin, which pushed a 47px row to a 53px pitch and undid
 * the compaction. The separator is the whole of the spacing between rows. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-task-list > li {
    margin: 0;
    padding: 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-task-row {
    display: flex;
    align-items: center;
    gap: 14px;
    /* Measured from the reference: its task rows sit 48-49px apart. This row is 48px high with a 1px separator, which
     * reproduces that pitch rather than the looser 53px the first pass had. */
    min-height: 47px;
    padding: 6px 2px 6px 30px;
    border-top: 1px solid rgba(247, 249, 245, .06);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-task-row form {
    display: inline-flex;
    flex: 0 0 auto;
    align-self: center;
    align-items: center;
    margin: 0;
}

/* The completion control: round, and the real button that completes the task. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-task-ring,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-task-ring-btn {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    /* WordPress's admin stylesheet gives buttons a 30px min-height, which turned this 18px circle into a tall oval.
       The admin rules are not ours to edit, so the size is stated here on both ends. */
    min-width: 18px;
    min-height: 0;
    max-height: 18px;
    margin: 0;
    padding: 0;
    border: 1.5px solid #6b6f68;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    line-height: 0;
    align-self: center;
    cursor: pointer;
    appearance: none;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-task-ring-btn:hover {
    border-color: var(--venkero-accent, #c6f74a);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-task-ring.is-done {
    border-color: var(--venkero-accent, #c6f74a);
    background: var(--venkero-accent, #c6f74a);
    box-shadow: inset 0 0 0 2px #1e221b;
    cursor: default;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-task-title {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--ink-strong, #f7f9f5);
    font-size: 15px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-task-row.is-done .venkero-task-title {
    color: var(--ink-quiet, #989a95);
    text-decoration: line-through;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-task-due {
    flex: 0 0 auto;
    color: var(--ink-quiet, #989a95);
    font-size: 14px;
    white-space: nowrap;
}

/* ── the right column ───────────────────────────────────────────────────────────────────────────────────────────── */

body.venkero-refined-page .venkero-app.venkero-shell .venkero-deadline-title {
    margin: 0 0 4px;
    color: var(--ink-strong, #f7f9f5);
    font-size: 16px;
    font-weight: 600;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-progress-percent {
    margin-left: auto;
    color: var(--ink-strong, #f7f9f5);
    font-size: 15px;
    font-weight: 600;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-task-subhead {
    margin: 18px 0 8px;
    color: var(--ink-strong, #f7f9f5);
    font-size: 15px;
    font-weight: 600;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-task-upcoming {
    margin: 0;
    padding: 0;
    list-style: none;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-task-upcoming li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(247, 249, 245, .06);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-task-upcoming li:last-child {
    border-bottom: 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-task-upcoming .venkero-task-ring {
    /* The same control as the list, so the same size. */
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    min-width: 18px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-task-upcoming-title {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--ink-strong, #f7f9f5);
    font-size: 14px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-task-upcoming-date {
    flex: 0 0 auto;
    color: var(--ink-quiet, #989a95);
    font-size: 13px;
    white-space: nowrap;
}

/* ── narrower screens: one column, the rail beneath ─────────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
    body.venkero-refined-page .venkero-app.venkero-shell .venkero-project-tasks {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The two group cards, and the icons beside the Next deadline heading. */

body.venkero-refined-page .venkero-app.venkero-shell .venkero-task-card .venkero-task-group-head {
    padding-top: 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-task-card .venkero-task-group + .venkero-task-group {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-deadline-head {
    display: flex;
    align-items: center;
    gap: 9px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-deadline-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    font-size: 18px;
    line-height: 18px;
    color: var(--ink-strong, #c1c3bf);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-deadline-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   THE PROJECT MEDIA TAB
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

body.venkero-refined-page .venkero-app.venkero-shell .venkero-media-count {
    margin: 0 0 12px;
    color: var(--ink-strong, #f7f9f5);
    font-size: 15px;
    font-weight: 600;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-media-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-media-tile {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(247, 249, 245, .08);
    border-radius: 12px;
    background: #1e221b;
}

/* The thumbnail area. There is no preview or poster in this application, so this holds the kind's icon rather than a
 * broken image. 16:9, to match the shape the reference gives its tiles. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-media-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    width: 100%;
    background: #191d18;
    border-bottom: 1px solid rgba(247, 249, 245, .06);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-media-thumb .dashicons {
    width: 34px;
    height: 34px;
    font-size: 34px;
    line-height: 34px;
    color: #565a53;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-media-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px 14px;
    min-width: 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-media-name {
    overflow: hidden;
    color: var(--ink-strong, #f7f9f5);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-media-sub {
    color: var(--ink-quiet, #989a95);
    font-size: 13px;
}

@media (max-width: 1280px) {
    body.venkero-refined-page .venkero-app.venkero-shell .venkero-media-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    body.venkero-refined-page .venkero-app.venkero-shell .venkero-media-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-media-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 48px 24px;
    text-align: center;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-media-empty-icon {
    width: 34px;
    height: 34px;
    margin-bottom: 8px;
    font-size: 34px;
    line-height: 34px;
    color: #565a53;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-media-empty-title {
    margin: 0;
    color: var(--ink-strong, #f7f9f5);
    font-size: 16px;
    font-weight: 600;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-media-empty p {
    margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   THE MEDIA SECTIONS, AS COLLAPSIBLE DRAWERS
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* A drawer, not a panel: the summary is the whole of the closed state, and the body appears when it is opened. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-section {
    margin-bottom: 16px;
    border: 1px solid rgba(247, 249, 245, .08);
    border-radius: 12px;
    background: #1e221b;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-section > summary.venkero-section-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-section > summary.venkero-section-head::-webkit-details-marker {
    display: none;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-section-title {
    flex: 0 0 auto;
    color: var(--ink-strong, #f7f9f5);
    font-size: 16px;
    font-weight: 600;
}

/* The one line that says what is inside, so the drawer rarely needs opening. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-section-summary {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--ink-quiet, #989a95);
    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-section-caret {
    flex: 0 0 auto;
    align-self: center;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid #989a95;
    border-bottom: 1.5px solid #989a95;
    transform: rotate(45deg);
    transition: transform .15s ease;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-section[open] > summary.venkero-section-head .venkero-section-caret {
    transform: rotate(225deg);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-section[open] > summary.venkero-section-head {
    border-bottom: 1px solid rgba(247, 249, 245, .07);
}

/* Inside an opened drawer the card is gone — the drawer is the card. Fields and buttons line up, and every control is
 * the same height so a row of them reads as a row. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-section-body {
    padding: 16px 18px 18px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-section-body p {
    margin: 0 0 10px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-section-body p:last-child {
    margin-bottom: 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-section-body form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin: 0 0 10px;
    padding: 0;
    border: 0;
    background: none;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-section-body form:last-child {
    margin-bottom: 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-section-body label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--ink-strong, #c1c3bf);
    font-size: 12px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-section-body select,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-section-body input[type="text"],
body.venkero-refined-page .venkero-app.venkero-shell .venkero-section-body input[type="date"],
body.venkero-refined-page .venkero-app.venkero-shell .venkero-section-body input[type="number"] {
    box-sizing: border-box;
    /* A select measured 44px against the buttons' 36px: a height was set and the admin stylesheet won anyway, the same
     * way its button min-height stretched the completion rings. Both ends are stated. */
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    padding: 0 10px;
    border: 1px solid rgba(247, 249, 245, .12);
    border-radius: 8px;
    background: #161915;
    color: var(--ink-strong, #f7f9f5);
    font-size: 14px;
    line-height: 34px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-section-body button,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-section-body input[type="submit"],
body.venkero-refined-page .venkero-app.venkero-shell .venkero-section-body .venkero-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid rgba(247, 249, 245, .14);
    border-radius: 8px;
    background: transparent;
    color: var(--ink-strong, #f7f9f5);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    appearance: none;
}

/* One primary action per section: the first form's button. The consequential ones after it — Release now, Release
 * early — stay outlined, so the row says which action is ordinary and which two are not. Three lime buttons side by side
 * said nothing. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-section-body form:first-of-type button[type="submit"],
body.venkero-refined-page .venkero-app.venkero-shell .venkero-section-body form:first-of-type input[type="submit"] {
    border-color: transparent;
    background: var(--venkero-accent, #c6f74a);
    color: rgb(13, 16, 11);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-section-body table {
    font-size: 14px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-section-body .venkero-table {
    margin-top: 6px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-section-body h4 {
    margin: 14px 0 4px;
    color: var(--ink-strong, #f7f9f5);
    font-size: 14px;
    font-weight: 600;
}

/* The signed preview. The tile keeps its 16:9 frame and the image fills it without distortion. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-media-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #191d18;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   THE PROJECT DOCUMENTS TAB
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

body.venkero-refined-page .venkero-app.venkero-shell .venkero-doc-card {
    padding: 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-doc-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(247, 249, 245, .06);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-doc-row:last-child {
    border-bottom: 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-doc-main {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 auto;
    min-width: 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-doc-title {
    color: var(--ink-strong, #f7f9f5);
    font-size: 15px;
    font-weight: 600;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-doc-meta {
    color: var(--ink-quiet, #989a95);
    font-size: 13px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-doc-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex: 0 0 auto;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-doc-date {
    color: var(--ink-quiet, #989a95);
    font-size: 13px;
    white-space: nowrap;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-doc-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-doc-actions form {
    display: inline-flex;
    margin: 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-doc-figure {
    color: var(--ink-strong, #f7f9f5);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-doc-link {
    color: var(--venkero-accent, #c6f74a);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-doc-waiting {
    font-size: 13px;
    white-space: nowrap;
}

/* The status badge. Restrained: the word carries the meaning, the colour only supports it. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-badge {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border: 1px solid rgba(247, 249, 245, .12);
    border-radius: 999px;
    color: var(--ink-strong, #c1c3bf);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-badge--issued {
    border-color: rgba(198, 247, 74, .35);
    color: var(--link, var(--accent));
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-badge--signed {
    border-color: transparent;
    background: var(--venkero-accent, #c6f74a);
    color: rgb(13, 16, 11);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-badge--declined {
    border-color: rgba(226, 148, 122, .4);
    color: #e2947a;
}

/* The New Document control, and the form it reveals. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-doc-new {
    margin-top: 16px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-doc-form .venkero-field {
    display: block;
    margin-bottom: 12px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-doc-form input[type="text"],
body.venkero-refined-page .venkero-app.venkero-shell .venkero-doc-form select,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-doc-form textarea {
    box-sizing: border-box;
    width: 100%;
    max-width: 520px;
    min-height: 36px;
    padding: 8px 10px;
    border: 1px solid rgba(247, 249, 245, .12);
    border-radius: 8px;
    background: #161915;
    color: var(--ink-strong, #f7f9f5);
    font-size: 14px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-doc-form select {
    max-width: 320px;
    height: 36px;
    min-height: 36px;
    max-height: 36px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-doc-form textarea {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    line-height: 1.5;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-doc-form button[type="submit"],
body.venkero-refined-page .venkero-app.venkero-shell .venkero-doc-form input[type="submit"] {
    box-sizing: border-box;
    height: 36px;
    min-height: 36px;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    background: var(--venkero-accent, #c6f74a);
    color: rgb(13, 16, 11);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-setup-list {
    margin: 0 0 10px;
    padding-left: 18px;
    color: var(--ink-strong, #c1c3bf);
    font-size: 14px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-setup-list li {
    margin-bottom: 3px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-section-body code {
    padding: 2px 6px;
    border-radius: 6px;
    background: #161915;
    color: var(--link, var(--accent));
    font-size: 12px;
}

@media (max-width: 1100px) {
    body.venkero-refined-page .venkero-app.venkero-shell .venkero-doc-row {
        flex-wrap: wrap;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   DOCUMENTS: THE TOOLBAR
   Count left, control right, above the list and above the empty state, so both read the same way.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

body.venkero-refined-page .venkero-app.venkero-shell .venkero-doc-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 16px;
    padding: 0 2px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-doc-count {
    color: var(--ink-quiet, #989a95);
    font-size: 13px;
}

/* Hidden from view, never from the keyboard: 1px and transparent rather than display:none, so it still takes focus. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-doc-new-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-doc-new-btn {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: 44px;
    padding: 0 18px;
    border-radius: 10px;
    background: var(--accent, #c6f74a);
    color: rgb(13, 16, 11);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

/* The focus ring lands on the label, which is what a person sees, whenever the hidden input has focus. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-doc-new-toggle:focus-visible ~ .venkero-doc-toolbar .venkero-doc-new-btn {
    outline: 2px solid #f7f9f5;
    outline-offset: 2px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-doc-form {
    display: none;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-doc-new-toggle:checked ~ .venkero-doc-form {
    display: block;
    margin: 0 0 18px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   THE DRAWERS, SOFTENED
   The same subtle olive edge a card uses, a more compact closed row, and a description light enough that the title leads.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

body.venkero-refined-page .venkero-app.venkero-shell .venkero-section {
    border: 1px solid var(--border);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-section > summary.venkero-section-head {
    padding: 11px 16px;
    gap: 10px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-section-title {
    font-size: 15px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-section-summary {
    color: var(--ink-quiet, #8e9089);
    font-size: 13px;
    font-weight: 400;
}

/* A summary is focusable as it stands, so the drawer keeps a real keyboard indicator. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-section > summary.venkero-section-head:focus-visible {
    outline: 2px solid var(--accent, #c6f74a);
    outline-offset: -2px;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   THE BRIGHT EDGE ON THE DRAWERS.
   Not my border — that one measures rgb(43,49,40), the card's olive. WordPress's admin stylesheet gives a <summary> a
   1px solid rgb(255,255,255) border on all four sides, and because the summary fills the drawer its border lands exactly
   one pixel inside mine. Read from the rendered pixels: y=498 rgb(43,49,40), y=499 rgb(255,255,255), y=500 the surface.
   Stated explicitly here so no stylesheet can put it back, and the outline colour is set to our accent so any default
   ring is ours as well. The keyboard focus ring is untouched and still ours.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

body.venkero-refined-page .venkero-app.venkero-shell .venkero-section > summary.venkero-section-head {
    border: 0;
    outline-color: var(--accent, #c6f74a);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-section[open] > summary.venkero-section-head {
    border-bottom: 1px solid var(--border);
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   THE DOCUMENT ROW: STATUS IN ITS OWN COLUMN, AMOUNTS AND ACTIONS AT THE RIGHT.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

body.venkero-refined-page .venkero-app.venkero-shell .venkero-doc-status {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex: 0 0 148px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-doc-note {
    color: var(--ink-quiet, #8e9089);
    font-size: 12px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-doc-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex: 0 0 auto;
    min-width: 170px;
}

/* Keyboard-only, as asked: the ring is for somebody arriving by Tab, and is not painted on a mouse click. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-section > summary.venkero-section-head:focus-visible {
    outline: 2px solid var(--accent, #c6f74a);
    outline-offset: -2px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-doc-new-toggle:focus-visible ~ .venkero-doc-toolbar .venkero-doc-new-btn {
    outline: 2px solid #f7f9f5;
    outline-offset: 2px;
}

/* The admin stylesheet also tints the summary, so the drawer's face read rgb(18,21,17) against the card's rgb(30,34,27).
 * Transparent hands the surface back to the drawer, which is the same var(--surface) the card uses. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-section > summary.venkero-section-head {
    background: transparent;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   THE PROJECT ACTIVITY FEED
   A row per event: who, what, when. The separators are the same faint hairlines the document rows use, so the feed reads
   as one surface rather than a stack of panels.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

body.venkero-refined-page .venkero-app.venkero-shell .venkero-feed {
    padding: 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-feed-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(247, 249, 245, .06);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-feed-row:last-child {
    border-bottom: 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-feed-avatar {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    font-size: 12px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-feed-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: #161915;
    color: var(--ink-quiet, #989a95);
    font-size: 16px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-feed-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-feed-text {
    color: var(--ink-strong, #f7f9f5);
    font-size: 14px;
    font-weight: 500;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-feed-meta {
    color: var(--ink-quiet, #8e9089);
    font-size: 12px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-feed-when {
    flex: 0 0 auto;
    color: var(--ink-quiet, #8e9089);
    font-size: 13px;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   THE ACTIVITY FEED, GROUPED BY DAY
   A heading with the sort stated, day labels with a rule above each, and a timeline line beside the entries so a day
   reads as one block. The line does not run through the day labels.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

body.venkero-refined-page .venkero-app.venkero-shell .venkero-feed-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-feed-sort {
    color: var(--ink-quiet, #8e9089);
    font-size: 12px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-feed {
    padding: 6px 0 2px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-feed-day {
    margin: 0;
    padding: 14px 18px 8px;
    border-top: 1px solid rgba(247, 249, 245, .06);
    color: var(--ink-strong, #c1c3bf);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-feed-day:first-child {
    border-top: 0;
    padding-top: 8px;
}

/* The timeline runs beside the entries, not through the day labels. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-feed-rows {
    position: relative;
    margin: 0 18px 6px;
    padding-left: 22px;
    border-left: 1px solid rgba(247, 249, 245, .07);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-feed-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 8px 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-feed-row + .venkero-feed-row {
    border-top: 1px solid rgba(247, 249, 245, .05);
}

/* The node on the line. Grey, not the accent: the accent's five places stay as they are. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-feed-row::before {
    content: '';
    position: absolute;
    left: -27px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -3px;
    border: 1px solid rgba(247, 249, 245, .28);
    border-radius: 999px;
    background: #1e221b;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-feed-text {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--ink-strong, #f7f9f5);
    font-size: 14px;
    font-weight: 500;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-feed-when {
    flex: 0 0 auto;
    color: var(--ink-quiet, #8e9089);
    font-size: 13px;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   ACTIVITY: THE CARD HEADING, ONE ALIGNED TEXT COLUMN, AND THE NO-ACTIVITY STATE INSIDE THE CARD
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

body.venkero-refined-page .venkero-app.venkero-shell .venkero-feed {
    padding: 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-feed-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding: 16px 18px 13px;
    border-bottom: 1px solid rgba(247, 249, 245, .07);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-feed-title {
    color: var(--ink-strong, #f7f9f5);
    font-size: 15px;
    font-weight: 600;
}

/* ONE CONTAINER RULE FOR BOTH. The initials avatar was carrying `margin: 0 0 9px 0` from the Summary tab's styling, so a
 * member's text started at x405 while an icon's started at x396. Both are now the same 30x30 box with no margin, which is
 * what puts every row's text in a single column. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-feed-avatar,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-feed-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    line-height: 1;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-feed-icon {
    border-radius: 999px;
    background: #161915;
    color: var(--ink-quiet, #989a95);
    font-size: 16px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-feed-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 34px 18px 38px;
    text-align: center;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-feed-empty .dashicons {
    width: 30px;
    height: 30px;
    color: #6f7269;
    font-size: 30px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-feed-empty .venkero-feed-empty-title {
    margin: 4px 0 0;
    color: var(--ink-strong, #f7f9f5);
    font-size: 15px;
    font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   THE PIPELINE BOARD
   Count and view switch in one row; five equal columns; a stage dot on each column and each card; compact cards with the
   movement form behind a menu.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

body.venkero-refined-page .venkero-app.venkero-shell .venkero-board-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 16px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-board-count {
    margin: 0;
    color: var(--ink-strong, #c1c3bf);
    font-size: 14px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-board-bar .venkero-switch {
    margin: 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-pipeline {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

/* A shared minimum height, so an empty column keeps its shape instead of collapsing to a header. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-pipeline > section.venkero-board-col {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-height: 460px;
    margin: 0;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-board-col-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-board-col-count {
    margin: 0 0 0 auto;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-board-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-board-empty {
    margin: 0;
    padding: 8px 2px;
}

/* THE STAGE DOT. Grey for Enquiry and for anything unrecognised, so an unknown stage is plainly unassigned rather than
   wearing a colour that belongs to a different stage. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-stage-dot {
    display: inline-block;
    box-sizing: border-box;
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #8b8d86;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-stage--booked .venkero-stage-dot {
    background: #c6f74a;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-stage--progress .venkero-stage-dot {
    background: #e0a33a;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-stage--review .venkero-stage-dot {
    background: #5b9bd5;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-stage--delivered .venkero-stage-dot {
    background: #4caf7d;
}

/* THE CARD. A lighter olive than the column, a subtle border, a small radius, and tight spacing. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-board-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-sizing: border-box;
    margin: 0;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #232820;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-board-card-head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-board-card-head .venkero-stage-dot {
    margin-top: 6px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-board-card-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-board-card-title a {
    color: var(--ink-strong, #f7f9f5);
    text-decoration: none;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-board-card-client {
    margin: 0;
    color: var(--ink-quiet, #989a95);
    font-size: 13px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-board-card-meta {
    margin: 0;
    color: var(--ink-quiet, #8e9089);
    font-size: 12px;
}

/* THE CARD MENU. Collapsed by default; the form inside is the one that was already on the card. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-card-menu {
    margin: 6px 0 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-card-menu > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    color: var(--ink-quiet, #989a95);
    font-size: 18px;
    line-height: 1;
    list-style: none;
    cursor: pointer;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-card-menu > summary::-webkit-details-marker {
    display: none;
}

/* Keyboard-only, as asked. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-card-menu > summary:focus-visible {
    outline: 2px solid var(--accent, #c6f74a);
    outline-offset: 2px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-card-menu[open] > summary {
    background: #161915;
    color: var(--ink-strong, #f7f9f5);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-card-menu-body {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(247, 249, 245, .07);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-card-menu-body select {
    max-width: 100%;
}

/* Below the desktop width the columns keep their own width and the board scrolls sideways. Nothing shrinks to fit, and
 * no project is hidden to make the row look tidy. */
@media (max-width: 1280px) {
    body.venkero-refined-page .venkero-app.venkero-shell .venkero-pipeline {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 240px;
        overflow-x: auto;
        padding-bottom: 6px;
    }
}

/* THE PIPELINE'S OWN BUTTON PLACEMENT. `.venkero-page-cta` sits at top:28px, the band the shell's top bar — the staging
 * badge and the bell — already occupies. Measured, its right edge reached x1562 against a badge starting at x1368. This
 * page's button moves to the heading row instead, below that bar, stated for this page only so the approved Projects
 * placement does not move with it. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-page-cta.venkero-pipeline-cta {
    top: 76px;
}

/* The reference's card radius. The shared card rule sets 12px; the board's cards are 10px, as the reference shows. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-pipeline > section.venkero-board-col .venkero-board-card {
    border-radius: 10px;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   PIPELINE CORRECTIONS: THE MENU, DENSITY, AND COLUMN BOTTOMS
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* EVERY COLUMN REACHES THE BUSIEST COLUMN'S HEIGHT, with the shared minimum still applying to a quiet board. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-pipeline {
    align-items: stretch;
}

/* `overflow-x: auto` is on the shared card rule to keep wide tables inside a card. It also clips a dropdown, so it is
 * released on the board's cards and their columns — and nowhere else. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-pipeline > section.venkero-board-col {
    overflow: visible;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-pipeline > section.venkero-board-col .venkero-board-card {
    position: relative;
    overflow: visible;
    padding: 12px;
    gap: 4px;
}

/* 11px between stacked cards, and the column keeps its own spacing. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-board-cards {
    gap: 11px;
}

/* THE METADATA ROW: client and date on the left, the menu at the right. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-board-card-foot {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-board-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* THE MENU. WordPress's admin stylesheet gives a summary a 1px white border; that is the bright ring Peter saw. It is
 * cleared here, and the click target stays a real 28px with the focus ring intact. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-card-menu {
    position: relative;
    flex: 0 0 auto;
    margin: 0 0 0 auto;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-card-menu > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ink-quiet, #8e9089);
    font-size: 16px;
    line-height: 1;
    list-style: none;
    cursor: pointer;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-card-menu > summary:hover {
    color: var(--ink-strong, #f7f9f5);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-card-menu[open] > summary {
    background: #161915;
    color: var(--ink-strong, #f7f9f5);
}

/* The form opens over the neighbouring cards, so the card's own height never changes. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-card-menu-body {
    position: absolute;
    right: 0;
    top: 34px;
    z-index: 20;
    width: 210px;
    margin: 0;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #1e221b;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .5);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-card-menu-body select {
    width: 100%;
    max-width: 100%;
}

/* The admin stylesheet gives a `summary` a min-height, so the menu measured 36x44 against the 28x28 it is set to. Both
 * ends stated, the same remedy the completion rings needed. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-card-menu > summary {
    width: 28px;
    min-width: 28px;
    max-width: 28px;
    height: 28px;
    min-height: 28px;
    max-height: 28px;
    padding: 0;
}

/* The shared card rule sets a margin-bottom of 12px. The board's own cards are spaced by the column's gap, so 11px became
 * 23px. Stated at the weight that already wins on this board. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-pipeline > section.venkero-board-col .venkero-board-card {
    margin: 0;
}

/* THE STAGE CELL IN THE PIPELINE LIST. The dot's size and its five colours are the board's own rules, matched here because
 * the colour class sits on the cell. Only the layout is new: a small gap and the label beside it, unchanged and readable. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-stage-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   THE WHOLE CARD OPENS ITS PROJECT
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════

   The title's own link is stretched over the card, so the card is clickable while the title stays the control the keyboard
   reaches. Nothing here adds a second link or a click handler: the pseudo-element belongs to the real anchor. */

body.venkero-refined-page .venkero-app.venkero-shell .venkero-pipeline > section.venkero-board-col .venkero-board-card-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 10px;
}

/* THE NESTED CONTROLS SIT ABOVE IT. The menu keeps its own click, and the stage selector and Move button inside it are
 * above the stretched link too, because they are inside the raised element. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-card-menu {
    position: relative;
    z-index: 2;
}

/* A HOVER AND FOCUS TREATMENT THAT SAYS "THIS CARD IS THE TARGET". */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-pipeline > section.venkero-board-col .venkero-board-card:hover {
    border-color: #3c4438;
    background: #262c23;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-board-card-link:hover {
    text-decoration: underline;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-board-card-link:focus-visible {
    outline: 2px solid #c6f74a;
    outline-offset: 3px;
    border-radius: 4px;
}

/* The card shows the focus too, so a keyboard user can see which card they are on while the title carries the ring. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-pipeline > section.venkero-board-col .venkero-board-card:has(.venkero-board-card-link:focus-visible) {
    border-color: var(--accent);
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   THE OVERVIEW AT NARROWER WIDTHS

   Every rule here answers the width the CONTENT has, not the width of the window. `container-type: inline-size` on the
   wrapper means the sidebar — and any Elementor column around it — is already subtracted before the layout decides.

   The wide layout above is untouched. These rules only take over at widths where the existing arrangement stops working,
   and they change how many columns there are and which line a date sits on. No text is hidden, and no type is shrunk.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

.venkero-app.venkero-shell .venkero-overview-fit {
    container-type: inline-size;
    container-name: overview;
}

.venkero-app.venkero-shell .venkero-overview-main {
    container-type: inline-size;
    container-name: overviewmain;
}

/* FEWER COLUMNS, DECIDED BY THE SPACE REMAINING. The rail stops being a column and goes UNDER the main cards well before
 * it would be squeezed — which is where Quick actions and Recent activity live. */
@container (max-width: 1080px) {
    .venkero-app.venkero-shell .venkero-overview {
        grid-template-columns: minmax(0, 1fr);
    }

    .venkero-app.venkero-shell .venkero-overview-rail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Below this the cards inside the main column stack too — tasks no longer sit beside the financial summary. */
@container (max-width: 900px) {
    .venkero-app.venkero-shell .venkero-pair,
    .venkero-app.venkero-shell .venkero-split {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ONE COLUMN OF EVERYTHING, which is also where the rail's two cards stop being side by side. */
@container (max-width: 640px) {
    .venkero-app.venkero-shell .venkero-overview-rail {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* THE FINANCIAL FIGURES SIZE THEMSELVES FROM THE SPACE THEY HAVE. The amount is a large figure — "$11,023.00" needs about
 * 160px at its own size — so a cell narrower than that spills into the next one. `auto-fit` with a readable minimum fits as
 * many columns as the space allows and collapses to one when only one will fit. It is a rule that adapts, not a fixed size:
 * the amount keeps its size, and the number of columns is what gives way. No step is hard-coded to a window width. */
.venkero-app.venkero-shell .venkero-metrics,
.venkero-app.venkero-shell.venkero-embed .venkero-metrics {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}

/* AN AMOUNT IS NEVER CUT, WRAPPED MID-FIGURE OR SHOWN WITH DOTS. It keeps its own line and its own size, and the column
 * it sits in is what gives way — which is what the steps above arrange. */
.venkero-app.venkero-shell .venkero-metric-amount {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: normal;
    font-variant-numeric: tabular-nums;
}

.venkero-app.venkero-shell .venkero-metric {
    min-width: 0;
}

/* ICONS AND COMPLETION CONTROLS KEEP THEIR SIZE. `flex: 0 0 auto` keeps them from being squeezed; the text beside them is
 * what gives way. */
.venkero-app.venkero-shell .venkero-task-ring,
.venkero-app.venkero-shell .venkero-task-caret,
.venkero-app.venkero-shell .venkero-activity-rows .venkero-avatar,
.venkero-app.venkero-shell .venkero-overview .venkero-thumb {
    flex: 0 0 auto;
}

/* A DATE OR A TIME MOVES BENEATH ITS TEXT RATHER THAN COMPRESSING IT. The row wraps, the label takes the line it needs,
 * and the date takes the next one when there is no room beside it. */
.venkero-app.venkero-shell .venkero-task-upcoming > li,
.venkero-app.venkero-shell .venkero-activity-rows > li,
.venkero-app.venkero-shell .venkero-overview .venkero-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 2px;
}

.venkero-app.venkero-shell .venkero-task-upcoming-title,
.venkero-app.venkero-shell .venkero-activity-rows > li > *:not(.venkero-when):not(.venkero-avatar) {
    flex: 1 1 14ch;
    min-width: 0;
}

.venkero-app.venkero-shell .venkero-task-upcoming-date,
.venkero-app.venkero-shell .venkero-activity-rows .venkero-when,
.venkero-app.venkero-shell .venkero-overview .venkero-when {
    flex: 0 0 auto;
    margin-left: auto;
    white-space: nowrap;
}

/* At the tightest widths a date under the text is clearer than a date crushed beside it. */
@container (max-width: 520px) {
    .venkero-app.venkero-shell .venkero-task-upcoming-title,
    .venkero-app.venkero-shell .venkero-activity-rows > li > *:not(.venkero-when):not(.venkero-avatar) {
        flex: 1 1 100%;
    }

    .venkero-app.venkero-shell .venkero-task-upcoming-date,
    .venkero-app.venkero-shell .venkero-activity-rows .venkero-when,
    .venkero-app.venkero-shell .venkero-overview .venkero-when {
        margin-left: 0;
    }
}

/* ELEMENTOR'S OWN WRAPPER IS THE CONTAINER ON THE LIVE OVERVIEW. Page 241 is an Elementor page, so each component is
 * inside `.elementor-widget-container` and NOT inside `.venkero-overview` — which belongs to the classic renderer. With
 * this, a component measures the column it was given, sidebar already excluded, and the queries above match there too.
 * Scoped to refined pages, so the public website's widgets are untouched. */
/* ELEMENTOR'S OWN WRAPPER IS THE CONTAINER ON THE PROTOTYPE PAGE. There the widget wrapper is the ANCESTOR of the app, not
 * a descendant — a descendant selector could never match it, which is why this uses `:has()`. Only wrappers that actually
 * contain the application are affected, so the public website's widgets are untouched. */
.elementor-widget-container:has(.venkero-app.venkero-shell) {
    container-type: inline-size;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   PAGE 241 — THE ELEMENTOR COLUMNS THEMSELVES

   Elementor's generated stylesheet puts every column width for this page inside one `@media (min-width: 768px)`: the main
   column at 70%, the rail at 30%, the paired cards at 50%. Above 768px none of it changes, so the rail stays beside the
   cards and the cards are left to shrink — at any window width, however narrow the content becomes.

   These rules target the columns, which is what actually holds that layout together. When the container the columns live in
   becomes too narrow, they stop being columns: each takes the full width, the rail falls below the main content, and the
   paired cards stack.

   `!important` is deliberate and narrowly used. Elementor's selectors carry three classes and this stylesheet is queued
   before Elementor's, so a width declaration of mine would otherwise lose the cascade and change nothing — which is exactly
   what happened before. Only widths and two paddings are forced, only for this page, only below these widths.

   `body:not(.elementor-editor-active)` keeps the editor out: Elementor's editing controls behave as they always did.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* The row the columns sit in is what gets measured, so the decision follows the space the page actually has — after the
 * sidebar, not the size of the window. */
.elementor-241 .elementor-container {
    container-type: inline-size;
}

/* Below this the columns stop being columns. Every column on the page takes the full width, which puts the rail — Quick
 * actions and Recent activity — beneath the main content and stacks the paired cards. */
@container (max-width: 1024px) {
    body:not(.elementor-editor-active) .elementor-241 .elementor-container {
        flex-wrap: wrap !important;
    }

    body:not(.elementor-editor-active) .elementor-241 .elementor-column {
        width: 100% !important;
    }
}

/* The 6px gaps between the main column and the rail only make sense while they are side by side; once stacked they become
 * a stray indent on one side. */
@container (max-width: 1024px) {
    body:not(.elementor-editor-active) .elementor-241 .elementor-element-ovwmain1 > .elementor-element-populated,
    body:not(.elementor-editor-active) .elementor-241 .elementor-element-ovwrail1 > .elementor-element-populated {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* THE FIGURES ADAPT TO THEIR OWN CARD. The financial card carries the metric grid; the grid fits as many columns as its own
 * width allows at a readable minimum, and collapses to one rather than letting two five-figure amounts meet. */
.elementor-241 .venkero-metrics,
.venkero-app.venkero-shell .venkero-metrics,
.venkero-app.venkero-shell.venkero-embed .venkero-metrics {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}

/* AN AMOUNT IS NEVER CUT, WRAPPED MID-FIGURE OR DOTTED, wherever it sits. */
.elementor-241 .venkero-metric-amount,
.venkero-app.venkero-shell .venkero-metric-amount {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: normal;
    font-variant-numeric: tabular-nums;
}

/* A DATE OR A TIMESTAMP SITS BENEATH ITS TEXT rather than colliding with it: the row wraps, the text takes the line it
 * needs, and the date follows it down. */
.elementor-241 .venkero-task-upcoming > li,
.elementor-241 .venkero-activity-rows > li,
.elementor-241 .venkero-overview .venkero-row,
.venkero-app.venkero-shell .venkero-task-upcoming > li,
.venkero-app.venkero-shell .venkero-activity-rows > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 2px;
}

.elementor-241 .venkero-task-ring,
.elementor-241 .venkero-task-caret,
.elementor-241 .venkero-activity-rows .venkero-avatar,
.venkero-app.venkero-shell .venkero-task-ring,
.venkero-app.venkero-shell .venkero-task-caret,
.venkero-app.venkero-shell .venkero-activity-rows .venkero-avatar {
    flex: 0 0 auto;
}

.elementor-241 .venkero-task-upcoming-title,
.elementor-241 .venkero-activity-rows > li > *:not(.venkero-when):not(.venkero-avatar),
.venkero-app.venkero-shell .venkero-task-upcoming-title,
.venkero-app.venkero-shell .venkero-activity-rows > li > *:not(.venkero-when):not(.venkero-avatar) {
    flex: 1 1 14ch;
    min-width: 0;
}

.elementor-241 .venkero-task-upcoming-date,
.elementor-241 .venkero-activity-rows .venkero-when,
.venkero-app.venkero-shell .venkero-task-upcoming-date,
.venkero-app.venkero-shell .venkero-activity-rows .venkero-when {
    flex: 0 0 auto;
    margin-left: auto;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   CLIENTS
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* THE BUTTON AT THE UPPER RIGHT, CLEAR OF THE STAGING BADGE AND THE BELL. The shared page-cta rule positions itself in the
 * same band as the shell's top bar, which is where those controls live — measured on the Pipeline pass — so this page sets
 * its own position on the heading row instead. */
.venkero-app.venkero-shell .venkero-clients-cta {
    position: absolute;
    top: 74px;
    right: 24px;
}

/* THE TOOLBAR: one subtle count on the left, the search and the one supported filter on the right. */
.venkero-app.venkero-shell .venkero-clients-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 16px;
}

.venkero-app.venkero-shell .venkero-clients-bar > p:first-child {
    margin: 0 auto 0 0;
}

.venkero-app.venkero-shell .venkero-clients-bar .venkero-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.venkero-app.venkero-shell .venkero-clients-bar .venkero-field {
    margin: 0;
}

.venkero-app.venkero-shell .venkero-clients-bar input[type="search"] {
    min-width: 220px;
    padding: 6px 10px;
}

.venkero-app.venkero-shell .venkero-clients-filters {
    display: flex;
    gap: 8px;
    margin: 0;
}

/* The same restrained chip the reference shows: a quiet outline, olive when off, lime when on. */
.venkero-app.venkero-shell .venkero-chip {
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 12.5px;
    text-decoration: none;
}

.venkero-app.venkero-shell .venkero-chip.is-on {
    border-color: var(--accent);
    color: var(--link, var(--accent));
}

/* THE TWO-THIRDS LIST AND ONE-THIRD PREVIEW, decided by the width the content has. */
.venkero-app.venkero-shell .venkero-clients-split {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    container-type: inline-size;
}

.venkero-app.venkero-shell .venkero-clients-list,
.venkero-app.venkero-shell .venkero-clients-preview {
    min-width: 0;
}

/* Narrower than this and two columns stop being readable: the preview moves below the list rather than being squeezed. */
@container (max-width: 820px) {
    .venkero-app.venkero-shell .venkero-clients-split {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* THE LIST. Compact rows, subtle separators, and a restrained highlight for the selected client. */
.venkero-app.venkero-shell .venkero-client-list {
    padding: 0;
    overflow: hidden;
}

.venkero-app.venkero-shell .venkero-client-table {
    margin: 0;
}

.venkero-app.venkero-shell .venkero-client-table th {
    padding: 12px 16px;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
}

.venkero-app.venkero-shell .venkero-client-table td {
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    vertical-align: middle;
}

.venkero-app.venkero-shell .venkero-client-table tbody tr:first-child td {
    border-top: 0;
}

.venkero-app.venkero-shell .venkero-client-row.is-selected {
    background: rgba(198, 247, 74, .06);
}

.venkero-app.venkero-shell .venkero-client-row.is-selected a {
    color: var(--ink-strong, #f7f9f5);
    font-weight: 600;
}

.venkero-app.venkero-shell .venkero-client-row a {
    text-decoration: none;
}

.venkero-app.venkero-shell .venkero-client-row a:hover {
    text-decoration: underline;
}

.venkero-app.venkero-shell .venkero-client-count {
    font-variant-numeric: tabular-nums;
}

/* THE PREVIEW. */
.venkero-app.venkero-shell .venkero-client-preview {
    padding: 16px;
}

.venkero-app.venkero-shell .venkero-client-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.venkero-app.venkero-shell .venkero-thumb-lg {
    width: 44px;
    height: 44px;
    font-size: 15px;
    flex: 0 0 auto;
}

.venkero-app.venkero-shell .venkero-client-name {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.venkero-app.venkero-shell .venkero-client-contact {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 12px;
    margin: 0 0 12px;
}

.venkero-app.venkero-shell .venkero-client-contact dt {
    color: var(--text-muted);
    font-size: 12.5px;
}

.venkero-app.venkero-shell .venkero-client-contact dd {
    margin: 0;
    font-size: 13.5px;
    overflow-wrap: anywhere;
}

.venkero-app.venkero-shell .venkero-client-status {
    margin: 0 0 14px;
}

.venkero-app.venkero-shell .venkero-client-sub {
    margin: 0 0 8px;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
}

.venkero-app.venkero-shell .venkero-client-projects {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.venkero-app.venkero-shell .venkero-client-projects li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 0;
    border-top: 1px solid var(--border);
}

.venkero-app.venkero-shell .venkero-client-projects li:first-child {
    border-top: 0;
}

.venkero-app.venkero-shell .venkero-client-projects a {
    flex: 1 1 auto;
    min-width: 0;
    text-decoration: none;
}

.venkero-app.venkero-shell .venkero-client-projects a:hover {
    text-decoration: underline;
}

.venkero-app.venkero-shell .venkero-client-projects .venkero-stage-dot {
    flex: 0 0 auto;
}

.venkero-app.venkero-shell .venkero-client-notes {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text);
}

.venkero-app.venkero-shell .venkero-client-awaiting {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   CLIENTS — CORRECTIONS
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* THE AVATAR IS AN AVATAR. Fixed size, circular, and it holds that size whatever the name does — so the initials sit in a
 * circle of their own with room before the name, instead of running into it. */
.venkero-app.venkero-shell .venkero-client-table .venkero-row-lead {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-client-table .venkero-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    min-width: 32px;
    max-width: 32px;
    height: 32px;
    min-height: 32px;
    max-height: 32px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .02em;
}

/* THE TOOLBAR ABOVE THE TABLE: one quiet count, then the search taking the room with its button beside it, and the filters
 * alongside — all at one height, with no empty stretches between them. */
.venkero-app.venkero-shell .venkero-clients-count {
    margin: 0 0 10px;
    font-size: 13px;
}

.venkero-app.venkero-shell .venkero-clients-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 14px;
}

.venkero-app.venkero-shell .venkero-clients-bar .venkero-search {
    display: flex;
    align-items: center;
    flex: 1 1 260px;
    gap: 8px;
    margin: 0;
    min-width: 0;
}

.venkero-app.venkero-shell .venkero-clients-bar .venkero-field {
    flex: 1 1 auto;
    margin: 0;
    min-width: 0;
}

.venkero-app.venkero-shell .venkero-clients-bar input[type="search"] {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0 12px;
}

.venkero-app.venkero-shell .venkero-clients-bar .button,
.venkero-app.venkero-shell .venkero-clients-bar .venkero-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 38px;
    padding: 0 14px;
    margin: 0;
    flex: 0 0 auto;
    font-size: 13.5px;
    line-height: 1;
    white-space: nowrap;
}

.venkero-app.venkero-shell .venkero-clients-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

/* TABLE HEADINGS IN SENTENCE CASE, AND ROOMIER ROWS. */
.venkero-app.venkero-shell .venkero-client-table th {
    padding: 14px 16px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-muted);
    white-space: nowrap;
}

.venkero-app.venkero-shell .venkero-client-table td {
    padding: 14px 16px;
    vertical-align: middle;
}

/* THE NAME LINK IS THE CLICK TARGET, AND ONLY WHAT IT COVERS IS CLICKABLE.
 *
 * This row used to stretch the name's link over the whole row with an `::after { inset: 0 }` overlay, so that a
 * click anywhere in the row selected that client. That overlay's containing block is the ROW, and a table row is
 * the one box whose positioning CSS engines have historically been permitted not to establish (CSS 2.1 left
 * `position` on table components undefined). The accepted screens never exposed it: the design also lived inside
 * WP-Admin, which supplies `#wpwrap { position: relative }` and `#wpcontent { position: relative }` as backstops.
 * The app route supplies no positioned ancestor above this row at all — and unlike WP-Admin, whose menu is hidden
 * on these screens, it has a real fixed sidebar for an escaped overlay to sit on top of.
 *
 * A row-shaped click surface cannot be built from boxes that are dependable everywhere: a table's only reliably
 * positionable containers are its cells, and a cell is not the row. So the overlay is removed rather than adjusted,
 * and rather than masked with a raised z-index on the navigation — that would hide the symptom while leaving the
 * overlay swallowing clicks wherever it does escape.
 *
 * WHAT REMAINS: the ordinary client-name link, which is the real control and always was — href, tab stop, the
 * `:focus-visible` ring below, and the row's hover and selected states are all untouched. What is gone is the
 * whole-row click area: clicking a row's whitespace no longer selects that client. Deliberate and reversible in
 * one line; the stylesheet as it was is in /root/venkero-backups/client-row-click-surface-20260927-210417/.
 */
.venkero-app.venkero-shell .venkero-client-row {
    position: relative;
}

.venkero-app.venkero-shell .venkero-client-row:hover {
    background: rgba(247, 249, 245, .025);
}

.venkero-app.venkero-shell .venkero-client-row .venkero-row-lead a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* THE ADD CLIENT FORM STAYS CLOSED UNTIL ASKED FOR. The checkbox is the state and the header label is the button — the same
 * reveal the shell's mobile menu uses, so it works with no JavaScript. The checkbox is kept focusable rather than hidden,
 * and the label shows the focus. */
.venkero-app.venkero-shell .venkero-add-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

/* The "add a new client" step inside the new-project form. The checkbox is the state, exactly as the Add Client
   dialog works, so the panel opens and closes with no script: the label opens it, the Cancel label closes it and
   submits nothing, and the project's own fields are untouched either way. */
.venkero-app.venkero-shell .venkero-new-client-panel {
    display: none;
}

.venkero-app.venkero-shell #venkero-new-client-toggle:checked ~ .venkero-new-client-panel {
    display: block;
}

.venkero-app.venkero-shell #venkero-new-client-toggle:checked ~ p .venkero-new-client-open {
    display: none;
}

.venkero-app.venkero-shell .venkero-new-client-cancel {
    cursor: pointer;
    margin-left: 0.75rem;
}

.venkero-app.venkero-shell .venkero-clients-cta label {
    cursor: pointer;
}

.venkero-app.venkero-shell:has(#venkero-add-client-toggle:focus-visible) .venkero-clients-cta label {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.venkero-app.venkero-shell .venkero-client-add {
    display: none;
}

.venkero-app.venkero-shell:has(#venkero-add-client-toggle:checked) .venkero-client-add {
    display: block;
}

/* Consistent widths and spacing inside the revealed form. */
.venkero-app.venkero-shell .venkero-client-add .venkero-field {
    display: block;
    margin: 0 0 12px;
}

.venkero-app.venkero-shell .venkero-client-add input[type="text"],
.venkero-app.venkero-shell .venkero-client-add input[type="email"] {
    box-sizing: border-box;
    width: 100%;
    max-width: 520px;
    height: 38px;
    padding: 0 12px;
}

.venkero-app.venkero-shell .venkero-client-add .button {
    height: 38px;
    padding: 0 16px;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   CLIENTS — REFINEMENTS
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* 1. THE TOOLBAR INSIDE THE LIST COLUMN. The search takes the room, its button follows, the filters come next — and the row
 * wraps on its own when the column gets narrow, rather than squeezing anything. */
.venkero-app.venkero-shell .venkero-clients-list .venkero-clients-bar {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.venkero-app.venkero-shell .venkero-clients-list .venkero-clients-bar .venkero-search {
    flex: 1 1 auto;
    min-width: 0;
}

.venkero-app.venkero-shell .venkero-clients-list .venkero-clients-bar .venkero-field {
    flex: 1 1 auto;
    min-width: 0;
}

.venkero-app.venkero-shell .venkero-clients-list .venkero-clients-bar input[type="search"] {
    min-width: 0;
}

.venkero-app.venkero-shell .venkero-clients-list .venkero-clients-filters {
    flex: 0 0 auto;
}

/* 2. THE PREVIEW'S OWN AVATAR: larger, circular, and it does not touch the compact table avatars. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-client-preview .venkero-client-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 64px;
    min-width: 64px;
    max-width: 64px;
    height: 64px;
    min-height: 64px;
    max-height: 64px;
    border-radius: 999px;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: .02em;
}

.venkero-app.venkero-shell .venkero-client-preview .venkero-client-profile {
    gap: 14px;
}

/* 4. SENTENCE-CASE SECTION HEADINGS WITH A SUBTLE SEPARATOR AND BALANCED SPACING. */
.venkero-app.venkero-shell .venkero-client-sub {
    margin: 18px 0 8px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink-strong, #f7f9f5);
}

.venkero-app.venkero-shell .venkero-client-contact dt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.venkero-app.venkero-shell .venkero-client-icon {
    flex: 0 0 auto;
    opacity: .7;
}

/* 4/6. THE PROJECT ROWS: the stage label stays quiet, the row breathes, and the dot carries the board's own colour. */
.venkero-app.venkero-shell .venkero-client-projects li {
    padding: 9px 0;
    gap: 10px;
}

.venkero-app.venkero-shell .venkero-client-projects .venkero-quiet {
    flex: 0 0 auto;
    font-size: 12.5px;
}

/* 5. THE ACTIVITY COLUMN UNDER ITS HEADING. The refined base rule right-aligns every table's last column and removes its right
 * padding, which is what put these values against the far edge. Stated for this table at the same weight, and the two metric
 * columns size to their content so the values begin where their heading begins. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-client-table th:last-child,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-client-table td:last-child {
    text-align: left;
    padding-right: 16px;
}

.venkero-app.venkero-shell .venkero-client-table th:nth-child(3),
.venkero-app.venkero-shell .venkero-client-table td:nth-child(3),
.venkero-app.venkero-shell .venkero-client-table th:nth-child(4),
.venkero-app.venkero-shell .venkero-client-table td:nth-child(4) {
    width: 1px;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   CLIENTS — THE TOOLBAR FILLS ITS ROW
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* THE SEARCH TAKES ALL THE ROOM THE FILTERS LEAVE. Stated together with the spacing, so the button sitting directly beside
 * the field and the gap before the filters are the same 10px rather than two different values that read as a gap.
 *
 * `max-width: none` matters: any inherited cap on the form, the label or the input would stop the field filling the space,
 * which is the whole point of this rule. The wrap happens on the field's own minimum — it moves to its own line before it
 * gets too short to type in, with the filters following, instead of everything squeezing. */
.venkero-app.venkero-shell .venkero-clients-list .venkero-clients-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.venkero-app.venkero-shell .venkero-clients-list .venkero-clients-bar .venkero-search {
    display: flex;
    align-items: center;
    /* A BASIS THAT LEAVES ROOM, NOT 0. Line breaking is decided from the items' hypothetical sizes BEFORE anything shrinks,
     * so a basis of 0 does not help: the field grows to the full leftover, the rounding on each item takes the total a
     * fraction past the container, and the whole filter group drops to the next line. With a 320px basis the line's
     * hypothetical size is 320 + 10 + holes ≈ 492px, comfortably inside the column, and the field then grows into what is
     * genuinely left. That is what lets the field fill the space AND keeps the filters beside it. */
    flex: 1 1 320px;
    gap: 10px;
    min-width: 240px;
    max-width: none;
    width: auto;
    margin: 0;
}

.venkero-app.venkero-shell .venkero-clients-list .venkero-clients-bar .venkero-field {
    /* BASIS 0, NOT auto. With an input inside that is itself `width: 100%`, a basis of `auto` is circular — the label is
     * sized from its content and its content is sized from the label — so the field demanded more room than it had and the
     * row overflowed. Basis 0 makes the label take exactly what the button and the gaps leave. */
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    margin: 0;
}

.venkero-app.venkero-shell .venkero-clients-list .venkero-clients-bar .venkero-field,
.venkero-app.venkero-shell .venkero-clients-list .venkero-clients-bar input[type="search"] {
    /* No spacing from the parts themselves: every gap in this row is the form's own 10px. */
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}

.venkero-app.venkero-shell .venkero-clients-list .venkero-clients-bar input[type="search"] {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: none;
}

.venkero-app.venkero-shell .venkero-clients-list .venkero-clients-bar .button {
    flex: 0 0 auto;
}

.venkero-app.venkero-shell .venkero-clients-list .venkero-clients-filters {
    /* Shrinkable by a hair, not by design: a row that comes to 607.4px in a 607px column would otherwise wrap the whole
     * filter group onto the next line over a rounding error. */
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
}

/* THE HIDDEN INPUTS ARE NOT CONTROLS. The search form carries two `type="hidden"` inputs for the page and the workspace, and
 * the stylesheet was letting them take part in the flex row: each one added the form's 10px gap, so the form held three gaps
 * instead of one and its content came to 456px inside the 436px the row gave it. That overflow is what pushed the filter
 * group onto a second line at every width — a row that is over by more than a rounding error cannot keep its last item.
 *
 * They are form state, not controls: they never show, never take focus, and must not take space or a gap. */
.venkero-app.venkero-shell .venkero-clients-bar .venkero-search input[type="hidden"] {
    display: none;
}

/* DETERMINISTIC, RATHER THAN HOPING THE ARITHMETIC LANDS.

 * Two things were fighting here. Line breaking is decided from the items' sizes BEFORE anything is allowed to shrink, so the
 * filter group being shrinkable never helps — if the row's contents come to a fraction more than the column, the filters go
 * to the next line regardless. And the field, growing into "whatever is left", lands a fraction over the column because each
 * item is rounded separately.
 *
 * So the row does not wrap at all while there is room, and the field shrinks to fit instead of tipping the filters off the
 * line. The wrap is then decided by the list's OWN width through a container query — not the window's, and not a sum of
 * widths that might round the wrong way — so the behaviour is the same whatever the sidebar or the window is doing. */
.venkero-app.venkero-shell .venkero-clients-list {
    container-type: inline-size;
    container-name: clients-list;
}

.venkero-app.venkero-shell .venkero-clients-list .venkero-clients-bar {
    flex-wrap: nowrap;
}

.venkero-app.venkero-shell .venkero-clients-list .venkero-clients-bar .venkero-search {
    flex: 1 1 320px;
    min-width: 200px;
}

.venkero-app.venkero-shell .venkero-clients-list .venkero-clients-filters {
    flex: 0 0 auto;
}

/* Too narrow for the field and the filters side by side: the search takes its own line and the filters follow it, which is
 * the neat wrap. Below this the field would be too short to type in. */
@container clients-list (max-width: 430px) {
    .venkero-app.venkero-shell .venkero-clients-list .venkero-clients-bar {
        flex-wrap: wrap;
    }

    .venkero-app.venkero-shell .venkero-clients-list .venkero-clients-bar .venkero-search {
        flex: 1 1 100%;
    }
}

/* ONE CONTROL HEIGHT, ONE ROW. The label wrapping the search field is an inline element, so its line box added leading above
 * and below the 38px control and the toolbar row came out 60px tall. Laying the label out as a flex box removes the leading:
 * the row is then the height of its controls and nothing more. */
.venkero-app.venkero-shell .venkero-clients-list .venkero-clients-bar .venkero-field {
    display: flex;
    align-items: center;
}

.venkero-app.venkero-shell .venkero-clients-list .venkero-clients-bar .venkero-search,
.venkero-app.venkero-shell .venkero-clients-list .venkero-clients-bar .venkero-clients-filters {
    line-height: 1;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   CLIENTS — PROJECT CARDS, AND HOVER THAT IS NOT SELECTION
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* THE PROJECT CARDS. The stage dot and its colour come from the board's own rules, which apply on a refined page — this only
 * gives them a card to sit in. */
.venkero-app.venkero-shell .venkero-client-projects li.venkero-project-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(247, 249, 245, .015);
}

.venkero-app.venkero-shell .venkero-client-projects li.venkero-project-card:last-child {
    margin-bottom: 0;
}

/* The title's own link covers the card. One control, and the keyboard reaches it. */
.venkero-app.venkero-shell .venkero-project-card .venkero-project-card-link {
    flex: 1 1 auto;
    min-width: 0;
    text-decoration: none;
}

.venkero-app.venkero-shell .venkero-project-card .venkero-project-card-link::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

/* Clear hover, and a focus ring on the card rather than a thin outline around the words. */
.venkero-app.venkero-shell .venkero-project-card:hover {
    border-color: rgba(198, 247, 74, .35);
    background: rgba(198, 247, 74, .04);
}

.venkero-app.venkero-shell .venkero-project-card:has(.venkero-project-card-link:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.venkero-app.venkero-shell .venkero-project-card .venkero-project-card-link:focus-visible {
    outline: none;
}

.venkero-app.venkero-shell .venkero-card-chevron {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--text-muted);
    opacity: .8;
}

.venkero-app.venkero-shell .venkero-project-card:hover .venkero-card-chevron {
    color: var(--link, var(--accent));
    opacity: 1;
}

/* HOVER IS NOT SELECTION. The selected row holds its olive highlight — on hover too, so it never flickers into looking
 * unselected — and every other row's hover is fainter than that highlight. */
.venkero-app.venkero-shell .venkero-client-row.is-selected,
.venkero-app.venkero-shell .venkero-client-row.is-selected:hover {
    background: rgba(198, 247, 74, .06);
}

.venkero-app.venkero-shell .venkero-client-row:not(.is-selected):hover {
    background: rgba(247, 249, 245, .012);
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   CLIENTS — THE ADD CLIENT DIALOG
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* Closed by default, opened by the header control's checkbox. No script is needed for either. */
.venkero-app.venkero-shell .venkero-clients-modal {
    display: none;
}

.venkero-app.venkero-shell:has(#venkero-add-client-toggle:checked) .venkero-clients-modal {
    display: grid;
    position: fixed;
    inset: 0;
    z-index: 100;
    place-items: center;
    padding: 20px;
}

/* THE DIMMED BACKDROP, and it closes: it is a label for the same checkbox. */
.venkero-app.venkero-shell .venkero-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 10, 7, .62);
    cursor: pointer;
}

/* THE DIALOG: the approved dark olive surface, the subtle border, a responsive width, and its own scrolling when the
 * contents are taller than the space available. */
.venkero-app.venkero-shell .venkero-modal-dialog {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: min(560px, 100%);
    max-height: min(80vh, 720px);
    overflow: auto;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .55);
}

.venkero-app.venkero-shell .venkero-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 16px;
}

.venkero-app.venkero-shell .venkero-modal-head h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 600;
    color: var(--ink-strong, #f7f9f5);
}

.venkero-app.venkero-shell .venkero-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    cursor: pointer;
}

.venkero-app.venkero-shell .venkero-modal-close:hover {
    border-color: rgba(198, 247, 74, .35);
    color: var(--ink-strong, #f7f9f5);
}

.venkero-app.venkero-shell .venkero-modal-close-mark {
    font-size: 19px;
    line-height: 1;
}

/* TWO TO A ROW: name and company, then email and phone. One column when the window is narrow. */
.venkero-app.venkero-shell .venkero-client-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 14px;
}

.venkero-app.venkero-shell .venkero-client-grid .venkero-field {
    display: block;
    margin: 0;
}

.venkero-app.venkero-shell .venkero-client-grid input[type="text"],
.venkero-app.venkero-shell .venkero-client-grid input[type="email"] {
    box-sizing: border-box;
    width: 100%;
}

/* THE ACTIONS: the lime submit, and a quiet Cancel that cannot submit anything. */
.venkero-app.venkero-shell .venkero-modal-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 18px 0 0;
}

.venkero-app.venkero-shell .venkero-modal-cancel {
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-muted);
    font-size: 13.5px;
    cursor: pointer;
}

.venkero-app.venkero-shell .venkero-modal-cancel:hover {
    color: var(--ink-strong, #f7f9f5);
    text-decoration: underline;
}

/* THE LAYER'S REFUSAL, shown where the form is. */
.venkero-app.venkero-shell .venkero-modal-error {
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid rgba(216, 140, 120, .45);
    border-radius: 8px;
    background: rgba(216, 140, 120, .08);
    color: #f0d9d2;
    font-size: 13.5px;
}

/* A visible focus ring everywhere inside the dialog, including on the buttons and the close control. */
.venkero-app.venkero-shell .venkero-clients-modal :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@media (max-width: 520px) {
    .venkero-app.venkero-shell .venkero-client-grid {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   CALENDAR
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* THE ONE ACTION, on the heading row so it cannot reach the badge or the bell — the same position the Pipeline and Clients
 * pages use, and the same reason. */
.venkero-app.venkero-shell .venkero-calendar-cta {
    position: absolute;
    top: 74px;
    right: 24px;
}

/* ── THE BAR: month navigation, the count, the views and the feed in one row, with the blank band gone ───────────────── */
.venkero-app.venkero-shell .venkero-calendar-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 14px;
}

.venkero-app.venkero-shell .venkero-cal-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.venkero-app.venkero-shell .venkero-nav-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--navigation-muted, var(--text-muted));
    font-size: 17px;
    line-height: 1;
    text-decoration: none;
}

.venkero-app.venkero-shell .venkero-nav-arrow:hover {
    border-color: rgba(198, 247, 74, .35);
    color: var(--ink-strong, #f7f9f5);
}

.venkero-app.venkero-shell .venkero-cal-month {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--ink-strong, #f7f9f5);
    white-space: nowrap;
}

.venkero-app.venkero-shell .venkero-cal-today {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 13px;
    text-decoration: none;
}

.venkero-app.venkero-shell .venkero-cal-today:hover {
    border-color: rgba(198, 247, 74, .35);
    color: var(--ink-strong, #f7f9f5);
}

.venkero-app.venkero-shell .venkero-cal-count {
    margin: 0;
    font-size: 12.5px;
}

/* The views and the feed take the right-hand side and stay together there. */
.venkero-app.venkero-shell .venkero-cal-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-left: auto;
}

.venkero-app.venkero-shell .venkero-calendar-bar .venkero-button {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 13px;
    text-decoration: none;
}

.venkero-app.venkero-shell .venkero-calendar-bar .venkero-button.is-current {
    border-color: var(--accent);
    color: var(--link, var(--accent));
}

.venkero-app.venkero-shell .venkero-calendar-bar .venkero-feed > summary.button {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: 34px;
    padding: 0 12px;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 13px;
}

/* ── THE FILTERS AS COMPACT CHIPS, the same shape the Clients page uses ───────────────────────────────────────────────── */
.venkero-app.venkero-shell .venkero-calendar .venkero-chips,
.venkero-app.venkero-shell .venkero-calendar-layout + .venkero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
}

/* ── THE LAYOUT: the month and the Upcoming panel, side by side while there is room ──────────────────────────────────── */
.venkero-app.venkero-shell .venkero-calendar-layout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    container-type: inline-size;
    container-name: venkero-calendar;
}

/* Not enough room for both without either becoming cramped: the panel moves below the grid. */
@container venkero-calendar (max-width: 900px) {
    .venkero-app.venkero-shell .venkero-calendar-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

.venkero-app.venkero-shell .venkero-calendar {
    padding: 0;
    overflow: hidden;
}

/* ── THE MONTH GRID: Monday first, subtle borders, readable numbers, muted adjacent days ─────────────────────────────── */
.venkero-app.venkero-shell .venkero-grid-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin: 0;
}

.venkero-app.venkero-shell .venkero-grid-table th {
    padding: 12px 10px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-muted);
    text-align: left;
}

.venkero-app.venkero-shell .venkero-grid-table td.venkero-day {
    width: 14.28%;
    height: 108px;
    padding: 6px;
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
    vertical-align: top;
    overflow: hidden;
}

.venkero-app.venkero-shell .venkero-grid-table td.venkero-day:first-child {
    border-left: 0;
}

.venkero-app.venkero-shell .venkero-day-num {
    display: block;
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-strong, #f7f9f5);
}

/* Days that belong to the neighbouring month are muted rather than blank, so a week reads as a week. */
.venkero-app.venkero-shell .venkero-grid-table td.venkero-day.is-outside .venkero-day-num,
.venkero-app.venkero-shell .venkero-grid-table td.venkero-day.is-outside {
    color: rgba(142, 144, 137, .55);
}

/* TODAY IS CLEARLY DISTINGUISHED: a lime number and a filled dot behind it, not a colour wash over the whole cell. */
.venkero-app.venkero-shell .venkero-grid-table td.venkero-day.is-today .venkero-day-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--accent);
    color: rgb(13, 16, 11);
}

/* ── THE EVENT CARDS ─────────────────────────────────────────────────────────────────────────────────────────────────── */
.venkero-app.venkero-shell .venkero-event {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 3px;
    padding: 4px 6px;
    border: 1px solid transparent;
    border-radius: 7px;
    text-decoration: none;
    overflow: hidden;
}

.venkero-app.venkero-shell .venkero-event-dot {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    margin-top: 5px;
    border-radius: 999px;
    background: currentColor;
}

.venkero-app.venkero-shell .venkero-event-body {
    min-width: 0;
    display: block;
}

.venkero-app.venkero-shell .venkero-event-title {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.venkero-app.venkero-shell .venkero-event-meta {
    display: block;
    font-size: 10.5px;
    line-height: 1.3;
    color: var(--text-muted);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.venkero-app.venkero-shell .venkero-event:hover {
    border-color: currentColor;
}

/* ONE COLOUR PER CATEGORY, used by the grid, the Upcoming panel and the Agenda from the record's own kind. */
.venkero-app.venkero-shell .venkero-event--events,
.venkero-app.venkero-shell .venkero-upcoming-item.venkero-event--events {
    color: var(--link, var(--accent));
    background: rgba(198, 247, 74, .09);
}

.venkero-app.venkero-shell .venkero-event--projects,
.venkero-app.venkero-shell .venkero-upcoming-item.venkero-event--projects {
    color: #6fa8dc;
    background: rgba(111, 168, 220, .10);
}

.venkero-app.venkero-shell .venkero-event--tasks,
.venkero-app.venkero-shell .venkero-upcoming-item.venkero-event--tasks {
    color: #d8c65a;
    background: rgba(216, 198, 90, .10);
}

.venkero-app.venkero-shell .venkero-event--invoices,
.venkero-app.venkero-shell .venkero-upcoming-item.venkero-event--invoices {
    color: #e0987a;
    background: rgba(224, 152, 122, .10);
}

.venkero-app.venkero-shell .venkero-event-title {
    color: var(--ink-strong, #f7f9f5);
}

/* ── THE UPCOMING PANEL ──────────────────────────────────────────────────────────────────────────────────────────────── */
.venkero-app.venkero-shell .venkero-upcoming {
    box-sizing: border-box;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.venkero-app.venkero-shell .venkero-upcoming-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 12px;
}

.venkero-app.venkero-shell .venkero-upcoming-head h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-strong, #f7f9f5);
}

.venkero-app.venkero-shell .venkero-upcoming-all {
    font-size: 12.5px;
    color: var(--text-muted);
    text-decoration: none;
}

.venkero-app.venkero-shell .venkero-upcoming-all:hover {
    color: var(--link, var(--accent));
}

.venkero-app.venkero-shell .venkero-upcoming-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.venkero-app.venkero-shell .venkero-upcoming-item {
    margin: 0 0 6px;
    border-radius: 9px;
}

.venkero-app.venkero-shell .venkero-upcoming-item a {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px;
    text-decoration: none;
}

.venkero-app.venkero-shell .venkero-upcoming-item:hover {
    border-color: currentColor;
}

.venkero-app.venkero-shell .venkero-upcoming-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    padding: 5px 0;
    border-right: 1px solid var(--border);
}

.venkero-app.venkero-shell .venkero-upcoming-month {
    font-size: 10px;
    letter-spacing: .05em;
    color: var(--text-muted);
}

.venkero-app.venkero-shell .venkero-upcoming-day {
    font-size: 16px;
    font-weight: 600;
    color: var(--ink-strong, #f7f9f5);
}

.venkero-app.venkero-shell .venkero-upcoming-body {
    min-width: 0;
}

.venkero-app.venkero-shell .venkero-upcoming-title {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-strong, #f7f9f5);
}

.venkero-app.venkero-shell .venkero-upcoming-meta {
    display: block;
    font-size: 11.5px;
    color: var(--text-muted);
}

.venkero-app.venkero-shell .venkero-upcoming-zone {
    margin: 12px 0 0;
    font-size: 11.5px;
}

/* ── SEVEN READABLE DAY COLUMNS, WITH THE GRID SCROLLING IN ITS OWN CARD WHEN THERE IS NOT ROOM ───────────────────────── */
@container venkero-calendar (max-width: 720px) {
    .venkero-app.venkero-shell .venkero-calendar {
        overflow-x: auto;
    }

    .venkero-app.venkero-shell .venkero-grid-table {
        min-width: 640px;
    }
}

/* ── THE AGENDA ──────────────────────────────────────────────────────────────────────────────────────────────────────── */
.venkero-app.venkero-shell .venkero-agenda-day {
    margin: 0 0 6px;
    padding: 14px 0 0;
    border-top: 1px solid var(--border);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-strong, #f7f9f5);
}

.venkero-app.venkero-shell .venkero-agenda-day:first-child {
    padding-top: 0;
    border-top: 0;
}

.venkero-app.venkero-shell .venkero-agenda-row td {
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    vertical-align: middle;
}

.venkero-app.venkero-shell .venkero-agenda-row .venkero-event-dot {
    display: inline-block;
    margin-right: 8px;
}

.venkero-app.venkero-shell .venkero-agenda-time {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
}

.venkero-app.venkero-shell .venkero-agenda-actions .button {
    height: 30px;
    padding: 0 10px;
    font-size: 12.5px;
}

/* ── THE NEW EVENT DIALOG ────────────────────────────────────────────────────────────────────────────────────────────── */
.venkero-app.venkero-shell .venkero-calendar-modal {
    display: none;
}

.venkero-app.venkero-shell:has(#venkero-new-event-toggle:checked) .venkero-calendar-modal,
.venkero-app.venkero-shell [data-venkero-dialog-open="true"] .venkero-calendar-modal {
    display: grid;
    position: fixed;
    inset: 0;
    z-index: 100;
    place-items: center;
    padding: 20px;
}

.venkero-app.venkero-shell .venkero-calendar-modal .venkero-modal-dialog {
    width: min(520px, 100%);
    max-height: min(84vh, 760px);
    overflow: auto;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .55);
}

.venkero-app.venkero-shell .venkero-calendar-modal .venkero-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 10, 7, .62);
}

.venkero-app.venkero-shell .venkero-calendar-modal .venkero-modal-dialog > * + * {
    margin-top: 12px;
}

/* Date and time inputs on the olive surface, consistently sized. */
.venkero-app.venkero-shell .venkero-calendar-modal input[type="date"],
.venkero-app.venkero-shell .venkero-calendar-modal input[type="time"],
.venkero-app.venkero-shell .venkero-calendar-modal input[type="text"],
.venkero-app.venkero-shell .venkero-calendar-modal input[type="number"],
.venkero-app.venkero-shell .venkero-calendar-modal select,
.venkero-app.venkero-shell .venkero-calendar-modal textarea {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(247, 249, 245, .03);
    color: var(--ink-strong, #f7f9f5);
}

.venkero-app.venkero-shell .venkero-calendar-modal textarea {
    height: auto;
    min-height: 76px;
    padding: 8px 10px;
}

/* Two to a row where there is room, one when there is not. */
.venkero-app.venkero-shell .venkero-calendar-modal .venkero-client-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 14px;
}

@media (max-width: 520px) {
    .venkero-app.venkero-shell .venkero-calendar-modal .venkero-client-grid {
        grid-template-columns: 1fr;
    }
}

.venkero-app.venkero-shell .venkero-calendar-modal .venkero-modal-error {
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid rgba(216, 140, 120, .45);
    border-radius: 8px;
    background: rgba(216, 140, 120, .08);
    color: #f0d9d2;
    font-size: 13px;
}

.venkero-app.venkero-shell .venkero-calendar-modal :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   CALENDAR — RE-APPLIED
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

.venkero-app.venkero-shell .venkero-calendar-frame {
    container-type: inline-size;
    container-name: venkero-cal-frame;
}

.venkero-app.venkero-shell .venkero-calendar-layout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.venkero-app.venkero-shell .venkero-calendar-layout > .venkero-calendar,
.venkero-app.venkero-shell .venkero-calendar-layout > .venkero-upcoming {
    min-width: 0;
}

/* 780px, not 980: the calendar column at a normal window is only 929px wide, so a higher threshold stacked the panel at
 * ordinary desktop widths — which is the empty space the reference does not have. Below 780 the grid's seven columns are
 * the thing that would suffer, so that is where the panel moves down. */
@container venkero-cal-frame (max-width: 780px) {
    .venkero-app.venkero-shell .venkero-calendar-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── UPCOMING: neutral surface, solid readable dots ─────────────────────────────────────────────────────────────────── */
.venkero-app.venkero-shell .venkero-upcoming-item {
    margin: 0;
    border-radius: 0;
    border-top: 1px solid var(--border);
    background: none;
}

.venkero-app.venkero-shell .venkero-upcoming-item:first-child {
    border-top: 0;
}

.venkero-app.venkero-shell .venkero-upcoming-item a {
    padding: 10px 2px;
}

/* SOLID, NOT A TINT. The dot was inheriting the translucent category background meant for chips, which at 9% is invisible. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-upcoming-item .venkero-event-dot,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-agenda-item .venkero-event-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin: 0 8px 0 0;
    border: 0;
    border-radius: 999px;
    background: currentColor;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-event-dot.venkero-event--events { color: var(--accent); background: #c6f74a; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-event-dot.venkero-event--projects { color: #6fa8dc; background: #6fa8dc; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-event-dot.venkero-event--tasks { color: #d8c65a; background: #d8c65a; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-event-dot.venkero-event--invoices { color: #e0987a; background: #e0987a; }

.venkero-app.venkero-shell .venkero-upcoming-meta {
    padding-left: 16px;
}

/* ── THE TWO-LINE TITLE, at the weight the refined defaults use so it cannot lose ────────────────────────────────────── */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-event-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    overflow-wrap: anywhere;
    max-height: 2.6em;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-event {
    align-items: flex-start;
    height: auto;
}

/* CONSISTENT WEEK ROWS.
 *
 * `min-height` DOES NOTHING ON A TABLE CELL — that is why the empty first week collapsed to a 37px strip while the populated
 * weeks ran to 150. A cell's `height` is the one that acts as a minimum, and a row takes the tallest cell in it. So the row
 * height is stated once, sized from what the busiest day actually holds: the day number plus two event cards, which measure
 * 20px and 54px each. 152px covers that with a little room.
 *
 * It is a floor, not a clamp: a day carrying more than the busiest day today makes its row taller, so nothing is ever clipped
 * and no event is hidden to make the grid tidy. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-grid-table tbody tr,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-grid-table td.venkero-day {
    height: 152px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-grid-table td.venkero-day {
    vertical-align: top;
}

/* ── THE AGENDA: a tile that is actually a tile, and neutral rows ────────────────────────────────────────────────────── */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-agenda {
    padding: 16px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-agenda-group {
    margin: 0 0 18px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-agenda-group:last-child {
    margin-bottom: 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-agenda-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* THE TILE: a flex column so the month sits ABOVE the day rather than running into it as "SEP24". */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-agenda-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 46px;
    padding: 5px 0;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: rgba(247, 249, 245, .03);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-agenda-tile-month {
    display: block;
    font-size: 10px;
    line-height: 1.2;
    letter-spacing: .06em;
    color: var(--text-muted);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-agenda-tile-day {
    display: block;
    font-size: 16px;
    line-height: 1.15;
    font-weight: 600;
    color: var(--ink-strong, #f7f9f5);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-agenda-date {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-strong, #f7f9f5);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-agenda-list {
    margin: 8px 0 0;
    padding: 0 0 0 58px;
    list-style: none;
}

/* DISTINCT ROWS: the dot, then the text block, then the actions pushed to the right. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-agenda-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 0;
    border-top: 1px solid var(--border);
    background: none;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-agenda-item:first-child {
    border-top: 0;
    padding-top: 2px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-agenda-item .venkero-event-dot {
    margin-top: 6px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-agenda-body {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-agenda-title {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink-strong, #f7f9f5);
    text-decoration: none;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-agenda-title:hover {
    text-decoration: underline;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-agenda-meta {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--text-muted);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-agenda-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin-left: auto;
    padding-left: 12px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-agenda-actions .button,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-agenda-actions .venkero-inline-link {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    font-size: 12px;
    line-height: 1;
}

/* ── THE FEED: a centred dialog, written without a child combinator so a nested panel cannot be missed ───────────────── */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-feed[open]::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 99;
    background: rgba(8, 10, 7, .62);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-feed[open] .venkero-feed-panel {
    position: fixed !important;
    z-index: 100;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    width: min(520px, calc(100vw - 40px));
    max-height: min(84vh, 760px);
    overflow: auto;
    margin: 0;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .55);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-feed[open] .venkero-feed-panel p:first-child strong {
    font-size: 16px;
    color: var(--ink-strong, #f7f9f5);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-feed[open] .venkero-feed-url {
    display: block;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(0, 0, 0, .25);
    font-size: 12px;
    overflow-wrap: anywhere;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-feed-close {
    display: flex;
    justify-content: flex-end;
    margin: 18px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   NEW EVENT DIALOG — PRESENTATION
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* TIGHTER, AND NOT DOUBLY PADDED. The dialog keeps its own padding; the form contributes none of its own. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-calendar-modal .venkero-modal-dialog {
    padding: 18px 20px 16px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-calendar-modal .venkero-event-form {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

/* ONE HEADING, AND NO SECOND REVEAL CONTROL: the old card and its <summary> are gone from the markup, and the dialog's own
 * heading is the only one. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-calendar-modal .venkero-event-form > label,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-calendar-modal .venkero-event-times > label {
    display: block;
    margin: 0 0 12px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-calendar-modal .venkero-field-label {
    display: block;
    margin: 0 0 5px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-muted);
}

/* FULL WIDTH WHERE THE FIELD IS THE WHOLE ROW.
 *
 * `min-height` IS NOT OPTIONAL HERE, AND LEAVE IT OUT AND THE DIALOG HAS TWO CONTROL HEIGHTS. The shared component rule
 * `.venkero-app input[type="text"], …input[type="date"], … select, … textarea` sets `min-height: var(--target)` — 44px,
 * "the smallest an interactive control may be" — and `min-height` beats `height` however specific the `height` is. So the
 * title, the date and the project rendered at 44px while the two time fields rendered at 38px, because the shared selector
 * list happens not to name `input[type="time"]`. Stating the floor here is what makes the height below take effect; 38px is
 * declared WITH `min-height` everywhere else in this stylesheet where it is meant to hold. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-calendar-modal .venkero-event-form input[type="text"],
body.venkero-refined-page .venkero-app.venkero-shell .venkero-calendar-modal .venkero-event-form input[type="date"],
body.venkero-refined-page .venkero-app.venkero-shell .venkero-calendar-modal .venkero-event-form select {
    box-sizing: border-box;
    width: 100%;
    height: 38px;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(247, 249, 245, .03);
    color: var(--ink-strong, #f7f9f5);
}

/* START AND END TOGETHER, STACKED WHEN THE WINDOW IS NARROW. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-calendar-modal .venkero-event-times {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-calendar-modal .venkero-event-times input[type="time"] {
    box-sizing: border-box;
    width: 100%;
    height: 38px;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(247, 249, 245, .03);
    color: var(--ink-strong, #f7f9f5);
}

@media (max-width: 520px) {
    body.venkero-refined-page .venkero-app.venkero-shell .venkero-calendar-modal .venkero-event-times {
        grid-template-columns: 1fr;
    }
}

/* THE ALL-DAY RULE AND THE TIMEZONE: quiet, small, and out of the way of the fields. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-calendar-modal .venkero-event-hint,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-calendar-modal .venkero-event-zone {
    margin: -4px 0 12px;
    font-size: 12px;
    line-height: 1.4;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-calendar-modal .venkero-event-zone {
    margin-bottom: 14px;
}

/* ONE ACTION ROW: the lime submit, and a Cancel that is quiet and cannot submit. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-calendar-modal .venkero-event-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 4px 0 0;
}

/* Same `min-height` reason as the fields above: the shared button rule carries `min-height: var(--target)` — 44px — which
 * wins over this `height`. Without it the lime button stood 6px taller than the Cancel sitting beside it in the same row. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-calendar-modal .venkero-event-actions .button {
    height: 38px;
    min-height: 38px;
    padding: 0 18px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-calendar-modal .venkero-event-cancel {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 4px;
    color: var(--text-muted);
    font-size: 13.5px;
    cursor: pointer;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-calendar-modal .venkero-event-cancel:hover {
    color: var(--ink-strong, #f7f9f5);
    text-decoration: underline;
}

/* The error stays inside, above the fields. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-calendar-modal .venkero-modal-error {
    margin: 0 0 14px;
}

/* THE LABEL WAS THE CAP. `.venkero-app .venkero-field` sets `max-width: 340px`, so every field in the dialog was 340px wide
 * however wide the dialog was — the input inside a 340px label can only be 324px. The field's own cap is lifted here for this
 * dialog, which is what makes the title, the date, the two time fields and the project actually fill the row. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-calendar-modal .venkero-event-form .venkero-field,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-calendar-modal .venkero-event-form > label,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-calendar-modal .venkero-event-times > label {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    display: block;
    /* THE 8px WAS THE OTHER HALF OF "NOT FULL WIDTH". The base `.venkero-field` carries `padding: 8px`, so the label box
     * filled the row while the input inside it did not: title, date and project sat 8px in from the left edge, while the
     * action row below them sat flush at that same edge. Zeroed here, the fields and the action row now share one left edge,
     * which is what "full width" means in a dialog whose heading and buttons are already flush. */
    padding: 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-calendar-modal .venkero-event-times {
    width: 100%;
    max-width: none;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-calendar-modal .venkero-event-form input[type="text"],
body.venkero-refined-page .venkero-app.venkero-shell .venkero-calendar-modal .venkero-event-form input[type="date"],
body.venkero-refined-page .venkero-app.venkero-shell .venkero-calendar-modal .venkero-event-form input[type="time"],
body.venkero-refined-page .venkero-app.venkero-shell .venkero-calendar-modal .venkero-event-form select {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════
   TEMPLATES — the library and its editor.

   Added 2026-09-23 with the Templates pass. Tokens only; no invented colours. The composition is the
   reference's: the library on the left, the editor on the right, stacked below 1100px so the editor is
   never squeezed into a column too narrow to write in.

   Scoped to `.venkero-tmpl`, which exists on one screen only, so none of this reaches another page.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════ */

.venkero-app.venkero-shell .venkero-tmpl {
    margin-top: 18px;
}

/* TWO COLUMNS ONLY WHILE AN EDITOR IS OPEN. With none open the library has the whole width, instead of half the
   page being held for a card nobody is reading. 560px is the editor's width: measured at 440 it could not fit a
   task name beside its own controls. */
.venkero-app.venkero-shell .venkero-tmpl--editing {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
    gap: 22px;
    align-items: start;
}

/* The header holds the one creation action, and keeps holding it while an editor is open. */
.venkero-app.venkero-shell .venkero-heading.venkero-tmpl-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 18px;
}

.venkero-app.venkero-shell .venkero-tmpl-create {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    flex: 0 0 auto;
}

.venkero-app.venkero-shell .venkero-tmpl-heading > div {
    min-width: 0;
}

.venkero-app.venkero-shell .venkero-tmpl-library,
.venkero-app.venkero-shell .venkero-tmpl-editor {
    min-width: 0;
}

/* ── the list of saved templates ────────────────────────────────────────────────────────────────────── */

.venkero-app.venkero-shell .venkero-tmpl-list {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.venkero-app.venkero-shell .venkero-tmpl-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    padding: 12px 16px;
    margin: 0;
}

/* TITLE AND THE REAL COUNT ON ONE LINE. The kind is not repeated: the tab says which half of the library this
   is, and a second badge saying the same thing only makes the card taller. */
.venkero-app.venkero-shell .venkero-tmpl-card-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-bottom: 6px;
}

.venkero-app.venkero-shell .venkero-tmpl-count {
    color: var(--text-muted);
    font-size: 13.5px;
}

.venkero-app.venkero-shell .venkero-tmpl-stage {
    margin: 0 0 6px;
    font-size: 13.5px;
}

/* SELECTED: the card being edited is marked by its border and a soft wash, not by colour alone — the
   weight of the title carries it too, so the state survives a custom accent. */
.venkero-app.venkero-shell .venkero-tmpl-card.is-selected {
    border-color: var(--accent);
    background: var(--surface-soft);
}

.venkero-app.venkero-shell .venkero-tmpl-card-title {
    margin: 0;
    font-size: 16px;
    font-weight: 550;
    letter-spacing: -0.01em;
}

.venkero-app.venkero-shell .venkero-tmpl-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    font-size: 14px;
}

.venkero-app.venkero-shell .venkero-tmpl-meta .venkero-pill {
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12.5px;
    font-weight: 550;
    line-height: 1.5;
}

.venkero-app.venkero-shell .venkero-tmpl-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 16px;
}

/* RESTRAINED, BUT STILL A FULL-SIZE TARGET: quiet text with no button chrome, 44px tall, underlined on hover and
   on keyboard focus so it still reads as something you can press. */
.venkero-app.venkero-shell .venkero-tmpl-card-action,
.venkero-app.venkero-shell .venkero-tmpl-card-actions .button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.venkero-app.venkero-shell .venkero-tmpl-card-action:hover,
.venkero-app.venkero-shell .venkero-tmpl-card-actions .button:hover,
.venkero-app.venkero-shell .venkero-tmpl-card-action:focus-visible,
.venkero-app.venkero-shell .venkero-tmpl-card-actions .button:focus-visible {
    color: var(--foreground);
    background: none;
    box-shadow: none;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.venkero-app.venkero-shell .venkero-tmpl-card-actions form {
    margin: 0;
}

/* ── the two disclosures: Use template, and start a project from one ────────────────────────────────── */

.venkero-app.venkero-shell .venkero-tmpl-from {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0 14px;
    flex-basis: 100%;
}

/* Closed, it is one quiet word on the action line. Open, it takes the row and shows the picker. */
.venkero-app.venkero-shell .venkero-tmpl-use {
    border: 0;
    border-radius: var(--radius);
    padding: 0;
    flex-basis: auto;
}

.venkero-app.venkero-shell .venkero-tmpl-use[open] {
    flex-basis: 100%;
    border: 1px solid var(--border);
    padding: 0 14px;
    margin-top: 6px;
}

.venkero-app.venkero-shell .venkero-tmpl-use > summary,
.venkero-app.venkero-shell .venkero-tmpl-from > summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 550;
    list-style: none;
}

.venkero-app.venkero-shell .venkero-tmpl-use > summary {
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 400;
    min-height: 44px;
}

.venkero-app.venkero-shell .venkero-tmpl-use[open] > summary,
.venkero-app.venkero-shell .venkero-tmpl-use > summary:hover {
    color: var(--foreground);
}

.venkero-app.venkero-shell .venkero-tmpl-use > summary::-webkit-details-marker,
.venkero-app.venkero-shell .venkero-tmpl-from > summary::-webkit-details-marker {
    display: none;
}

.venkero-app.venkero-shell .venkero-tmpl-use[open] > summary,
.venkero-app.venkero-shell .venkero-tmpl-from[open] > summary {
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
}

.venkero-app.venkero-shell .venkero-tmpl-use > summary::after,
.venkero-app.venkero-shell .venkero-tmpl-from > summary::after {
    content: "▾";
    margin-left: auto;
    color: var(--text-muted);
}

.venkero-app.venkero-shell .venkero-tmpl-from {
    margin-top: 18px;
}

/* ── starter examples: compact, and visibly apart from saved templates ─────────────────────────────── */

.venkero-app.venkero-shell .venkero-tmpl-examples {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.venkero-app.venkero-shell .venkero-tmpl-examples-title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 550;
}

.venkero-app.venkero-shell .venkero-tmpl-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.venkero-app.venkero-shell .venkero-tmpl-chips .button,
.venkero-app.venkero-shell .venkero-tmpl-chips form {
    margin: 0;
}

/* ── the editor ─────────────────────────────────────────────────────────────────────────────────────── */

.venkero-app.venkero-shell .venkero-tmpl-editor {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    padding: 22px;
}

.venkero-app.venkero-shell .venkero-tmpl-create {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.venkero-app.venkero-shell .venkero-tmpl-editor-title {
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 550;
}

/* SAVE AND CANCEL, ONE ROW, AT THE FOOT OF BOTH EDITORS. */
.venkero-app.venkero-shell .venkero-tmpl-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.venkero-app.venkero-shell .venkero-tmpl-actions .button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.venkero-app.venkero-shell .venkero-tmpl-cancel {
    margin-left: 0;
    min-height: 44px;
}

/* HIDDEN MEANS HIDDEN. The row list, a brief's help and the raw-text disclosure are all switched by the kind
   selector, and a display rule on any one of them would quietly defeat the attribute — the same mistake this
   pass already made twice with the detail fold and the raw text box. */
.venkero-app.venkero-shell .venkero-tmpl-steps .venkero-tmpl-rowlist[hidden],
.venkero-app.venkero-shell .venkero-tmpl-steps .venkero-tmpl-brief-help[hidden],
.venkero-app.venkero-shell .venkero-tmpl-steps .venkero-tmpl-rawtoggle[hidden] {
    display: none;
}

/* The plain-language note under a brief. There is no format to learn, so it says what the text becomes. */
.venkero-app.venkero-shell .venkero-tmpl-brief-help {
    margin: 6px 0 12px;
}

/* A new workflow with nothing in it yet. Quiet, in the row rhythm, so Add task stays the obvious next move. */
.venkero-app.venkero-shell .venkero-tmpl-empty {
    margin: 2px 0 12px;
}

/* The syntax help, folded inside the raw-text disclosure it describes. */
.venkero-app.venkero-shell .venkero-tmpl-help {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0 14px;
    margin: 6px 0 12px 14px;
}

.venkero-app.venkero-shell .venkero-tmpl-help > summary {
    font-weight: 400;
    font-size: 14px;
    color: var(--text-muted);
}

.venkero-app.venkero-shell .venkero-tmpl-help > summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 550;
    list-style: none;
}

.venkero-app.venkero-shell .venkero-tmpl-help > summary::-webkit-details-marker {
    display: none;
}

.venkero-app.venkero-shell .venkero-tmpl-help-list {
    margin: 0 0 12px;
    padding-left: 20px;
    color: var(--text-muted);
    font-size: 14px;
}

.venkero-app.venkero-shell .venkero-tmpl-help-list li {
    margin-bottom: 6px;
    list-style: disc;
}

.venkero-app.venkero-shell .venkero-tmpl-rawtoggle {
    margin-top: 10px;
}

.venkero-app.venkero-shell .venkero-tmpl-rawtoggle > summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--text-muted);
    list-style: none;
}

.venkero-app.venkero-shell .venkero-tmpl-rawtoggle > summary::-webkit-details-marker {
    display: none;
}

/* ── the two selectors in the editor ─────────────────────────────────────────────────────────────────

   A select's own colours do not reach the list it opens. The options were inheriting white text and painting no
   background of their own, so the popup drew white on the system's light ground and the selected kind and stage
   could not be read. Each option now carries its own colours, and `color-scheme: dark` asks the browser to draw
   the popup and its highlight dark instead of light.

   The closed control keeps its colours through hover, focus and after a choice — the hover tint stays, because
   that is a real affordance, but the text never leaves --foreground. */
.venkero-app.venkero-shell .venkero-tmpl-editor select {
    color: var(--foreground);
    background-color: var(--surface);
    color-scheme: dark;
}

.venkero-app.venkero-shell .venkero-tmpl-editor select:hover {
    color: var(--foreground);
    background-color: var(--surface-soft);
}

.venkero-app.venkero-shell .venkero-tmpl-editor select:focus,
.venkero-app.venkero-shell .venkero-tmpl-editor select:focus-visible,
.venkero-app.venkero-shell .venkero-tmpl-editor select:active {
    color: var(--foreground);
    background-color: var(--surface);
}

.venkero-app.venkero-shell .venkero-tmpl-editor select option {
    color: var(--foreground);
    background-color: var(--surface);
}

/* The chosen row in the open list, and the row under the pointer: a dark ground with light text, rather than
   the system's light highlight. */
.venkero-app.venkero-shell .venkero-tmpl-editor select option:checked,
.venkero-app.venkero-shell .venkero-tmpl-editor select option:hover,
.venkero-app.venkero-shell .venkero-tmpl-editor select option:focus {
    color: var(--foreground);
    background-color: var(--surface-soft);
}

/* ── the editable rows ──────────────────────────────────────────────────────────────────────────────── */

.venkero-app.venkero-shell .venkero-tmpl-rowlist {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

/* ── a task row, in the reference's compact rhythm ───────────────────────────────────────────────────────
   Two lines when nothing is folded away: the task name with its controls, then the timing group with the fold
   for the optional detail. The detail opens as a third line. Nothing sets a row HEIGHT — every field keeps its
   own height and the row grows with its content, so nothing can be clipped. */

.venkero-app.venkero-shell .venkero-tmpl-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
    padding: 8px 10px;
}

.venkero-app.venkero-shell .venkero-tmpl-row-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.venkero-app.venkero-shell .venkero-tmpl-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* THE FOLD HAS TO ACTUALLY FOLD. Setting a display on this box overrides the browser's own
   [hidden] { display: none }, which is the same trap the text field fell into in this pass — I set the box's
   display for tidiness and quietly disabled the fold. So the box sets no display at all, and the attribute is
   given an explicit guard instead. Found by looking at the picture, not by reading the attribute: the property
   said hidden while the field was plainly on screen. */
.venkero-app.venkero-shell .venkero-tmpl-row-detail[hidden] {
    display: none;
}

/* A NOTE OR AN AS-WRITTEN LINE TAKES THE SAME SHAPE AS A TASK: label and field on the first line, controls on
   the second. Beside the field its three buttons held it to 281px and the text was cut; underneath they leave
   it 445px, and the row comes out the same height as a folded task. */
.venkero-app.venkero-shell .venkero-tmpl-row--comment,
.venkero-app.venkero-shell .venkero-tmpl-row--raw {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "lead field"
        "acts acts";
    gap: 6px 8px;
    align-items: center;
}

.venkero-app.venkero-shell .venkero-tmpl-row--comment > .venkero-tmpl-row-tag,
.venkero-app.venkero-shell .venkero-tmpl-row--raw > .venkero-tmpl-row-lead { grid-area: lead; }

.venkero-app.venkero-shell .venkero-tmpl-row--comment > .venkero-tmpl-in,
.venkero-app.venkero-shell .venkero-tmpl-row--raw > .venkero-tmpl-in { grid-area: field; }

.venkero-app.venkero-shell .venkero-tmpl-row--comment > .venkero-tmpl-row-actions,
.venkero-app.venkero-shell .venkero-tmpl-row--raw > .venkero-tmpl-row-actions { grid-area: acts; }

/* THE LABEL CELL IS BOUNDED, OR IT EATS THE FIELD. Its explanation is a whole sentence, and as an auto column
   it took the row: the as-written field was measured at 52px. Capped, the field gets the rest. */
.venkero-app.venkero-shell .venkero-tmpl-row-lead {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 170px;
}

.venkero-app.venkero-shell .venkero-tmpl-row--raw .venkero-quiet {
    font-size: 12px;
    line-height: 1.35;
}

.venkero-app.venkero-shell .venkero-tmpl-row--blank,
.venkero-app.venkero-shell .venkero-tmpl-row--add {
    grid-template-columns: minmax(0, 1fr);
    background: transparent;
    border-style: dashed;
    color: var(--text-muted);
    font-size: 13.5px;
}

.venkero-app.venkero-shell .venkero-tmpl-row--add {
    border-style: dashed;
}

.venkero-app.venkero-shell .venkero-tmpl-row-tag {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Every control in a row is at least 44px tall, as the system requires of every interactive control. */
.venkero-app.venkero-shell .venkero-tmpl-in,
.venkero-app.venkero-shell .venkero-tmpl-date-kind,
.venkero-app.venkero-shell .venkero-tmpl-date-value {
    min-height: 44px;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--foreground);
    padding: 8px 12px;
    font-size: 15px;
}

/* THE TIMING CONTROLS ARE ONE CONTROL. A bordered group holds the choice and its amount, so "Days 3" reads as a
   single answer rather than two unrelated fields. The inner controls drop their own borders for that reason. */
.venkero-app.venkero-shell .venkero-tmpl-date {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    /* No overflow:hidden: the inner controls carry no background or border of their own, so the rounded group
       still reads as one control, and the group is free to wrap when it has to. */
}

.venkero-app.venkero-shell .venkero-tmpl-date .venkero-tmpl-date-kind {
    width: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0 6px 0 10px;
    box-shadow: none;
}

/* A DATE FIELD NEEDS ROOM FOR THE WHOLE DATE AND ITS CALENDAR CONTROL. At 74px the browser clipped the date
   itself, which is what showed in the screenshot. */
.venkero-app.venkero-shell .venkero-tmpl-date .venkero-tmpl-date-value[type="date"] {
    width: 152px;
    min-width: 152px;
    text-align: left;
    padding: 0 8px;
}

.venkero-app.venkero-shell .venkero-tmpl-date .venkero-tmpl-date-value {
    width: 74px;
    border: 0;
    border-left: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    text-align: center;
    box-shadow: none;
}

/* The fold for a task's optional detail. */
.venkero-app.venkero-shell .venkero-tmpl-detail-toggle {
    min-height: 44px;
    padding: 0 12px;
    white-space: nowrap;
}

.venkero-app.venkero-shell .venkero-tmpl-detail-toggle.is-set {
    border-color: var(--accent);
}

.venkero-app.venkero-shell .venkero-tmpl-row-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* SQUARE, 44px, SYMBOL ONLY. The arrow and the cross are as big a pointer target as the labelled buttons were,
   and the name each one carries is what a screen reader reads out. */
.venkero-app.venkero-shell .venkero-tmpl-move,
.venkero-app.venkero-shell .venkero-tmpl-remove {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    line-height: 1;
    white-space: nowrap;
}

.venkero-app.venkero-shell .venkero-tmpl-move:disabled,
.venkero-app.venkero-shell .venkero-tmpl-remove:disabled {
    opacity: 0.35;
    cursor: default;
}

.venkero-app.venkero-shell .venkero-tmpl-add {
    min-height: 44px;
    white-space: nowrap;
}

.venkero-app.venkero-shell .venkero-tmpl-add {
    width: 100%;
    justify-content: center;
}

.venkero-app.venkero-shell .venkero-tmpl-note {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
    color: var(--text-muted);
    padding: 12px 14px;
    font-size: 14px;
    margin: 0 0 12px;
}

/* Focus is always visible — the system's rule, and it must survive the added controls. */
.venkero-app.venkero-shell .venkero-tmpl-in:focus-visible,
.venkero-app.venkero-shell .venkero-tmpl-date-kind:focus-visible,
.venkero-app.venkero-shell .venkero-tmpl-date-value:focus-visible,
.venkero-app.venkero-shell .venkero-tmpl-move:focus-visible,
.venkero-app.venkero-shell .venkero-tmpl-remove:focus-visible,
.venkero-app.venkero-shell .venkero-tmpl-add:focus-visible,
.venkero-app.venkero-shell .venkero-tmpl-use > summary:focus-visible,
.venkero-app.venkero-shell .venkero-tmpl-from > summary:focus-visible,
.venkero-app.venkero-shell .venkero-tmpl-help > summary:focus-visible,
.venkero-app.venkero-shell .venkero-tmpl-rawtoggle > summary:focus-visible {
    outline: 2px solid var(--foreground);
    outline-offset: 3px;
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* ── narrow screens: the editor stacks under the library ───────────────────────────────────────────── */

@media (max-width: 1100px) {
    /* Stacked, the editor sits below the whole library — which is why opening one has to bring it into view. */
    .venkero-app.venkero-shell .venkero-tmpl--editing {
        grid-template-columns: minmax(0, 1fr);
    }

    .venkero-app.venkero-shell .venkero-tmpl-editor {
        padding: 18px;
    }

    .venkero-app.venkero-shell .venkero-tmpl-heading.venkero-tmpl-heading {
        flex-direction: column;
        align-items: stretch;
    }

    .venkero-app.venkero-shell .venkero-tmpl-create {
        align-self: flex-start;
    }
}

@media (max-width: 860px) {
    /* The task name and its controls stop sharing a line, and a note goes back to stacking, so nothing is
       squeezed on a phone. */
    .venkero-app.venkero-shell .venkero-tmpl-row-main {
        grid-template-columns: minmax(0, 1fr);
    }

    .venkero-app.venkero-shell .venkero-tmpl-row--comment,
    .venkero-app.venkero-shell .venkero-tmpl-row--raw {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "lead" "field" "acts";
    }

    .venkero-app.venkero-shell .venkero-tmpl-row-lead {
        max-width: none;
    }

    .venkero-app.venkero-shell .venkero-tmpl-date {
        flex: 1 1 auto;
        max-width: 100%;
    }

    /* A date field wraps onto its own line rather than being clipped. */
    .venkero-app.venkero-shell .venkero-tmpl-date .venkero-tmpl-date-value[type="date"] {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
        border-left: 0;
        border-top: 1px solid var(--border);
    }

    .venkero-app.venkero-shell .venkero-tmpl-detail-toggle {
        flex: 1 1 auto;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════
   THE TEXT FIELD FILLS ITS EDITOR.

   The box relied on WordPress's own `textarea.large-text { width: 99% }`, which only applies because the
   screen happens to be loaded inside wp-admin. Stated here instead, scoped to this field, so the field fills
   its container on its own terms and does not depend on an admin rule that could change under it.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* The shared field wrapper is an inline-block with a width of its own, which capped this whole column at
   340px and left the task name 150px. The step editor takes the full width of its container instead. */
.venkero-app.venkero-shell .venkero-tmpl-steps {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.venkero-app.venkero-shell .venkero-tmpl-steps #venkero-tmpl-body,
.venkero-app.venkero-shell .venkero-tmpl-steps textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 240px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    line-height: 1.55;
}

/* AND THE HIDDEN ATTRIBUTE HAS TO WIN. Setting a width and a font on the box was enough to override the
   browser's own [hidden] { display: none }, so the raw text box rendered underneath the rows while the rows
   were the editor. This was caught by measuring, and it is the reason the rule above sets no display. */
.venkero-app.venkero-shell .venkero-tmpl-steps #venkero-tmpl-body[hidden] {
    display: none;
}

/* ── FILES, to the approved shell ──────────────────────────────────────────────────────────────────────────
 * Added 2026-09-23. Two things drive this block: the rest of the portal, whose language Files was not yet
 * speaking, and the supplied design concept, which guides the LAYOUT only — its sample folders, statuses and
 * storage numbers are the designer's data, not this business's records, and none of them are reproduced here.
 *
 * The rail and the file list are one grid. The rail is fixed and the list takes what is left, so a long
 * filename cannot push the storage figure off the screen. */

.venkero-files-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px 24px;
    flex-wrap: wrap;
}

.venkero-files-heading-text { min-width: 0; }

.venkero-files-heading h1 { margin: 0 0 4px; }

.venkero-files-upload {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    /* Lines up with the top of the title rather than floating above it, so the two buttons read as part of
       the heading and not as a separate toolbar that happens to be nearby. */
    padding-top: 2px;
}

.venkero-files-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
    gap: 24px;
    margin-top: 16px;
}

.venkero-files-main { min-width: 0; }

.venkero-files-rail {
    display: grid;
    gap: 16px;
    /* Follows the list down a long screen, so the storage figure is still there when you are 40 rows in. */
    position: sticky;
    top: 32px;
}

/* Stacked, not squeezed: below this width the rail would be narrower than the dates inside it. */
@media (max-width: 1100px) {
    .venkero-files-layout { grid-template-columns: minmax(0, 1fr); }
    .venkero-files-rail { position: static; }
}

.venkero-rail-card { padding: 16px; }

.venkero-rail-title {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--text-muted);
}

.venkero-rail-figure { margin: 0 0 10px; font-size: 22px; font-weight: 600; }
.venkero-rail-figure .venkero-meta { font-size: 13px; font-weight: 400; }

.venkero-storage-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--surface-raised, rgba(127, 127, 127, .18));
    overflow: hidden;
}

.venkero-storage-bar > span {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--accent, #4f7cff);
}

.venkero-rail-breakdown { margin: 14px 0 0; display: grid; gap: 8px; }
.venkero-rail-breakdown > div { display: flex; justify-content: space-between; gap: 12px; }
.venkero-rail-breakdown dt { margin: 0; font-weight: 400; }
.venkero-rail-breakdown dd { margin: 0; text-align: right; }

.venkero-rail-activity { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.venkero-rail-activity li { line-height: 1.45; }
.venkero-rail-activity .venkero-meta { display: block; font-size: 12px; }

/* The search box takes the room; the two selectors sit beside it at their natural width. */
.venkero-files-toolbar { flex-wrap: wrap; gap: 8px; }
.venkero-files-toolbar .venkero-search { flex: 1 1 240px; min-width: 160px; }
.venkero-files-toolbar select { max-width: 220px; }
.venkero-flush-end { margin-right: 6px; }

/* Folder shortcuts: the business's own folders, as a row of buttons that set the filter beside the search box. */
.venkero-files-folders {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
}

.venkero-folder-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--border, rgba(127, 127, 127, .3));
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.venkero-folder-chip:hover { border-color: var(--accent, #4f7cff); }
.venkero-folder-chip .dashicons { font-size: 16px; width: 16px; height: 16px; color: var(--text-muted); }
.venkero-folder-chip-name { font-weight: 500; }

/* A glyph, not a preview: the storage has not made thumbnails, and a stand-in image would claim otherwise. */
.venkero-file-icon { color: var(--text-muted); margin-right: 8px; vertical-align: text-bottom; }

/* Sentence case, as the reference has it. Eight uppercase headings in a row shout, and "Name" is a word. */
.venkero-files-main .venkero-table th {
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
    font-weight: 600;
}

.venkero-files-main .venkero-table td { vertical-align: middle; }
.venkero-files-main .venkero-table td.venkero-name { font-weight: 500; }

/* The email instructions are read once and are long; the delivery list is read weekly. */
.venkero-files-setup > summary,
.venkero-setup > summary {
    cursor: pointer;
    font-weight: 600;
    padding: 4px 0;
}

.venkero-files-setup > summary::marker { color: var(--text-muted); }
.venkero-files-setup .venkero-setup-body { padding-top: 12px; }

/* ── FILES: corrections from the portal review, 2026-09-23 ─────────────────────────────────────────────────
 * Each rule here answers something seen on screen, not something read in the source. */

/* SENTENCE CASE, AND THE REASON THE LAST ATTEMPT DID NOT WORK.
   The first try scoped this to `.venkero-files-main .venkero-table th` — but the file list is
   `<table id="venkero-file-table">` with no class at all, so that selector matched NOTHING and the headings
   kept the uppercase they inherit from `.venkero-app th` (line 369). The claim "sentence case ✓" was checked
   by grepping the stylesheet for the string instead of by reading the computed style, which is exactly the
   mistake that let it ship. These selectors match the elements that actually exist, and beat `.venkero-app th`
   on specificity. */
.venkero-app.venkero-shell .venkero-files-main #venkero-file-table th,
.venkero-app.venkero-shell .venkero-files-main .venkero-group-heading th,
.venkero-app.venkero-shell .venkero-files-main .venkero-table th {
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
    font-weight: 600;
}

/* HIDDEN MEANS HIDDEN. The selection bar is switched by the `hidden` attribute, and `.venkero-toolbar`
   sets `display: flex` — which silently defeats `[hidden] { display: none }`. Same trap as Templates. */
.venkero-app.venkero-shell #venkero-files-selection[hidden] {
    display: none;
}

/* The table scrolls inside its own box. The card used to be the scroller, which carried the view control away
   with the right-hand columns and pushed the tick column off the left. */
.venkero-app.venkero-shell .venkero-table-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.venkero-app.venkero-shell .venkero-table-scroll > table {
    min-width: 940px;   /* a floor, so the scroll is deliberate and the columns never squirm */
}

/* What is selected, and which project you are in, stay on screen while the far end of a row is read. */
.venkero-app.venkero-shell #venkero-file-table th:first-child,
.venkero-app.venkero-shell #venkero-file-table td:first-child,
.venkero-app.venkero-shell #venkero-file-table .venkero-group-heading th {
    position: sticky;
    left: 0;
    background: var(--surface);
    z-index: 2;
}

.venkero-app.venkero-shell #venkero-file-table .venkero-group-heading th { z-index: 3; }

/* Sizes, dates and statuses are short and must not be broken across lines while scrolling. */
.venkero-app.venkero-shell #venkero-file-table td:nth-child(5),
.venkero-app.venkero-shell #venkero-file-table td:nth-child(6),
.venkero-app.venkero-shell #venkero-file-table td:nth-child(7),
.venkero-app.venkero-shell #venkero-file-table td:nth-child(9),
.venkero-app.venkero-shell #venkero-file-table th:nth-child(5),
.venkero-app.venkero-shell #venkero-file-table th:nth-child(9) {
    white-space: nowrap;
}

/* ONE ACTION, ONE BOX. A label, its field and its button stay together, so a narrow screen wraps between
   whole actions instead of stranding "Rename to" on a line of its own. */
.venkero-app.venkero-shell .venkero-bar-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* Deliberately no margin-left:auto on the actions: that auto margin is what left a wide empty band where
       the wrap happened. Gaps here are even, and the wrap falls between groups. */
}

.venkero-app.venkero-shell #venkero-files-selection {
    flex-wrap: wrap;
    row-gap: 10px;
}

/* ── FILES: the feed, the delivery table, and the folder landing, 2026-09-23 ───────────────────────────────
 * The last pieces the four tabs need. The feed and the delivery table are what the Client uploads, Sent files
 * and Activity references show, and their restraint is the point: a heading, a time, and a sentence. */

.venkero-app.venkero-shell .venkero-feed-title {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.venkero-app.venkero-shell .venkero-feed-day {
    margin: 22px 0 10px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--text-muted);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

.venkero-app.venkero-shell .venkero-feed-day:first-of-type { margin-top: 8px; }

.venkero-app.venkero-shell .venkero-feed {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

/* The time sits in its own column so the sentences line up and the column can be scanned on its own. */
.venkero-app.venkero-shell .venkero-feed li {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 12px;
    align-items: baseline;
}

.venkero-app.venkero-shell .venkero-feed-time {
    color: var(--text-muted);
    font-size: 13px;
    white-space: nowrap;
}

.venkero-app.venkero-shell .venkero-feed-what { min-width: 0; }

@media (max-width: 700px) {
  /* The row is a card: identity, its amounts, then its controls. */
  .venkero-invoice-table thead { display: none; }
  .venkero-invoice-table { display: block; width: 100% !important; min-width: 0 !important; max-width: 100% !important;
    table-layout: auto !important;
    /* Clearance for the fixed bottom bar. 112px is its own height plus a comfortable margin: without it the
       last card's controls sat underneath the bar and could not be pressed at all. The same clearance is put
       on every control as scroll-margin, so a control reached by keyboard is scrolled clear of the bar rather
       than into it. */
    padding-bottom: 112px; }
  .venkero-invoice-table col, .venkero-invoice-table colgroup { width: auto !important; }
  .venkero-invoice-table, .venkero-invoice-table tbody,
  .venkero-invoice-table tr, .venkero-invoice-table td { display: block; width: auto; }
  .venkero-invoice-table tr { border: 1px solid var(--border); border-radius: 12px; margin: 0 0 10px;
    padding: 10px 12px 8px; }
  /* One rule per card, and only above the controls: the old layout ruled off every field, which is where the
     stacked gaps and separator lines came from. */
  .venkero-invoice-table td { border: 0 !important; padding: 1px 0; text-align: left; white-space: normal;
    width: auto !important; min-width: 0 !important; max-width: none !important; }
  .venkero-invoice-table td.venkero-invoice-number { font-weight: 600; }
  .venkero-invoice-table td.venkero-invoice-title { margin-bottom: 5px; }
  .venkero-invoice-table td.venkero-invoice-client,
  .venkero-invoice-table td.venkero-invoice-project,
  .venkero-invoice-table td.venkero-nowrap { display: none; }
  /* Amounts and status read as one line, each named. */
  .venkero-invoice-table td.venkero-invoice-total,
  .venkero-invoice-table td.venkero-invoice-outstanding,
  .venkero-invoice-table td.venkero-invoice-status { display: inline-block; margin: 2px 14px 2px 0; }
  .venkero-invoice-table td.venkero-invoice-total::before,
  .venkero-invoice-table td.venkero-invoice-outstanding::before,
  .venkero-invoice-table td.venkero-invoice-status::before {
    content: attr(data-label) " "; opacity: .65; font-size: 12px; }
  .venkero-invoice-table td.venkero-invoice-actions {
    margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border) !important; }
  /* Comfortable targets, wrapped, and never under the bar when they take focus. */
  .venkero-invoice-table td.venkero-invoice-actions a,
  .venkero-invoice-table td.venkero-invoice-actions form { display: inline-block; margin: 0 12px 6px 0; }
  .venkero-invoice-table td.venkero-invoice-actions .button,
  .venkero-invoice-table td.venkero-invoice-actions button { padding: 7px 14px; min-height: 38px; }
  .venkero-invoice-table td.venkero-invoice-actions a,
  .venkero-invoice-table td.venkero-invoice-actions button,
  .venkero-invoice-table td.venkero-invoice-actions input { scroll-margin-bottom: 120px; }
  .venkero-invoice-table tr:last-child { margin-bottom: 0; }
  .venkero-table-scroll, .venkero-table-wrap, .venkero-scroll-x { overflow: visible !important; }
}

/* The delivery table scrolls like the file list, for the same reason and in the same way. */
.venkero-app.venkero-shell .venkero-delivery-table { min-width: 760px; }

.venkero-app.venkero-shell .venkero-delivery-table td {
    white-space: nowrap;
    vertical-align: middle;
}

.venkero-app.venkero-shell .venkero-delivery-table td.venkero-name {
    white-space: normal;
    font-weight: 500;
}

.venkero-app.venkero-shell .venkero-delivery-actions { text-align: right; }

/* The folder button the Files screen sends you to: marked, not just focused, because a focus ring on a page you
   have only just arrived at is easy to miss. */
.venkero-app.venkero-shell #venkero-folder-start.is-wanted,
.venkero-shell-page #venkero-folder-start.is-wanted {
    box-shadow: 0 0 0 2px var(--accent, #c6f74a);
}

.venkero-app.venkero-shell .venkero-folder-hint { margin: 8px 0 0; }

/* The selection bar sits in the main column, which is narrow once the rail takes its 300px — so three whole
   actions cannot share one line. They stack, which reads fine, but the fields were sized for a full-width row
   and made the bar 229px tall. Capping the field widths lets two actions share a line where there is room,
   without ever splitting one. */
.venkero-app.venkero-shell #venkero-files-selection { gap: 10px 14px; }

.venkero-app.venkero-shell #venkero-files-selection select { max-width: 200px; }
.venkero-app.venkero-shell #venkero-files-selection input[type="text"] { max-width: 170px; }
.venkero-app.venkero-shell #venkero-files-selection .venkero-bar-actions { flex-wrap: wrap; }

/* ════════════════════════════════════════════════════════════════════════════════════════════════════════
   THE FILES CONCEPTS PASS — see /root/venkero-team/FILES-REVIEW.md
   Four things Peter measured on the staging portal, fixed at their cause rather than at the symptom.
   ════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── the two views that are NOT a table beside a summary ──────────────────────────────────────────────────
   Sent files and Activity take the whole content width, as their concepts show. The rail stays on My Files
   and Client uploads, which are many-column tables that the storage panel genuinely helps. */
.venkero-app.venkero-shell .venkero-files-full {
    display: block;
    width: 100%;
    min-width: 0;
}

/* ── THE PRIMARY ACTION, WHICH WAS RENDERING DARK ─────────────────────────────────────────────────────────
   Cause, not symptom: the heading's Upload Files is an ANCHOR, and `.venkero-app.venkero-shell a.venkero-button`
   (specificity 0,3,1) sets `background: var(--surface)` — outranking `.venkero-app .venkero-primary` (0,2,0).
   Every other primary button in the app is a `<button>` without the `button` class, so none of them matched
   that rule and all of them were already lime. This closes the gap for the anchor form at a specificity the
   rest of this file cannot beat by accident. */
.venkero-app.venkero-shell a.venkero-button.venkero-primary,
.venkero-app.venkero-shell button.venkero-button.venkero-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
}

.venkero-app.venkero-shell a.venkero-button.venkero-primary:hover,
.venkero-app.venkero-shell button.venkero-button.venkero-primary:hover {
    background: var(--accent);
    border-color: var(--accent);
    filter: brightness(1.06);
}

/* Secondary: the same shape, no fill — the pair reads as one action and its alternative. */
.venkero-app.venkero-shell a.venkero-button.venkero-secondary,
.venkero-app.venkero-shell .venkero-files-upload .venkero-button {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--foreground);
    font-weight: 500;
}

.venkero-app.venkero-shell .venkero-files-upload .venkero-button.venkero-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
}

.venkero-app.venkero-shell .venkero-files-upload .venkero-button:hover { border-color: var(--foreground); }

/* ── ITEM 2: the delivery table, with nothing silently cut off ────────────────────────────────────────────
   The wrapper already scrolls horizontally, which is the deliberate answer — but a table that can shrink
   below its own content clips the last columns (the counts and the buttons) instead of scrolling to them.
   A declared minimum holds the columns open so the scroller has something to scroll TO. */
.venkero-app.venkero-shell .venkero-delivery-table { min-width: 940px; }
.venkero-app.venkero-shell .venkero-delivery-table th,
.venkero-app.venkero-shell .venkero-delivery-table td { white-space: nowrap; }

/* The delivery's name is the one column that may take the slack, so a long name wraps there and nowhere else. */
.venkero-app.venkero-shell .venkero-delivery-table td.venkero-name { white-space: normal; min-width: 220px; }

.venkero-app.venkero-shell .venkero-delivery-table td.venkero-delivery-actions {
    text-align: right;
    padding-right: 12px;
}

.venkero-app.venkero-shell .venkero-delivery-table td.venkero-delivery-actions .venkero-button {
    min-height: 32px;
    padding: 0 12px;
    font-size: 13px;
}

/* ── ITEM 2: the email setup, full width below the table, with a chevron that turns ────────────────────── */
.venkero-app.venkero-shell .venkero-files-setup { width: 100%; }
.venkero-app.venkero-shell .venkero-files-setup > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    font-size: 15px;
    font-weight: 600;
    white-space: normal;          /* the title wraps rather than being clipped on a narrow window */
    cursor: pointer;
    list-style: none;
}

.venkero-app.venkero-shell .venkero-files-setup > summary::-webkit-details-marker { display: none; }

.venkero-app.venkero-shell .venkero-files-setup > summary::after {
    content: "";
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-left: auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .15s ease;
}

.venkero-app.venkero-shell .venkero-files-setup[open] > summary::after { transform: rotate(-135deg); }

.venkero-app.venkero-shell .venkero-files-setup .venkero-setup-body { padding: 0 20px 18px; }
.venkero-app.venkero-shell .venkero-files-setup .venkero-setup-body p { white-space: normal; }

/* ── ITEM 3: the activity feed ────────────────────────────────────────────────────────────────────────────
   Icon, time, sentence. The time column is a FIXED width so the sentences start on one line all the way down
   the day, which is the alignment the concept has and the thing a ragged feed loses first. */
.venkero-app.venkero-shell .venkero-feed { list-style: none; margin: 6px 0 22px; padding: 0; }

.venkero-app.venkero-shell .venkero-feed li {
    display: grid;
    grid-template-columns: 20px 84px minmax(0, 1fr);
    align-items: baseline;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}

.venkero-app.venkero-shell .venkero-feed li:last-child { border-bottom: 0; }

.venkero-app.venkero-shell .venkero-feed-icon {
    color: var(--text-muted);
    position: relative;
    top: 2px;
}

.venkero-app.venkero-shell .venkero-feed-time {
    color: var(--text-muted);
    font-size: 13px;
    font-variant-numeric: tabular-nums;   /* so 1:15 and 11:20 occupy the same width */
    white-space: nowrap;
}

.venkero-app.venkero-shell .venkero-feed-what { min-width: 0; overflow-wrap: anywhere; }

/* ── ITEM 7: a tick you can find, on a card that is not shouting ─────────────────────────────────────────
   The cards' edges had become the loudest thing on the screen while the control that matters — the selection
   box — was dark-on-dark. Emphasis is moved off the frame and onto the states that mean something. */
.venkero-app.venkero-shell .venkero-grid .venkero-tile {
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: none;
}

.venkero-app.venkero-shell .venkero-grid .venkero-tile:hover { border-color: var(--text-muted); }

.venkero-app.venkero-shell .venkero-grid .venkero-tile:focus-visible {
    border-color: var(--accent);
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.venkero-app.venkero-shell .venkero-grid .venkero-tile.is-picked {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent) inset;
}

/* The card's tick: an empty box has to be visible BEFORE it is ticked, or nobody knows it can be. */
.venkero-app.venkero-shell .venkero-tile-tick {
    border: 1.5px solid var(--text-muted);
    background: rgba(0, 0, 0, .28);
    box-shadow: none;
}

.venkero-app.venkero-shell .venkero-tile.is-picked .venkero-tile-tick {
    border-color: var(--accent);
    background: var(--accent);
}

/* The table's own checkbox. WordPress admin styles checkboxes, and inside a dark admin that styling is what
   made these read as dark-on-dark — so the appearance is declared here rather than inherited. */
.venkero-app.venkero-shell .venkero-file-pick,
.venkero-app.venkero-shell .venkero-table input[type="checkbox"].venkero-file-pick {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 0 4px 0 0;
    border: 1.5px solid var(--text-muted);
    border-radius: 4px;
    background: transparent;
    position: relative;
    cursor: pointer;
    vertical-align: middle;
}

.venkero-app.venkero-shell .venkero-file-pick:hover { border-color: var(--foreground); }

.venkero-app.venkero-shell .venkero-file-pick:checked {
    background: var(--accent);
    border-color: var(--accent);
}

.venkero-app.venkero-shell .venkero-file-pick:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 4px;
    height: 9px;
    border: solid var(--on-accent);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.venkero-app.venkero-shell .venkero-file-pick:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ── the ticked box, stated so nothing can take it back ──────────────────────────────────────────────────
   The fill went lime but the border stayed grey. Reading the cascade back says the `:checked` rule already
   outranks the base declaration, and the rendered page disagreed — so the two properties were being decided
   in different places, and this box is on WordPress admin's own turf, where the admin stylesheet also has an
   opinion about checkboxes. The pair is therefore declared together and marked, the way this file already
   declares the primary button. A half-styled control is worse than an unstyled one.
   NOTE: the files table carries NO `venkero-table` class — it is `<table id="venkero-file-table">` — so a rule
   written against that class misses it entirely. That is what the first attempt at this fix did. */
.venkero-app.venkero-shell input[type="checkbox"].venkero-file-pick:checked {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
}

.venkero-app.venkero-shell input[type="checkbox"].venkero-file-pick:checked::after {
    border-color: var(--on-accent) !important;
}

.venkero-app.venkero-shell input[type="checkbox"].venkero-file-pick:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px !important;
}

/* ── a wide table inside its scroller must not widen the page ────────────────────────────────────────────
   On Sent files the eight-column table is deliberately wider than its box, and the scroller scrolls to it.
   But the card around the scroller was still being sized by that width at narrow windows, adding a sideways
   scroll to the whole page — a scroll of the page is not the deliberate scroll of a table. Bounding every box
   on the way down keeps the overflow where it belongs. */
.venkero-app.venkero-shell .venkero-files-full,
.venkero-app.venkero-shell .venkero-files-full > .venkero-card,
.venkero-app.venkero-shell .venkero-table-scroll {
    min-width: 0;
    max-width: 100%;
}

/* ── FIX 2: nothing positioned may escape the table's scroll area ────────────────────────────────────────
   The scroll area was `position: static`, so an absolutely positioned descendant anchored to the viewport
   instead of to the table, and a box that escapes an `overflow: auto` ancestor is not clipped by it — it
   widened the page by 50px at 1100px. The label that did it is now an attribute, but the scroll area is
   positioned anyway: the next helper positioned inside it should be contained, not pushed out to the page. */
.venkero-app.venkero-shell .venkero-table-scroll { position: relative; }

/* ════════════════════════════════════════════════════════════════════════════════════════════════════════
   THE FILE TABLE'S ROOM — Status was falling off the right of My Files
   Measured before this: at 1280 the main column was 637px against a table that wanted 1096, so only the tick
   and Name were on screen and Folder, Kind, Size, Version, Uploaded, From and Status were all past the edge.
   Two causes, both here: the table was given a 940px floor it could never fit into beside a 300px rail, and
   the rail stayed beside the list far too long. Column widths first, then the rail.
   ════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── the rail goes BELOW the list unless there is genuinely room beside it ───────────────────────────────
   Side by side needs 300px of rail, a 24px gap and roughly 860px of table — about 1560px of window. Below
   that the rail took the room the columns needed. It still follows the list down when it is beside it. */
.venkero-files-layout { grid-template-columns: minmax(0, 1fr); }

.venkero-files-rail { position: static; }

@media (min-width: 1560px) {
    .venkero-files-layout { grid-template-columns: minmax(0, 1fr) 300px; }
    .venkero-files-rail { position: sticky; top: 32px; }
}

/* ── the columns, sized on purpose ───────────────────────────────────────────────────────────────────────
   A fixed layout is what makes this predictable: percentages are shared out across whatever width the table
   has, so the same nine columns are visible together at 1280 as at 1600. Name and Folder take the slack and
   wrap — they are the two that can. The short ones never break mid-value. */
.venkero-app.venkero-shell #venkero-file-table {
    table-layout: fixed;
    width: 100%;
    min-width: 860px;   /* below this the table scrolls rather than cramping; Status stays pinned */
}

.venkero-app.venkero-shell #venkero-file-table th:nth-child(1),
.venkero-app.venkero-shell #venkero-file-table td:nth-child(1) { width: 40px; }      /* selection   */
.venkero-app.venkero-shell #venkero-file-table th:nth-child(2),
.venkero-app.venkero-shell #venkero-file-table td:nth-child(2) { width: 30%; }       /* Name        */
.venkero-app.venkero-shell #venkero-file-table th:nth-child(3),
.venkero-app.venkero-shell #venkero-file-table td:nth-child(3) { width: 15%; }       /* Folder      */
.venkero-app.venkero-shell #venkero-file-table th:nth-child(4),
.venkero-app.venkero-shell #venkero-file-table td:nth-child(4) { width: 7%; }        /* Kind        */
.venkero-app.venkero-shell #venkero-file-table th:nth-child(5),
.venkero-app.venkero-shell #venkero-file-table td:nth-child(5) { width: 8%; }        /* Size        */
.venkero-app.venkero-shell #venkero-file-table th:nth-child(6),
.venkero-app.venkero-shell #venkero-file-table td:nth-child(6) { width: 7%; }        /* Version     */
.venkero-app.venkero-shell #venkero-file-table th:nth-child(7),
.venkero-app.venkero-shell #venkero-file-table td:nth-child(7) { width: 10%; }       /* Uploaded    */
.venkero-app.venkero-shell #venkero-file-table th:nth-child(8),
.venkero-app.venkero-shell #venkero-file-table td:nth-child(8) { width: 8%; }        /* From        */
.venkero-app.venkero-shell #venkero-file-table th:nth-child(9),
.venkero-app.venkero-shell #venkero-file-table td:nth-child(9) { width: 11%; }       /* Status      */

/* A long filename wraps inside its own column instead of pushing the column wider. Thirty per cent of 860 is
   258px — plenty for a name at two lines, which is what 40-character camera filenames need. */
.venkero-app.venkero-shell #venkero-file-table td:nth-child(2),
.venkero-app.venkero-shell #venkero-file-table td:nth-child(3) {
    overflow-wrap: anywhere;
}

.venkero-app.venkero-shell #venkero-file-table td:nth-child(2),
.venkero-app.venkero-shell #venkero-file-table td:nth-child(3),
.venkero-app.venkero-shell #venkero-file-table th:nth-child(2),
.venkero-app.venkero-shell #venkero-file-table th:nth-child(3) {
    white-space: normal;
}

/* The short values never split across lines. `Size 8.3 / MB` is not a size. */
.venkero-app.venkero-shell #venkero-file-table th:nth-child(4),
.venkero-app.venkero-shell #venkero-file-table td:nth-child(4),
.venkero-app.venkero-shell #venkero-file-table th:nth-child(5),
.venkero-app.venkero-shell #venkero-file-table td:nth-child(5),
.venkero-app.venkero-shell #venkero-file-table th:nth-child(6),
.venkero-app.venkero-shell #venkero-file-table td:nth-child(6),
.venkero-app.venkero-shell #venkero-file-table th:nth-child(7),
.venkero-app.venkero-shell #venkero-file-table td:nth-child(7),
.venkero-app.venkero-shell #venkero-file-table th:nth-child(8),
.venkero-app.venkero-shell #venkero-file-table td:nth-child(8),
.venkero-app.venkero-shell #venkero-file-table th:nth-child(9),
.venkero-app.venkero-shell #venkero-file-table td:nth-child(9) {
    white-space: nowrap;
}

/* ── STATUS PINS TO THE RIGHT WHEN THE TABLE DOES HAVE TO SCROLL ─────────────────────────────────────────
   The one column you need beside the name, kept on screen at every width. It is given an opaque background of
   its own and a hairline divider, so the columns travelling underneath read as passing behind it rather than
   as overlapping it. Where the whole table fits there is nothing to scroll and this changes nothing. */
.venkero-app.venkero-shell #venkero-file-table th:nth-child(9),
.venkero-app.venkero-shell #venkero-file-table td:nth-child(9) {
    position: sticky;
    right: 0;
    background: var(--surface);
    box-shadow: inset 1px 0 0 var(--border);
    z-index: 2;
}

.venkero-app.venkero-shell #venkero-file-table thead th:nth-child(9) { z-index: 4; }

/* ── the scroll is discoverable ────────────────────────────────────────────────────────────────────────── */
.venkero-app.venkero-shell .venkero-table-hint {
    display: none;
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--text-muted);
}

.venkero-app.venkero-shell .venkero-table-scroll.is-scrollable ~ .venkero-table-hint { display: block; }

/* A FADE OVER THE RIGHT EDGE WAS THE FIRST IDEA AND IS DELIBERATELY NOT HERE. A mask on the scroll box masks
   everything inside it, and the column pinned to that edge is Status — the one column this work exists to keep
   readable. A soft edge that dims the thing it is protecting is worse than no edge. The line of text below the
   table says the same thing and dims nothing. */

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   SAVED LINKS
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* The heading and its one action, in the shape Files uses. */
.venkero-app.venkero-shell .venkero-links-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.venkero-app.venkero-shell .venkero-links-heading-text { min-width: 0; }
.venkero-app.venkero-shell .venkero-links-heading h1 { margin: 0; }
.venkero-app.venkero-shell .venkero-links-heading .venkero-subtitle { margin: 4px 0 0; }

/* THE ACTION IS A LABEL, because it opens a checkbox-driven dialog. The checkbox itself stays in the tab order's
 * reach through the label, and is hidden from sight rather than from assistive technology. */
.venkero-app.venkero-shell .venkero-links-add { display: flex; align-items: center; gap: 10px; }

.venkero-app.venkero-shell .venkero-links-add .venkero-add-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.venkero-app.venkero-shell .venkero-links-add label.venkero-button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    cursor: pointer;
}

/* The lime primary, at a specificity the base button rule cannot out-rank. */
.venkero-app.venkero-shell .venkero-links-add label.venkero-button.venkero-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #12150f;
}

/* One toolbar: the count, the search, then the chips beneath. */
.venkero-app.venkero-shell .venkero-links-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin: 18px 0 12px;
}

.venkero-app.venkero-shell .venkero-links-count { margin: 0; }
.venkero-app.venkero-shell .venkero-links-search { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.venkero-app.venkero-shell .venkero-links-search .venkero-field { margin: 0; }
.venkero-app.venkero-shell .venkero-links-search input[type="search"] { min-width: 250px; min-height: 44px; }
.venkero-app.venkero-shell .venkero-links-search .venkero-button { min-height: 44px; }

/* Three columns, then two, then one. */
.venkero-app.venkero-shell .venkero-links-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--card-gap);
}

@media (max-width: 1150px) {
    .venkero-app.venkero-shell .venkero-links-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .venkero-app.venkero-shell .venkero-links-grid { grid-template-columns: minmax(0, 1fr); }
}

/* THE CARD. Everything inside it is allowed to shrink, so a long name or a long address wraps inside its column
 * instead of pushing the controls out of the card. */
.venkero-app.venkero-shell .venkero-link-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.venkero-app.venkero-shell .venkero-link-card-top { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }

.venkero-app.venkero-shell .venkero-link-tile {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-soft);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 650;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.venkero-app.venkero-shell .venkero-link-card-text { flex: 1 1 auto; min-width: 0; }
.venkero-app.venkero-shell .venkero-link-name { margin: 0; font-size: 15.5px; font-weight: 650; overflow-wrap: anywhere; }
.venkero-app.venkero-shell .venkero-link-url { margin: 2px 0 0; color: var(--text-muted); font-size: 13px; overflow-wrap: anywhere; }
.venkero-app.venkero-shell .venkero-link-card-body { min-width: 0; }
.venkero-app.venkero-shell .venkero-link-category { margin: 0; }

.venkero-app.venkero-shell .venkero-link-card .venkero-badge {
    display: inline-block;
    padding: 3px 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 11.5px;
    letter-spacing: .01em;
}

/* The footer, separated by a rule and pushed to the bottom so the cards' actions line up. */
.venkero-app.venkero-shell .venkero-link-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

/* ── the quiet overflow menu ─────────────────────────────────────────────────────────────────────────────── */
.venkero-app.venkero-shell .venkero-menu { position: relative; flex: 0 0 auto; }

.venkero-app.venkero-shell .venkero-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--text-muted);
    cursor: pointer;
    list-style: none;
}

.venkero-app.venkero-shell .venkero-menu-trigger::-webkit-details-marker { display: none; }
.venkero-app.venkero-shell .venkero-menu-trigger:hover { color: var(--text-muted); border-color: var(--border); }

.venkero-app.venkero-shell .venkero-menu-list {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    right: 0;
    min-width: 160px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
}

.venkero-app.venkero-shell .venkero-menu-item {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
}

.venkero-app.venkero-shell .venkero-menu-item:hover { background: var(--surface-soft); }
.venkero-app.venkero-shell .venkero-menu .venkero-inline-form { display: block; margin: 0; }

/* ── the Add Link dialog, on the same rules as the approved ones ─────────────────────────────────────────── */
.venkero-app.venkero-shell .venkero-links-modal { display: none; }

.venkero-app.venkero-shell:has(#venkero-add-link-toggle:checked) .venkero-links-modal {
    display: grid;
    position: fixed;
    inset: 0;
    z-index: 100;
    place-items: center;
    padding: 20px;
}

.venkero-app.venkero-shell .venkero-links-modal :focus-visible {
    outline: 2px solid var(--foreground);
    outline-offset: 3px;
    box-shadow: 0 0 0 5px var(--accent);
}

/* ── the two empty states, and the narrow widths ────────────────────────────────────────────────────────── */
.venkero-app.venkero-shell .venkero-links-empty { max-width: 560px; }

@media (max-width: 782px) {
    .venkero-app.venkero-shell .venkero-links-toolbar { flex-direction: column; align-items: stretch; }
    .venkero-app.venkero-shell .venkero-links-search { width: 100%; }
    .venkero-app.venkero-shell .venkero-links-search .venkero-field { flex: 1 1 100%; }
    .venkero-app.venkero-shell .venkero-links-search input[type="search"] { width: 100%; min-width: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   SAVED LINKS — corrections after Peter reviewed the first cut
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── ITEM 1: the header action is a LABEL, and the base button rule never covered it ────────────────────────────────
   `.venkero-app button, .venkero-app .button, .venkero-app input[type="submit"], .venkero-app a.venkero-button,
   .venkero-app summary` is where the padding, radius, font and 44px height live. A `<label class="venkero-button">`
   matches none of those selectors, so it kept only what the dialog needed — inline-flex and a cursor — and rendered
   as a narrow square with no padding at all. This gives the label the same treatment as the approved anchor form, so
   the primary action is one shape wherever it appears. */
.venkero-app.venkero-shell .venkero-links-add label.venkero-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--target);
    padding: 0 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: transparent;
    color: var(--foreground);
    font-family: inherit;
    font-size: 15px;
    font-weight: 550;
    line-height: 1.2;
    cursor: pointer;
}

.venkero-app.venkero-shell .venkero-links-add label.venkero-button.venkero-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
}

.venkero-app.venkero-shell .venkero-links-add label.venkero-button.venkero-primary:hover {
    background: var(--accent);
    border-color: var(--accent);
    filter: brightness(1.06);
}

/* Aligned to the top of the title, exactly as the Files heading does it, so the action reads as part of the heading
   rather than as something floating beside it. */
.venkero-app.venkero-shell .venkero-links-heading { align-items: flex-start; }
.venkero-app.venkero-shell .venkero-links-add { padding-top: 2px; }

/* ── ITEM 2: one toolbar — the search beside its button, the categories alongside, the count secondary ─────────── */
.venkero-app.venkero-shell .venkero-links-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin: 6px 0 18px;
}

.venkero-app.venkero-shell .venkero-links-search {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    flex: 1 1 300px;
    max-width: 440px;
    margin: 0;
}

.venkero-app.venkero-shell .venkero-links-search .venkero-field { flex: 1 1 auto; min-width: 0; margin: 0; }
.venkero-app.venkero-shell .venkero-links-search input[type="search"] { width: 100%; min-height: var(--target); }
.venkero-app.venkero-shell .venkero-links-search .venkero-button { flex: 0 0 auto; }
.venkero-app.venkero-shell .venkero-links-toolbar .venkero-chips { margin: 0; }

/* The count is secondary and sits at the end of the row. On a narrow screen it takes its own line, which is the
   deliberate wrap rather than the stray gap the first cut had. */
.venkero-app.venkero-shell .venkero-links-toolbar .venkero-links-count { margin: 0 0 0 auto; }

/* ── ITEM 3: the category badge is sentence case ──────────────────────────────────────────────────────────────────
   The refined badge rules are keyed on `body.venkero-refined-page`, which this screen joined this pass, so a
   letter-spaced uppercase treatment started applying over the category. The stored values are untouched; only the
   rendering is corrected, and it is scoped to this card so no other screen's badges move. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-link-card .venkero-badge {
    text-transform: none;
    letter-spacing: .01em;
    font-size: 12px;
    white-space: nowrap;
}

/* ── ITEM 4: the dialog's fields, at the width the approved dialog uses ──────────────────────────────────────────
   A bare `input[type="text"]` is as wide as the browser makes it — measured at 199px inside a 560px dialog. The
   approved Add Client dialog already answers this with `box-sizing: border-box; width: 100%` on its own grid, so
   this is the same treatment for the same reason. */
.venkero-app.venkero-shell .venkero-links-form .venkero-field { display: block; margin: 0 0 14px; }

.venkero-app.venkero-shell .venkero-links-form input[type="text"],
.venkero-app.venkero-shell .venkero-links-form input[type="url"],
.venkero-app.venkero-shell .venkero-links-form select {
    box-sizing: border-box;
    width: 100%;
    min-height: var(--target);
}

/* ── ITEM 6: the Delete confirmation, on the same rules as every other dialog ──────────────────────────────────── */
.venkero-app.venkero-shell .venkero-confirm-modal { display: none; }

.venkero-app.venkero-shell:has(#venkero-confirm-delete-toggle:checked) .venkero-confirm-modal {
    display: grid;
    position: fixed;
    inset: 0;
    z-index: 100;
    place-items: center;
    padding: 20px;
}

.venkero-app.venkero-shell .venkero-confirm-modal :focus-visible {
    outline: 2px solid var(--foreground);
    outline-offset: 3px;
    box-shadow: 0 0 0 5px var(--accent);
}

.venkero-app.venkero-shell .venkero-confirm-name { margin: 0 0 6px; font-weight: 650; overflow-wrap: anywhere; }

/* The destructive action is the only filled red in the app, and it is confined to this dialog. */
.venkero-app.venkero-shell .venkero-confirm-modal .venkero-danger-solid {
    background: var(--danger);
    border-color: var(--danger);
    color: #ffffff;
    font-weight: 600;
}

.venkero-app.venkero-shell .venkero-confirm-modal .venkero-danger-solid:hover {
    background: var(--danger);
    border-color: var(--danger);
    filter: brightness(1.08);
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   SAVED LINKS — the Add Link dialog's fields, after Peter reviewed it
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── ITEM 1: the Address field rendered as a white browser-default box ──────────────────────────────────────────────
   THE CAUSE IS ONE MISSING SELECTOR. The shared input rule near the top of this file lists
   `input[type="text"], input[type="search"], input[type="date"], input[type="number"], input[type="email"],
   input[type="tel"], input[type="file"], select, textarea` — and NOT `input[type="url"]`. So the one control on this
   screen that takes an address matched none of it and fell through to the browser's own styling: white, its own
   border, its own font.

   Written out here rather than by adding `url` to that shared list, because that list styles every screen in the
   app and Peter asked for these fixes scoped to Saved Links. The underlying inconsistency is worth its own decision;
   adding it there is a one-word change for a day when other screens can be re-checked. */
.venkero-app.venkero-shell .venkero-links-form input[type="url"] {
    box-sizing: border-box;
    min-height: var(--target);
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--foreground);
    font-family: inherit;
    font-size: 15px;
}

/* THE FOCUS RING comes from the shell's own shared rule — `:is(… input …):focus-visible` matches an input whatever
   its type — and measured in the browser the address field gets exactly the same outline and accent glow as the
   name field. Nothing is restated here that that rule already does.

   THE HOVER BACKGROUND DOES NOT, and this is the one thing that had to be repeated. The shared hover rule is
   `.venkero-app :is(… input …):hover`, specificity (0,3,0); the block above is (0,3,1), so its plain
   `background: var(--surface)` out-ranks it and the address field stayed dark on hover while the name field lit to
   `--surface-soft`. Restating the hover at a weight that wins puts the two back in step. */
.venkero-app.venkero-shell .venkero-links-form input[type="url"]:hover {
    background: var(--surface-soft);
}

/* AUTOFILL IS NOT COVERED BY ANY OF THEM. A browser paints an autofilled field with its own light background and
   text colour, and no `background` declaration can override it — the accepted counter is a very large inset shadow,
   which is what this is. Without it, a saved address turned the field white again the moment the browser filled it. */
.venkero-app.venkero-shell .venkero-links-form input[type="text"]:-webkit-autofill,
.venkero-app.venkero-shell .venkero-links-form input[type="url"]:-webkit-autofill,
.venkero-app.venkero-shell .venkero-links-form input[type="text"]:-webkit-autofill:hover,
.venkero-app.venkero-shell .venkero-links-form input[type="url"]:-webkit-autofill:hover,
.venkero-app.venkero-shell .venkero-links-form input[type="text"]:-webkit-autofill:focus,
.venkero-app.venkero-shell .venkero-links-form input[type="url"]:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--foreground);
    -webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
    box-shadow: 0 0 0 1000px var(--surface) inset;
    caret-color: var(--foreground);
}

/* ── ITEM 2: the fields occupied only part of the dialog ──────────────────────────────────────────────────────────
   ALSO ONE DECLARATION. `.venkero-app .venkero-field` carries `max-width: 340px`, which is right for a form sitting
   on a page and wrong for one filling a dialog: measured, a 560px dialog with 20px padding had 520px of content and
   fields 324px wide — 340 less the wrapper's own 8px padding on each side. The wrapper and the controls both get the
   full content width here, and the wrapper's padding goes to zero so the labels and the fields share one left edge. */
.venkero-app.venkero-shell .venkero-links-form .venkero-field {
    display: block;
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0 0 14px;
}

.venkero-app.venkero-shell .venkero-links-form input[type="text"],
.venkero-app.venkero-shell .venkero-links-form input[type="url"],
.venkero-app.venkero-shell .venkero-links-form select {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
}

/* ── THE CATEGORY SELECT, after Peter reviewed it ────────────────────────────────────────────────────────────────
   THE SAME LESSON THE TEMPLATES EDITOR TAUGHT, applied here. A select's own colours do not reach the list it
   opens, and the native popup is drawn with the system's palette unless `color-scheme` says otherwise — so in a
   dark dialog the chosen value could come out near-black on near-black. Every state is stated explicitly rather
   than left to inheritance, and `color-scheme: dark` asks the browser to draw the popup and its highlight dark
   instead of light.
   SCOPED TO SAVED LINKS on purpose: the Templates rules sit under `.venkero-tmpl-editor`, and these under
   `.venkero-links-form`, so neither reaches the approved Clients or Calendar dialogs. */
.venkero-app.venkero-shell .venkero-links-form select {
    color: var(--foreground);
    background-color: var(--surface);
    color-scheme: dark;
}

.venkero-app.venkero-shell .venkero-links-form select:hover {
    color: var(--foreground);
    background-color: var(--surface-soft);
}

.venkero-app.venkero-shell .venkero-links-form select:focus,
.venkero-app.venkero-shell .venkero-links-form select:focus-visible,
.venkero-app.venkero-shell .venkero-links-form select:active {
    color: var(--foreground);
    background-color: var(--surface);
}

/* The closed control shows the chosen row from this list, so the list carries the colours too. */
.venkero-app.venkero-shell .venkero-links-form select option {
    color: var(--foreground);
    background-color: var(--surface);
}

/* The row under the pointer, and the row already chosen: a dark ground with light text rather than the system's
   light highlight. */
.venkero-app.venkero-shell .venkero-links-form select option:checked,
.venkero-app.venkero-shell .venkero-links-form select option:hover,
.venkero-app.venkero-shell .venkero-links-form select option:focus {
    color: var(--foreground);
    background-color: var(--surface-soft);
}

/* ─────────────────────────────────────────────────────────────────────────────────────────────────────────────
   Financials → Summary (second pass, 2026-09-23)

   Scoped to `.venkero-summary`, which wraps the Summary section alone, so Invoices, Estimates, Contracts and
   Expenses keep the layout they already had. The page itself joined `body.venkero-refined-page` in venkero.php, so
   the shared shell (sidebar, heading size, staging badge, table base) now applies here exactly as on Files and
   Saved Links — that is a shell decision, taken once, not a set of overrides in this block.

   Selectors are stated `body.venkero-refined-page .venkero-app.venkero-shell …` so they win against the refined
   block's own table and heading rules honestly, rather than by needing `!important`.
   ───────────────────────────────────────────────────────────────────────────────────────────────────────────── */

/* ── the period controls: one compact row, every control the same height ───────────────────────────────────── */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-period {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 18px;
    margin: 0 0 8px;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-period form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 14px;
    margin: 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-period label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    font-size: 12px;
    line-height: 1;
    color: var(--text-muted);
}

/* Both ends pinned: WordPress's own stylesheet gives selects and date inputs their own minimum, so a height
   stated without a matching min-height is simply ignored. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-period select,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-period input[type="date"],
body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-period .button {
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    box-sizing: border-box;
    margin: 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-range-note {
    flex-basis: 100%;
    margin: 2px 0 18px;
    font-size: 13px;
}

/* THE SELECTED PERIOD WAS CUT OFF TOP AND BOTTOM, AND THIS IS WHY.
 *
 * WordPress builds its own select's height out of a large line-height — 2.71428571 — against zero vertical padding.
 * The shared control rule here then adds 10px above and below for the dark field look, which left 22px of content
 * box for a 41px line box: the text was 19px taller than the room it had, and the top and bottom of "This month"
 * were cut. Measured at 1440, 1100 and 782 before the change and after it.
 *
 * No vertical padding, and a line-height in proportion to the text, gives the line box room inside the same 44px
 * control; the browser centres the selected text in the content box. The 24px right padding is WordPress's own — the
 * room its dropdown arrow needs — and it is kept so the label cannot be cut horizontally instead. Option rows take
 * this same line-height, so the open list is normal height rather than one row per 40px. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-period select,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-period input[type="date"] {
    padding: 0 12px;
    line-height: 1.45;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-period select { padding-right: 24px; }

/* THE SELECTED TEXT WENT NEARLY BLACK THE MOMENT IT TOOK FOCUS.
 *
 * WordPress's own admin sheet carries `select:hover{color:#1e1e1e}` and `select:focus{color:#1e1e1e}` — right for
 * its own white selects, wrong for this dark field, so the label was unreadable while focused and legible again the
 * moment focus left. The light colour is now stated for every state, rest through active, so no single state can
 * decide whether the text can be read. The focus ring is deliberately left alone: it comes from the shared
 * :focus-visible rule, and the control keeps its native keyboard behaviour. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-period select,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-period select:hover,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-period select:focus,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-period select:active,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-period select:focus-visible,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-period select option {
    color: var(--foreground);
}

/* Each option carries its own colours, as on Templates and Saved Links: the dark field's own background does not
   reach the open list, and a light row on the system's white would be just as unreadable as dark text on the field. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-period select option {
    background-color: var(--surface);
    line-height: 1.45;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-period select option:checked,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-period select option:hover,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-period select option:focus {
    color: var(--foreground);
    background-color: var(--surface-soft);
}

/* ── the four figures: each a card of its own ───────────────────────────────────────────────────────────────── */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-figures {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--card-gap);
    margin: 0 0 16px;
}

@media (max-width: 1280px) {
    body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-figures { grid-template-columns: minmax(0, 1fr); }
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-figures-secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 14px;
}

@media (max-width: 640px) {
    body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-figures-secondary { grid-template-columns: minmax(0, 1fr); }
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-figure-card {
    display: flex;
    flex-direction: column;
    margin: 0;
    min-width: 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-figure-label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 6px;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-figure-label .dashicons {
    width: 17px;
    height: 17px;
    font-size: 17px;
    color: var(--link, var(--accent));
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-figure-card .venkero-metric-amount { margin: 0; }

body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-figure-card-quiet .venkero-metric-amount {
    font-size: 22px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-figure-card .venkero-metric-note {
    margin: 4px 0 0;
    font-size: 12px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-def {
    margin: 12px 0 0;
    padding-top: 9px;
    border-top: 1px solid var(--border);
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--text-muted);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-basis {
    margin: 0 0 18px;
    max-width: 82ch;
}

/* ── exports: compact, together, and the explanation behind a quiet disclosure ──────────────────────────────── */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-exports { margin: 0 0 18px; }

body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* WordPress's own sheet gives a <summary> a border on all four sides and a background tint. Both are cleared
   here, and the chevron is drawn by the block instead, so the control stays quiet and left-aligned rather than
   sitting in the panel as a full-width box. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-help { margin: 0; }

body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-help > summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: auto;
    min-height: 44px;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    box-shadow: none;
    font-size: 12.5px;
    color: var(--text-muted);
    cursor: pointer;
    list-style: none;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-help > summary::-webkit-details-marker { display: none; }

body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-help > summary::before {
    content: "\25B8";
    font-size: 11px;
    line-height: 1;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-help[open] > summary::before { content: "\25BE"; }

body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-help > summary:focus-visible {
    outline: 2px solid var(--foreground);
    outline-offset: 3px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-help p {
    margin: 8px 0 0;
    max-width: 72ch;
}

/* ── the two panels and the four reports: tables that fill their container ─────────────────────────────────── */
/* `table-layout: fixed` with a stated first column is what makes a table fill its card and stay the same shape at
   every width. The earlier pass set `display: block` on these tables to give them a scroller, which took the
   table's own box away: it then shrink-wrapped its contents, so a panel's table occupied only part of its panel
   and the report tables bunched their columns at the left of a full-width card. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary .venkero-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary .venkero-table th {
    padding: 0 12px 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    font-weight: 550;
    letter-spacing: 0;
    text-transform: none;
    text-align: left;
    color: var(--text-muted);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary .venkero-table td {
    padding: 11px 12px 11px 0;
    border-top: 1px solid var(--border);
    overflow-wrap: anywhere;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary .venkero-table tr > :last-child { padding-right: 0; }

/* The payment panels: a date, the invoice it belongs to, the amount, and where that invoice stands. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-panel .venkero-table { min-width: 440px; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-panel .venkero-table th:nth-child(1) { width: 21%; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-panel .venkero-table th:nth-child(2) { width: 26%; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-panel .venkero-table th:nth-child(3) { width: 17%; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-panel .venkero-table th:nth-child(4) { width: 36%; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-panel .venkero-table td:nth-child(1),
body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-panel .venkero-table th:nth-child(3) { white-space: nowrap; }

/* The reports: the name takes the room, the money columns line up under each other on the right. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-report .venkero-table th:nth-child(1) { width: 40%; }

body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary .venkero-num,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary .venkero-table td:nth-child(3),
body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-report .venkero-table th:not(:first-child),
body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-report .venkero-table td:not(:first-child) {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The state words come from the money layer; the pill colours are the ones the invoice list already uses, so a
   state never changes its meaning on the way to this screen. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary .venkero-status {
    font-size: 12px;
    white-space: nowrap;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-more { font-size: 12.5px; text-decoration: none; }

/* ── the four report sections, each a card ─────────────────────────────────────────────────────────────────── */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-report { margin: 0 0 16px; }

body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-report-title {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 550;
    letter-spacing: -0.01em;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary-report > .venkero-quiet {
    margin: 12px 0 0;
    font-size: 12.5px;
    max-width: 90ch;
}

@media (max-width: 782px) {
    body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary .venkero-card { padding: 16px; }
    body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary .venkero-table td,
    body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary .venkero-table th { padding-right: 8px; }
}

/* The two panels are meant to be balanced. The shell's split gives the second column a fixed width, which left
   Recent payments wide and Upcoming invoices narrow; `auto-fit` with a floor keeps them equal while there is room
   for two and stacks them when there is not, so the shell's own stacking rules stay in charge at narrow widths. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-summary .venkero-split {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
}

/* Both the badge and the bell are pinned to the top bar's right edge, and below about 1000px they land on top of
   each other. The badge keeps its own offset at every width, with room for the account menu where one is shown. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-topbar .venkero-staging { right: 108px; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-topbar:has(.venkero-account) .venkero-staging { right: 196px; }
/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   FINANCIALS → INVOICES

   Scoped to this tab's own element classes, and to nothing else. Summary's presentation is frozen exactly as it
   was reviewed; Estimates, Contracts and Expenses keep the Financials header and their current layout until their
   own pass. Nothing in this block can reach a Summary element, because no selector here names one.

   Two lessons from Summary and Saved Links are applied throughout rather than re-learned:
     • a dark control must state its own text colour in EVERY state, because WordPress's own admin stylesheet sets
       `select:hover`, `select:focus` and `input:focus` to near-black and wins on the dark surface;
     • a select's line box must fit its content box, because WordPress sets `line-height: 2.714` on selects and no
       vertical padding, which is what clipped the Summary period selector.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── the header, with this page's one primary action beside the heading ──────────────────────────────────────── */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-heading-actioned {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-heading-actioned .venkero-heading-text { min-width: 0; }

body.venkero-refined-page .venkero-app.venkero-shell .venkero-heading-slot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 6px;
}

/* ── ONE PLACEMENT FOR A PAGE'S PRIMARY ACTION, NOT TWO ──────────────────────────────────────────────────────────
 * Two implementations were in use. Projects and Pipeline print `<p class="venkero-page-cta">` right after the heading
 * and pin it at `top: 28px; right: 24px`, an offset the Pipeline comment records as "already proved clear of the
 * shell's staging badge and bell". The money tabs (Invoices, Expenses, Estimates, Contracts) put the same action
 * inside `.venkero-heading-slot` and let it sit in the heading row instead — so the same button landed on a
 * different line and a different inset depending on the page. This gives the slot the proven placement, so both
 * implementations resolve to the same spot. The heading already reserves 300px on the right, so nothing collides;
 * below 901px the slot stays in the flow exactly as the CTA does, so the responsive behaviour is unchanged. */
@media (min-width: 901px) {
    body.venkero-refined-page .venkero-app.venkero-shell .venkero-heading-slot {
        position: absolute;
        top: 28px;
        right: 24px;
        padding-top: 0;
        margin: 0;
    }

    body.venkero-refined-page .venkero-app.venkero-shell .venkero-heading-slot .button-primary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 38px;
        padding: 0 18px;
    }
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-create-invoice { font-size: 14px; }

body.venkero-refined-page .venkero-app.venkero-shell .venkero-create-invoice > span {
    font-size: 17px;
    line-height: 1;
    margin-right: 2px;
}

/* ── search and status: one compact row, controls matched in height, wrapping cleanly ───────────────────────── */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-toolbar {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 var(--card-gap);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-toolbar > label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-search { flex: 1 1 300px; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-status { flex: 0 1 200px; }

body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-toolbar .venkero-field {
    width: 100%;
    min-height: var(--target);
    box-sizing: border-box;
}

/* The select owns its own line box: WordPress's 2.714 would overflow a 44px control and clip the chosen word. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-toolbar select {
    line-height: 21.75px;
    padding: 0 24px 0 12px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-toolbar input[type="search"] { padding: 0 12px; }

/* ── ONE CONTROL HEIGHT ACROSS THE APP'S FILTER ROWS, NOT JUST THIS TOOLBAR ──────────────────────────────────────
 * The accepted fix above matched the invoice toolbar's Search and Status at 44px and gave its select a line box that
 * fits its content box (WordPress sets `line-height: 2.714` on selects and no vertical padding, which is what makes a
 * plain select read short beside a text input). Every other filter row in the app prints the same `.venkero-field`
 * controls with no matching rule, so those fell back to WordPress's own shorter control — which is why a Status
 * dropdown could sit visibly shorter than the Search box beside it, and why input padding differed screen to screen.
 * These are the same accepted numbers, applied to the rows the app actually prints. */
.venkero-app.venkero-shell .venkero-toolbar .venkero-field,
.venkero-app.venkero-shell .venkero-toolbar-row .venkero-field,
.venkero-app.venkero-shell .venkero-clients-bar .venkero-field,
.venkero-app.venkero-shell .venkero-summary-period .venkero-field,
.venkero-app.venkero-shell .venkero-invoice-toolbar .venkero-field {
    min-height: var(--target);
    box-sizing: border-box;
}

.venkero-app.venkero-shell .venkero-toolbar select,
.venkero-app.venkero-shell .venkero-toolbar-row select,
.venkero-app.venkero-shell .venkero-clients-bar select,
.venkero-app.venkero-shell .venkero-summary-period select,
.venkero-app.venkero-shell .venkero-invoice-toolbar select {
    line-height: 21.75px;
    padding: 0 24px 0 12px;
}

/* A TEXT OR SEARCH FIELD KEEPS ITS OWN PADDING AT BOTH ENDS. The Clients search was reaching the edge of its field;
   the accepted toolbar's 12px is the value the rest of the app uses. */
.venkero-app.venkero-shell .venkero-toolbar input[type="search"],
.venkero-app.venkero-shell .venkero-toolbar input[type="text"],
.venkero-app.venkero-shell .venkero-toolbar-row input[type="search"],
.venkero-app.venkero-shell .venkero-toolbar-row input[type="text"],
.venkero-app.venkero-shell .venkero-clients-bar input[type="search"],
.venkero-app.venkero-shell .venkero-clients-bar input[type="text"],
.venkero-app.venkero-shell .venkero-summary-period input[type="search"],
.venkero-app.venkero-shell .venkero-summary-period input[type="text"],
.venkero-app.venkero-shell .venkero-invoice-toolbar input[type="search"],
.venkero-app.venkero-shell .venkero-invoice-toolbar input[type="text"] {
    padding: 0 12px;
}

/* ── THE BELL IS 40px ON EVERY SCREEN, NOT 44px ON MOST OF THEM ──────────────────────────────────────────────────
 * The arranged Overview's header settled this control at 40px, and the stylesheet says why: it measured 82x46, a
 * large empty box for a 20px glyph. That rule is scoped to the arranged page only, so every other screen fell back
 * to `var(--target)` — 44px — and the same control changed size as you moved between screens. 40px is the accepted
 * value, and it is stated here once for the shell rather than left to whichever page you happen to be on. */
.venkero-app.venkero-shell .venkero-bell > summary {
    width: 40px;
    height: 40px;
    padding: 0;
}

/* ── THE EXPENSES TAB HAD NO STYLES OF ITS OWN ───────────────────────────────────────────────────────────────────
 * Not one rule in this stylesheet matched `.venkero-expenses-*`, so that tab's filter row, its entry card and its
 * per-row Withdraw control were laid out by WordPress's own defaults: control heights that did not match each other,
 * cramped buttons, and an entry card stretched across the full width for a handful of fields — which is what made it
 * read as a large empty panel. These are the accepted component numbers the rest of the app already uses. */
.venkero-app.venkero-shell .venkero-expenses-filters {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 var(--card-gap, 18px);
}

.venkero-app.venkero-shell .venkero-expenses-filters .venkero-expenses-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.venkero-app.venkero-shell .venkero-expenses-filters .venkero-field {
    min-height: var(--target);
    box-sizing: border-box;
}

.venkero-app.venkero-shell .venkero-expenses-filters select {
    line-height: 21.75px;
    padding: 0 24px 0 12px;
}

.venkero-app.venkero-shell .venkero-expenses-filters input[type="search"],
.venkero-app.venkero-shell .venkero-expenses-filters input[type="text"],
.venkero-app.venkero-shell .venkero-expenses-filters input[type="date"],
.venkero-app.venkero-shell .venkero-expenses-filters input[type="number"] {
    padding: 0 12px;
}

/* The tab's own controls keep to the right edge of the filter row, as they do on Invoices. */
.venkero-app.venkero-shell .venkero-expenses-filters-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

/* THE ENTRY CARD IS AS WIDE AS ITS FIELDS, AND NO WIDER. It carried the full page width for four inputs. */
.venkero-app.venkero-shell details.venkero-expenses-entry {
    max-width: 760px;
}

/* Withdraw: a quiet control that still matches every other button's height and padding. */
.venkero-app.venkero-shell .venkero-expenses-withdraw > summary {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
}

.venkero-app.venkero-shell .venkero-expenses-withdraw button[type="submit"] {
    min-height: var(--target);
    padding: 0 16px;
}

/* ── A FOLDER CHIP'S COUNT SITS ON THE CHIP'S LINE ───────────────────────────────────────────────────────────────
 * The count is a `venkero-meta` span inside an inline-flex chip. It rode high on the chip's baseline instead of
 * centring with the folder name, which is what made the counts look raised and misaligned. */
.venkero-app.venkero-shell .venkero-folder-chip .venkero-meta {
    align-self: center;
    line-height: 1.4;
    white-space: nowrap;
}

/* ── EVENT DETAILS IN THE MONTH GRID ARE TWO LINES, NOT ONE ──────────────────────────────────────────────────────
 * A day cell is about a hundred pixels wide, and the title and its meta line were each clipped to a single line with
 * an ellipsis — so a calendar entry showed a few characters and hid the rest of the record. Two lines fit the cell
 * and the whole record stays reachable in the agenda and in the event's own dialog. The cell height is deliberately
 * untouched: that is a comparison against the approved Calendar reference, which is not in the workspace. */
.venkero-app.venkero-shell .venkero-event-title,
.venkero-app.venkero-shell .venkero-event-meta {
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* ── the cards and disclosures of this tab ──────────────────────────────────────────────────────────────────── */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-list,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-payment-history { margin-bottom: var(--card-gap); }

body.venkero-refined-page .venkero-app.venkero-shell :is(.venkero-invoice-create, .venkero-invoice-detail) {
    margin-bottom: var(--card-gap);
}

body.venkero-refined-page .venkero-app.venkero-shell :is(
    .venkero-invoice-settings,
    .venkero-payment-card,
    .venkero-reverse
) {
    margin-bottom: var(--card-gap);
}

/* A disclosure that reads as a card head: title, what it is for, and a chevron that says it opens. */
body.venkero-refined-page .venkero-app.venkero-shell :is(.venkero-invoice-settings, .venkero-payment-card, .venkero-reverse) > summary {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    min-height: var(--target);
    margin: 0;
    padding: 0;
    cursor: pointer;
    list-style: none;
}

body.venkero-refined-page .venkero-app.venkero-shell :is(.venkero-invoice-settings, .venkero-payment-card, .venkero-reverse) > summary::-webkit-details-marker { display: none; }

body.venkero-refined-page .venkero-app.venkero-shell :is(.venkero-invoice-settings, .venkero-payment-card, .venkero-reverse) > summary::before {
    content: "\25B8";
    order: 3;
    margin-left: auto;
    font-size: 12px;
    line-height: 1;
    color: var(--text-muted);
}

body.venkero-refined-page .venkero-app.venkero-shell :is(.venkero-invoice-settings, .venkero-payment-card, .venkero-reverse)[open] > summary::before { content: "\25BE"; }

body.venkero-refined-page .venkero-app.venkero-shell :is(.venkero-invoice-settings, .venkero-payment-card, .venkero-reverse) > summary:focus-visible {
    outline: 2px solid var(--foreground);
    outline-offset: 3px;
}

body.venkero-refined-page .venkero-app.venkero-shell :is(
    .venkero-invoice-settings-body,
    .venkero-payment-body,
    .venkero-reverse-panel
) {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-settings-body p:last-child,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-payment-body p:last-child { margin-bottom: 0; }

/* ── forms: aligned labels, fields that fit their content, no narrower than the task needs ──────────────────── */
body.venkero-refined-page .venkero-app.venkero-shell :is(
    .venkero-invoice-toolbar,
    .venkero-invoice-create,
    .venkero-invoice-settings,
    .venkero-payment-card,
    .venkero-reverse-panel
) .venkero-field-row {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 0 16px;
}

body.venkero-refined-page .venkero-app.venkero-shell :is(
    .venkero-invoice-create,
    .venkero-payment-card,
    .venkero-reverse-panel
) .venkero-field-row > label,
body.venkero-refined-page .venkero-app.venkero-shell :is(.venkero-invoice-create, .venkero-payment-card, .venkero-reverse-panel) label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

body.venkero-refined-page .venkero-app.venkero-shell :is(.venkero-invoice-create, .venkero-payment-card, .venkero-reverse-panel) .venkero-field-wide { flex: 1 1 280px; }

body.venkero-refined-page .venkero-app.venkero-shell :is(
    .venkero-invoice-toolbar,
    .venkero-invoice-create,
    .venkero-invoice-settings,
    .venkero-payment-card,
    .venkero-reverse-panel
) :is(input, select, textarea) {
    min-height: 40px;
    box-sizing: border-box;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
    font-size: 14px;
    line-height: 1.4;
}

body.venkero-refined-page .venkero-app.venkero-shell :is(
    .venkero-invoice-toolbar,
    .venkero-invoice-create,
    .venkero-invoice-settings,
    .venkero-payment-card,
    .venkero-reverse-panel
) :is(select) {
    line-height: 22px;
    padding: 8px 32px 8px 12px;
}

body.venkero-refined-page .venkero-app.venkero-shell :is(
    .venkero-invoice-toolbar,
    .venkero-invoice-create,
    .venkero-invoice-settings,
    .venkero-payment-card,
    .venkero-reverse-panel
) textarea { min-height: 84px; }

body.venkero-refined-page .venkero-app.venkero-shell .venkero-field-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
}

/* Readable at rest, hovered, focused, held and after a choice — WordPress's own admin sheet colours all four. */
body.venkero-refined-page .venkero-app.venkero-shell :is(
    .venkero-invoice-toolbar,
    .venkero-invoice-create,
    .venkero-invoice-settings,
    .venkero-payment-card,
    .venkero-reverse-panel
) :is(input, select, textarea),
body.venkero-refined-page .venkero-app.venkero-shell :is(
    .venkero-invoice-toolbar,
    .venkero-invoice-create,
    .venkero-invoice-settings,
    .venkero-payment-card,
    .venkero-reverse-panel
) :is(input, select, textarea):hover,
body.venkero-refined-page .venkero-app.venkero-shell :is(
    .venkero-invoice-toolbar,
    .venkero-invoice-create,
    .venkero-invoice-settings,
    .venkero-payment-card,
    .venkero-reverse-panel
) :is(input, select, textarea):focus,
body.venkero-refined-page .venkero-app.venkero-shell :is(
    .venkero-invoice-toolbar,
    .venkero-invoice-create,
    .venkero-invoice-settings,
    .venkero-payment-card,
    .venkero-reverse-panel
) :is(input, select, textarea):active,
body.venkero-refined-page .venkero-app.venkero-shell :is(
    .venkero-invoice-toolbar,
    .venkero-invoice-create,
    .venkero-invoice-settings,
    .venkero-payment-card,
    .venkero-reverse-panel
) :is(input, select, textarea):focus-visible {
    color: var(--foreground) !important;
    background: var(--surface-soft);
}

body.venkero-refined-page .venkero-app.venkero-shell :is(
    .venkero-invoice-toolbar,
    .venkero-invoice-create,
    .venkero-invoice-settings,
    .venkero-payment-card,
    .venkero-reverse-panel
) :is(input, select, textarea):focus {
    background: var(--surface);
    border-color: var(--foreground);
}

body.venkero-refined-page .venkero-app.venkero-shell :is(
    .venkero-invoice-toolbar,
    .venkero-invoice-create,
    .venkero-invoice-settings,
    .venkero-payment-card,
    .venkero-reverse-panel
) :is(input, select, textarea)::placeholder { color: var(--text-muted); opacity: 1; }

body.venkero-refined-page .venkero-app.venkero-shell :is(
    .venkero-invoice-toolbar,
    .venkero-invoice-create,
    .venkero-invoice-settings,
    .venkero-payment-card,
    .venkero-reverse-panel
) option {
    background: var(--surface);
    color: var(--foreground);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-cancel-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--target);
    margin-left: 4px;
    color: var(--text-muted);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-cancel-link:hover { color: var(--foreground); }

/* ── the list: a full-width card, deliberate column widths, amounts right-aligned ───────────────────────────── */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-list > .venkero-table-scroll > table,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-payment-history > .venkero-table-scroll > table {
    /* Ten columns, sized so that the table FITS the card at a desktop width instead of scrolling inside it —
       measured at 1440: the card's content box is 1049px, so the floor is 1010px and the title takes the rest.
       Below roughly 1150px of viewport the card scrolls, which is the only scroll anywhere on this page. */
    min-width: 1010px;
    table-layout: fixed;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table { width: 100%; }

body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table th,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table td { vertical-align: middle; }

body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table th:nth-child(1)  { width: 68px; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table th:nth-child(3)  { width: 104px; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table th:nth-child(4)  { width: 104px; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table th:nth-child(5)  { width: 92px; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table th:nth-child(6)  { width: 92px; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table th:nth-child(7)  { width: 96px; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table th:nth-child(8)  { width: 106px; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table th:nth-child(9)  { width: 126px; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table th:nth-child(10) { width: 80px; }

/* A long title wraps inside its own column rather than pushing the columns around. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-title {
    white-space: normal;
    overflow-wrap: anywhere;
    hyphens: auto;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-number a { text-decoration: none; font-weight: 600; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-number a:hover { text-decoration: underline; }

body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-actions { white-space: nowrap; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-actions form { display: inline; margin: 0; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-actions a { margin-right: 9px; }

body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-actions .button,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-actions button {
    min-height: 34px;
    padding: 0 12px;
    font-size: 13px;
}

/* The payment history's own columns: a date, an invoice, a number, a method, a reference, a state. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-payment-table th:nth-child(1) { width: 128px; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-payment-table th:nth-child(2) { width: 106px; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-payment-table th:nth-child(3) { width: 118px; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-payment-table th:nth-child(4) { width: 130px; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-payment-table th:nth-child(6) { width: 104px; }

body.venkero-refined-page .venkero-app.venkero-shell .venkero-payment-export { margin: 18px 0 0; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-payment-export form { margin: 0; }

body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-totals { margin: 14px 0 0; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-nomatch { border-style: dashed; }

/* ── narrower widths: the header stacks, the toolbar keeps its controls, nothing clips ─────────────────────── */
@media (max-width: 1100px) {
    body.venkero-refined-page .venkero-app.venkero-shell .venkero-heading-slot { padding-top: 0; }
}

@media (max-width: 782px) {
    body.venkero-refined-page .venkero-app.venkero-shell .venkero-heading-actioned { flex-direction: column; align-items: stretch; }
    body.venkero-refined-page .venkero-app.venkero-shell .venkero-heading-slot { padding-top: 0; }
    body.venkero-refined-page .venkero-app.venkero-shell .venkero-create-invoice { justify-content: center; }

    body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-search,
    body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-status { flex: 1 1 100%; }

    body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-toolbar .button { width: 100%; justify-content: center; }

    body.venkero-refined-page .venkero-app.venkero-shell :is(
        .venkero-invoice-create,
        .venkero-payment-card,
        .venkero-reverse-panel
    ) .venkero-field-row { flex-direction: column; align-items: stretch; }

    body.venkero-refined-page .venkero-app.venkero-shell :is(.venkero-invoice-create, .venkero-payment-card, .venkero-reverse-panel) .venkero-field-row > label { width: 100%; }
}
/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   FINANCIALS → INVOICES, second pass

   Four corrections, all measured not guessed:
     • the search cluster sits together instead of being pushed apart by a stretching field;
     • the three disclosures read as quiet padded headers with a chevron, and their OPENED bodies are styled too;
     • Status and Actions get room, so a badge never touches the button beside it;
     • the creation form is a grid — broad fields, a compact pair, and lines as rows.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── the search cluster ─────────────────────────────────────────────────────────────────────────────────────── */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-toolbar { gap: 10px; }

body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-search {
    flex: 0 1 320px;
    max-width: 320px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-status {
    flex: 0 1 190px;
    max-width: 190px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-toolbar > .button,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-toolbar > a {
    flex: 0 0 auto;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-toolbar .venkero-label {
    font-size: 12.5px;
    color: var(--text-muted);
}

/* ── the three disclosures: quiet, padded, chevroned — and their opened bodies styled as well ───────────────── */
body.venkero-refined-page .venkero-app.venkero-shell :is(
    .venkero-invoice-settings,
    .venkero-payment-card,
    .venkero-reverse
) {
    padding: 18px 22px;
}

body.venkero-refined-page .venkero-app.venkero-shell :is(
    .venkero-invoice-settings,
    .venkero-payment-card,
    .venkero-reverse
) > summary {
    gap: 10px;
    min-height: 40px;
    padding: 0;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    text-decoration: none;
}

body.venkero-refined-page .venkero-app.venkero-shell :is(
    .venkero-invoice-settings,
    .venkero-payment-card,
    .venkero-reverse
) > summary:hover,
body.venkero-refined-page .venkero-app.venkero-shell :is(
    .venkero-invoice-settings,
    .venkero-payment-card,
    .venkero-reverse
) > summary:active {
    border: 0 !important;
    background: none !important;
}

body.venkero-refined-page .venkero-app.venkero-shell :is(
    .venkero-invoice-settings,
    .venkero-payment-card,
    .venkero-reverse
) > summary .venkero-card-title {
    font-size: 16px;
}

body.venkero-refined-page .venkero-app.venkero-shell :is(
    .venkero-invoice-settings,
    .venkero-payment-card,
    .venkero-reverse
) > summary::before {
    font-size: 13px;
    color: var(--text-muted);
}

body.venkero-refined-page .venkero-app.venkero-shell :is(
    .venkero-invoice-settings-body,
    .venkero-payment-body,
    .venkero-reverse-panel
) {
    margin-top: 16px;
    padding-top: 16px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-reverse-panel > p:first-child { margin-top: 0; }

/* ── Status and Actions: room to read, and a button that never touches the badge ────────────────────────────── */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-list > .venkero-table-scroll > table,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-payment-history > .venkero-table-scroll > table {
    min-width: 1040px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table th:nth-child(3)  { width: 96px; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table th:nth-child(4)  { width: 96px; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table th:nth-child(9)  { width: 140px; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table th:nth-child(10) { width: 88px; }

body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table td:nth-child(9) { padding-right: 16px; }

body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table tbody .venkero-status {
    white-space: nowrap;
    display: inline-block;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-actions { padding-left: 12px; }

/* ── the creation form: a grid, with lines as rows ──────────────────────────────────────────────────────────── */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-create-row {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 0 16px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-create-row > label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-grow { flex: 1 1 280px; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-narrow { flex: 0 1 170px; }

body.venkero-refined-page .venkero-app.venkero-shell .venkero-create-row .venkero-field,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-create-grid > p > label > .venkero-field { width: 100%; }

body.venkero-refined-page .venkero-app.venkero-shell .venkero-create-finish {
    align-items: center;
    gap: 14px;
    margin-top: 2px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-lines { overflow-x: auto; margin-bottom: 6px; }

body.venkero-refined-page .venkero-app.venkero-shell .venkero-lines-heading {
    display: block;
    margin: 0 0 8px;
    font-size: 12.5px;
    color: var(--text-muted);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-lines-table {
    width: 100%;
    min-width: 760px;      /* the rows keep their shape; the form scrolls, not the page */
    table-layout: fixed;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-lines-table th:nth-child(2) { width: 104px; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-lines-table th:nth-child(3) { width: 128px; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-lines-table th:nth-child(4) { width: 124px; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-lines-table th:nth-child(5) { width: 106px; }

body.venkero-refined-page .venkero-app.venkero-shell .venkero-lines-table td { padding: 8px 10px 8px 0; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-lines-table .venkero-field { width: 100%; min-height: 38px; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-lines-table .venkero-line-taxable { padding-right: 8px; }

body.venkero-refined-page .venkero-app.venkero-shell .venkero-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-line-actions .button {
    min-height: 38px;
    padding: 0 12px;
    font-size: 13px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-line-add { min-height: 38px; padding: 0 14px; font-size: 13px; }

/* The advanced text writer: the same quiet treatment as Summary's exports disclosure, so it reads as an aside. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-lines-raw { margin: 4px 0 18px; }

body.venkero-refined-page .venkero-app.venkero-shell .venkero-lines-raw > summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    list-style: none;
    font-size: 12.5px;
    color: var(--text-muted);
    cursor: pointer;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-lines-raw > summary::-webkit-details-marker { display: none; }

body.venkero-refined-page .venkero-app.venkero-shell .venkero-lines-raw > summary::before { content: "\25B8"; font-size: 11px; line-height: 1; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-lines-raw[open] > summary::before { content: "\25BE"; }

body.venkero-refined-page .venkero-app.venkero-shell .venkero-lines-raw > summary:focus-visible {
    outline: 2px solid var(--foreground);
    outline-offset: 3px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-lines-textarea { width: 100%; }

body.venkero-refined-page .venkero-app.venkero-shell .venkero-lines-warning {
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--status-action-bg);
    color: var(--status-action-text);
    font-size: 13px;
}

/* ── narrower widths ───────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-search,
    body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-status { flex: 1 1 240px; max-width: none; }
}

@media (max-width: 782px) {
    body.venkero-refined-page .venkero-app.venkero-shell .venkero-create-row { flex-direction: column; align-items: stretch; }
    body.venkero-refined-page .venkero-app.venkero-shell .venkero-grow,
    body.venkero-refined-page .venkero-app.venkero-shell .venkero-narrow { flex: 1 1 100%; }
    body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-search,
    body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-status { flex: 1 1 100%; max-width: none; }
}

/* A field inside a deliberate grid fills its column: the app's shared field max-width is meant for a
   single-column form, and applying it inside a grid is what left a 349px hole beside the description. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-create-grid .venkero-field,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-lines-table .venkero-field {
    max-width: none;
    width: 100%;
}


/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   INVOICE LIST — declared column proportions, compact text, reserved room for the actions, and a deliberate scroll.

   The list has ten columns. Left to the browser's automatic table layout, the columns that CAN wrap (title, client,
   project) absorb every bit of compression while the ones that cannot (a status pill) keep their width — so at a
   narrower window the identity columns collapse to a few characters, the dates split across two lines, and the
   actions cell, whose content cannot wrap either, ends up wider than its column and pressed against the right edge.
   Widths are declared here instead, and the table keeps a floor width: below it the card scrolls rather than
   crushing a column, which is the deliberate responsive behaviour rather than an accident of layout.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table {
    min-width: 1040px;
    table-layout: fixed;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-table-scroll {
    overflow-x: auto;
}

/* 1 Number · 2 Title · 3 Client · 4 Project · 5 Issued · 6 Due · 7 Total · 8 Outstanding · 9 Status · 10 Actions */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table th:nth-child(1) { width: 5%; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table th:nth-child(2) { width: 14%; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table th:nth-child(3) { width: 9%; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table th:nth-child(4) { width: 10%; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table th:nth-child(5) { width: 9.5%; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table th:nth-child(6) { width: 9.5%; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table th:nth-child(7) { width: 9%; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table th:nth-child(8) { width: 9.5%; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table th:nth-child(9) { width: 11%; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table th:nth-child(10) { width: 12.5%; }

/* The three text columns keep one line each. The whole value stays available: the cell carries it as its title, so
   hovering shows what was shortened and nothing is lost to the layout. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table th:nth-child(2),
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table th:nth-child(3),
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table th:nth-child(4),
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table td:nth-child(2),
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table td:nth-child(3),
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table td:nth-child(4) {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

/* Dates read as dates — one line — and the two money columns are right-aligned so digits line up down the column. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table td:nth-child(1),
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table td:nth-child(5),
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table td:nth-child(6),
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table td:nth-child(7),
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table td:nth-child(8),
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table td:nth-child(9),
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table td:nth-child(10) {
    white-space: nowrap;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table th:nth-child(7),
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table th:nth-child(8),
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table th:nth-child(10),
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table td:nth-child(7),
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table td:nth-child(8),
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table td:nth-child(10) {
    text-align: right;
}

/* Actions: a reserved column, and two controls built the same way so they sit on one line, on one baseline, inside
   the table. Edit is a quiet secondary control beside the primary Issue button rather than a bare link. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table td.venkero-invoice-actions {
    padding-left: 16px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table td.venkero-invoice-actions > form {
    display: inline;
    margin: 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table td.venkero-invoice-actions {
    padding-left: 12px;
}

.venkero-invoice-table td.venkero-invoice-actions > a,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table td.venkero-invoice-actions > form > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    height: 32px;
    min-height: 32px;
    padding: 0 12px;
    margin: 0 6px 0 0;
    font-size: 13px;
    font-weight: 550;
    line-height: 1;
    border-radius: 8px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table td.venkero-invoice-actions > form > button {
    margin-right: 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table td.venkero-invoice-actions > a {
    border: 1px solid rgba(247, 249, 245, .22);
    color: var(--ink-strong, #f7f9f5);
    text-decoration: none;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table td.venkero-invoice-actions > a:hover {
    border-color: rgba(198, 247, 74, .55);
    background: rgba(198, 247, 74, .08);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table td.venkero-invoice-actions > a:focus-visible {
    outline: 2px solid var(--accent, #c6f74a);
    outline-offset: 2px;
}

/* Search, Status and Apply share one baseline: the button is the height of the fields, so it lines up with the
   inputs rather than floating below the labels. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-toolbar {
    align-items: flex-end;
    gap: 12px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-toolbar > label {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

/* The field itself carried an 8px bottom margin, which is why the Apply button sat below the visible inputs even
   once the boxes lined up: the margin was inside the label, below the control. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-toolbar label .venkero-field {
    margin-bottom: 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-toolbar {
    margin-bottom: 14px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-toolbar > button {
    align-self: flex-end;
    height: 44px;
    min-height: 44px;
    margin: 0;
}

/* ── The two collapsed sections: same content, less weight ─────────────────────────────────────────────────────
   They are set once and rarely opened, so they read as quiet rows rather than as cards competing with the list. */
body.venkero-refined-page .venkero-app.venkero-shell :is(.venkero-invoice-settings, .venkero-payment-card, .venkero-reverse) {
    padding: 8px 18px;
    margin-bottom: 14px;
}

body.venkero-refined-page .venkero-app.venkero-shell :is(.venkero-invoice-settings, .venkero-payment-card, .venkero-reverse) > summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

body.venkero-refined-page .venkero-app.venkero-shell :is(.venkero-invoice-settings, .venkero-payment-card, .venkero-reverse) > summary .venkero-card-title {
    font-size: 15px;
    font-weight: 600;
}

body.venkero-refined-page .venkero-app.venkero-shell :is(.venkero-invoice-settings, .venkero-payment-card, .venkero-reverse) > summary .venkero-quiet {
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12.5px;
}

body.venkero-refined-page .venkero-app.venkero-shell :is(.venkero-invoice-settings, .venkero-payment-card, .venkero-reverse) > summary:focus-visible {
    outline: 2px solid var(--accent, #c6f74a);
    outline-offset: 3px;
}


/* ── Two tidy lines for descriptive text, and the whole value within reach ─────────────────────────────────────
   A title, client or project name gets two lines before it is shortened. The clamp is released on hover, when the
   row holds keyboard focus, or when the text itself is focused or tapped — a title attribute alone served neither
   keyboard nor touch. The markup is unchanged underneath, so a screen reader reads the full value either way. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table td .venkero-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table tr:hover td .venkero-clamp,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table tr:focus-within td .venkero-clamp,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table td .venkero-clamp:focus {
    -webkit-line-clamp: unset;
    overflow: visible;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table td .venkero-clamp:focus-visible {
    outline: 2px solid var(--accent, #c6f74a);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ── The two collapsed sections read in the portal's own form typography ──────────────────────────────────────
   Their labels and controls were arriving in a monospace face with wider tracking than the rest of the portal.
   Matched to the toolbar's own label and field treatment; nothing about their behaviour changes. */
body.venkero-refined-page .venkero-app.venkero-shell :is(.venkero-invoice-settings, .venkero-payment-card, .venkero-reverse) :is(label, .venkero-label, select, input, textarea, option, button) {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    letter-spacing: normal;
}

body.venkero-refined-page .venkero-app.venkero-shell :is(.venkero-invoice-settings, .venkero-payment-card, .venkero-reverse) label .venkero-label {
    font-size: 12.5px;
    letter-spacing: 1px;
}

body.venkero-refined-page .venkero-app.venkero-shell :is(.venkero-invoice-settings, .venkero-payment-card, .venkero-reverse) :is(select, input, textarea) {
    font-size: 14px;
}

/* FINAL PROPORTIONS for the invoice list */
/* Declared last so nothing earlier can win. Number, Status and Actions are sized to what they hold;
   Title and Project take the rest, with two lines allowed. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table th:nth-child(1) { width: 4.25%; }   /* Number — the link and its number */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table th:nth-child(2) { width: 14%; }   /* Title — the widest share of the list */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table th:nth-child(3) { width: 8.5%; }   /* Client */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table th:nth-child(4) { width: 11%; }   /* Project */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table th:nth-child(5) { width: 9.5%; }   /* Issued */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table th:nth-child(6) { width: 9.5%; }   /* Due */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table th:nth-child(7) { width: 9%; }   /* Total */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table th:nth-child(8) { width: 9.5%; }   /* Outstanding */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table th:nth-child(9) { width: 12.5%; }   /* Status — "Awaiting payment" measures 125px */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-invoice-table th:nth-child(10) { width: 12.25%; }   /* Actions — Edit + Issue need 123px */


/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   ESTIMATES AND CONTRACTS — the tab, its filters, the list-and-panel arrangement, and the writing view.

   Same conventions as the invoice list on purpose: the count inside the card head, declared column proportions,
   a table floor that scrolls rather than crushing a column, one-line text that keeps its whole value on the cell,
   and right-aligned money. The selected row is the panel's state, so `&document=<id>` is both the old detail link
   and the way the panel opens; on a narrow screen the panel comes first, because a panel you have to scroll down
   to find is a panel nobody sees.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-list-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin: 0 0 18px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-list-head .venkero-card-title {
    margin: 0 0 4px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-document-toolbar {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 18px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-document-toolbar label {
    display: flex;
    flex-direction: column;
    margin: 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-document-search input {
    min-width: 240px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-document-toolbar > button {
    height: 44px;
    min-height: 44px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-document-clear {
    align-self: center;
    margin-left: 4px;
}

/* The arrangement: list and panel side by side when there is room for both. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

@media (min-width: 1500px) {
    body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-split.venkero-has-panel {
        grid-template-columns: minmax(0, 1.35fr) minmax(380px, 0.65fr);
    }

    body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-panel {
        position: sticky;
        top: 24px;
    }
}

/* Below that the list must not be crushed to make two columns fit: the panel stacks, and comes first. */
@media (max-width: 1499px) {
    body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-panel {
        order: -1;
    }
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-table {
    min-width: 1080px;
    table-layout: fixed;
}

/* 1 Estimate · 2 Client · 3 Amount · 4 Created · 5 Status · 6 Actions */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-table th:nth-child(1) { width: 26%; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-table th:nth-child(2) { width: 18%; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-table th:nth-child(3) { width: 12%; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-table th:nth-child(4) { width: 14%; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-table th:nth-child(5) { width: 13%; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-table th:nth-child(6) { width: 17%; }

/* ── THE CONTRACTS TABLE IS NOT THE ESTIMATES TABLE, AND IT WAS WEARING ITS WIDTHS ───────────────────────────────
 * Both lists print through `.venkero-estimate-table`, so the contract list inherited the percentages written for the
 * ESTIMATE column order (1 Estimate · 2 Client · 3 Amount · 4 Created · 5 Status · 6 Actions). A contract prints a
 * different order — 1 Client · 2 Project · 3 Contract · 4 Status · 5 Issued · 6 Sent · 7 Response date · 8 Actions —
 * so the title landed on the 12% "Amount" width, about 130px, while Client wore the 26% meant for the title. That is
 * the premature truncation: the text is whole, the column was carrying another table's measurement. These widths
 * follow the contracts' own order, and the table is a little wider because this list has the columns to fill it. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-contract-table { min-width: 1180px; }

body.venkero-refined-page .venkero-app.venkero-shell .venkero-contract-table th:nth-child(1) { width: 16%; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-contract-table th:nth-child(2) { width: 13%; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-contract-table th:nth-child(3) { width: 26%; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-contract-table th:nth-child(4) { width: 10%; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-contract-table th:nth-child(5) { width: 10%; }
body.venkero-refined-page .venkero-app.venkero-shell .venkero-contract-table th:last-child   { width: 13%; }

body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-table td:nth-child(4),
body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-table td:nth-child(6) {
    white-space: nowrap;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-identity a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-decoration: none;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-number {
    font-weight: 600;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-identity .venkero-clamp {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(247, 249, 245, .72);
    font-size: 13px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-client {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-table tr.venkero-selected td {
    background: rgba(198, 247, 74, .07);
}


/* Row actions are the invoice list's own controls, so Edit and Issue look the same on either tab. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-actions > form {
    display: inline;
    margin: 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-actions > a,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-actions > form > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    height: 32px;
    min-height: 32px;
    padding: 0 14px;
    margin: 0 8px 0 0;
    font-size: 13px;
    font-weight: 550;
    line-height: 1;
    border-radius: 8px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-actions > a {
    border: 1px solid rgba(247, 249, 245, .22);
    color: var(--ink-strong, #f7f9f5);
    text-decoration: none;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-actions > a:hover {
    border-color: rgba(198, 247, 74, .55);
    background: rgba(198, 247, 74, .08);
}

/* ── writing an estimate ──────────────────────────────────────────────────────────────────────────────── */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-editor-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

@media (min-width: 1000px) {
    body.venkero-refined-page .venkero-app.venkero-shell .venkero-editor-columns {
        grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
    }
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-editor-columns .venkero-card,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-editor-items {
    margin: 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-editor-items {
    margin-top: 20px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-item-head,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-item-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 90px 130px 110px 36px;
    gap: 10px;
    align-items: center;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-item-head {
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(247, 249, 245, .55);
    padding-bottom: 6px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-item-row + .venkero-item-row {
    margin-top: 8px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-item-row input {
    width: 100%;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-item-amount {
    text-align: right;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-item-remove {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(247, 249, 245, .18);
    background: transparent;
    color: rgba(247, 249, 245, .7);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-item-remove:hover {
    border-color: rgba(198, 247, 74, .5);
    color: var(--ink-strong, #f7f9f5);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-editor-item-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0 8px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-total {
    font-size: 15px;
    text-align: right;
    margin: 0 0 10px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-total strong {
    font-size: 20px;
    margin-left: 8px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-lines-fallback {
    margin-top: 10px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-lines-fallback textarea {
    width: 100%;
}

/* Save stays reachable at the foot of the writing screen. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-editor-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    margin-top: 18px;
    border-top: 1px solid rgba(247, 249, 245, .12);
    background: var(--shell-bg, #14170f);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* History, as secondary information behind a summary that states the counts. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-history {
    margin-top: 18px;
    border-top: 1px solid rgba(247, 249, 245, .12);
    padding-top: 12px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-history > summary {
    cursor: pointer;
    color: rgba(247, 249, 245, .72);
    font-size: 13px;
    letter-spacing: .03em;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-history[open] > summary {
    margin-bottom: 8px;
}

/* ── estimates: the controls, the table, and the writing screen ─────────────────────────────────────── */

/* The filters line up on one baseline, with controls of one height — the thing that made Apply look
   detached from Search and Status was three different control heights on one row. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-document-toolbar {
    align-items: flex-end;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-document-toolbar .venkero-label {
    display: block;
    margin: 0 0 6px;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(247, 249, 245, .6);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-document-toolbar input,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-document-toolbar select,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-document-toolbar button {
    height: 44px;
    min-height: 44px;
    line-height: 42px;
    padding: 0 12px;
    margin: 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-document-search input {
    min-width: 260px;
}

/* The table scrolls inside its own container instead of being clipped at the container's edge — the
   reason the Actions heading was cut off at a narrower window. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-table-scroll {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-table {
    min-width: 960px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-table th:last-child,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-table td:last-child {
    text-align: right;
    white-space: nowrap;
}

/* Status pills, at a size that can be read without leaning in. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-table .venkero-pill {
    display: inline-block;
    padding: 3px 10px;
    font-size: 12.5px;
    line-height: 18px;
    border-radius: 999px;
    white-space: nowrap;
}

/* ── the writing screen ───────────────────────────────────────────────────────────────────────────────── */
/* Controls fill the column they are in: the cards were wide and the inputs inside them were strips. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-editor .venkero-field input,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-editor .venkero-field select,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-editor .venkero-field textarea {
    width: 100%;
    max-width: 100%;
    height: 44px;
    min-height: 44px;
    padding: 10px 12px;
    margin: 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-editor .venkero-field textarea {
    height: auto;
    min-height: 168px;
    line-height: 1.55;
    resize: vertical;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-editor .venkero-field {
    display: block;
    margin: 0 0 14px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-editor .venkero-card-title {
    margin: 0 0 14px;
}

@media (min-width: 1000px) {
    body.venkero-refined-page .venkero-app.venkero-shell .venkero-editor-columns {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 18px;
    }
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-editor-items .venkero-item-row input,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-editor-items .venkero-item-row select {
    height: 42px;
    min-height: 42px;
    padding: 8px 10px;
    margin: 0;
}

/* The figures, together. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-totals {
    margin: 18px 0 4px;
    padding: 14px 0 0;
    border-top: 1px solid rgba(247, 249, 245, .14);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-total-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    margin: 0 0 8px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-total-row > span:first-child,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-total-row > label {
    color: rgba(247, 249, 245, .72);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-total-rate {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-total-rate input {
    width: 72px;
    height: 40px;
    min-height: 40px;
    padding: 8px 10px;
    text-align: right;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-total-grand strong {
    font-size: 20px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-totals-note {
    font-size: 12.5px;
    text-align: right;
}

/* The fallback is a quiet disclosure, not a second button competing with the real ones. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-editor .venkero-lines-fallback {
    margin: 12px 0 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-editor .venkero-lines-fallback > summary {
    cursor: pointer;
    font-size: 13px;
    color: rgba(247, 249, 245, .55);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-editor .venkero-lines-fallback[open] > summary {
    color: rgba(247, 249, 245, .8);
    margin-bottom: 8px;
}

/* Save stays reachable, and the last field is never underneath it. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-editor {
    padding-bottom: 24px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-editor-actions {
    background: var(--shell-bg, #14170f);
    box-shadow: 0 -14px 18px -12px rgba(20, 23, 15, .95);
    flex-wrap: wrap;
    row-gap: 10px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-editor-actions .venkero-quiet {
    font-size: 12.5px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-editor-actions button {
    height: 44px;
    min-height: 44px;
}

/* The list fits a normal window: the table no longer needs 960px to be readable, and Actions stays in view. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-table {
    min-width: 820px;
}

/* Room under the last field, so the sticky actions never sit on top of it. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-editor {
    padding-bottom: 96px;
}

/* Status pills in the estimate list: the row used a bare span, which is not readable at a glance. Same
   meanings, the same shape the portal uses elsewhere, in the list's own colours. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-table .venkero-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 13px;
    line-height: 18px;
    font-weight: 550;
    white-space: nowrap;
    border: 1px solid rgba(247, 249, 245, .22);
    color: var(--ink-strong, #f7f9f5);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-table .venkero-status-draft {
    border-color: rgba(247, 249, 245, .28);
    color: rgba(247, 249, 245, .88);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-table .venkero-status-issued {
    border-color: rgba(198, 247, 74, .55);
    background: rgba(198, 247, 74, .1);
    color: #e9ffb8;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-table .venkero-status-signed {
    border-color: rgba(140, 220, 170, .55);
    background: rgba(140, 220, 170, .12);
    color: #d6f7e4;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-table .venkero-status-declined {
    border-color: rgba(240, 150, 150, .55);
    background: rgba(240, 150, 150, .12);
    color: #ffdede;
}

/* The portal caps form fields at 340px for readability on the other screens. On this one the field is the
   column, so the cap goes: the client and project selectors, the title and the terms use the card's width. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-editor .venkero-field {
    max-width: 100%;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-editor .venkero-field input,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-editor .venkero-field select,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-editor .venkero-field textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Room at the foot for the sticky bar, so the last thing on the screen is never underneath it. Measured:
   the fallback box is the last field, and the bar is 74px tall, so the clearance has to be more than the
   bar's height plus the gap it sits in. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-editor {
    padding-bottom: 280px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-editor-actions {
    z-index: 2;
    padding-bottom: 18px;
    margin-bottom: 12px;
}

/* Side by side, the list keeps enough room for its own table. */
@media (min-width: 1500px) {
    body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-split.venkero-has-panel {
        grid-template-columns: minmax(0, 1.55fr) minmax(360px, 0.45fr);
    }
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-table {
    min-width: 760px;
}


/* ── SELECTION, READING AND CONTRAST ──────────────────────────────────────────────────────────────────────
   One accent marks the chosen row: a single lime edge at the left of the row, not a divider on every cell,
   which read as a grid rather than a selection. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-table tr.venkero-selected td:first-child {
    box-shadow: inset 3px 0 0 0 #c6f74a;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-table tr.venkero-selected td {
    border-bottom-color: rgba(247, 249, 245, .1);
}

/* ── THE SELECT BOXES ─────────────────────────────────────────────────────────────────────────────────────
   Measured: the control was 44px tall with 10px padding top and bottom, leaving a 24px content box for text
   whose line box was 40.7px — so the selected words were cut off at the bottom, and the focused control went
   near-black on near-black. The line box now fits inside the padding, and focus keeps light-on-dark. The
   !important pair is deliberate: WordPress's own admin rule for :focus is broad, and a field whose text
   vanishes when focused is an accessibility failure, not a style preference. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-editor select,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-editor input[type="text"],
body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-editor input[type="number"] {
    height: 44px;
    padding: 9px 12px;
    line-height: 24px;
    font-size: 15px;
    box-sizing: border-box;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-editor textarea {
    padding: 10px 12px;
    line-height: 24px;
    font-size: 15px;
    box-sizing: border-box;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-editor select:hover,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-editor input:hover,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-editor textarea:hover {
    border-color: rgba(198, 247, 74, .45);
    color: var(--ink-strong, #f7f9f5);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-editor select:focus,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-editor input:focus,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-editor textarea:focus {
    color: var(--ink-strong, #f7f9f5) !important;
    background-color: #23281f !important;
    border-color: var(--accent) !important;
    outline: 2px solid rgba(198, 247, 74, .5) !important;
    outline-offset: 1px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-editor select option {
    color: var(--ink-strong, #f7f9f5);
    background: #1e221b;
}

/* ── THE FIGURES ──────────────────────────────────────────────────────────────────────────────────────────
   Subtotal, tax and total line up on the same right edge in the panel as in the editor, and the total is the
   one that carries weight. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-total-row,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-document-total-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(247, 249, 245, .1);
    font-variant-numeric: tabular-nums;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-total-row strong,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-document-total-row strong {
    font-variant-numeric: tabular-nums;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-total-grand,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-document-total-grand {
    border-bottom: 0;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 2px solid rgba(198, 247, 74, .5);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-total-grand strong,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-document-total-grand strong {
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -.01em;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-total-grand {
    align-items: center;
}

/* ── DATES, AND THE QUIET DISCLOSURES ─────────────────────────────────────────────────────────────────────
   Dates stay on one line and line up; History and the paste-lines fallback read as secondary information,
   which is what they are. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-table td.venkero-nowrap,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-table td:last-child {
    white-space: nowrap;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-table tbody td {
    font-variant-numeric: tabular-nums;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-history,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-lines-fallback,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-editor .venkero-lines-fallback {
    border: 0;
    background: transparent;
    padding: 0;
    font-size: 13px;
    color: rgba(247, 249, 245, .66);
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-history > summary,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-lines-fallback > summary,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-editor .venkero-lines-fallback > summary {
    font-size: 13px;
    font-weight: 500;
    color: rgba(247, 249, 245, .66);
    cursor: pointer;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-history > summary:hover,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-lines-fallback > summary:hover {
    color: var(--link, var(--accent));
}

/* ── THE FIELD MESSAGES ───────────────────────────────────────────────────────────────────────────────────
   A refused preview explains itself here, named by field, instead of appearing as a document-access error. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-field-messages {
    margin: 0 0 14px;
    padding: 12px 16px;
    list-style: none;
    border-radius: 10px;
    background: rgba(240, 150, 150, .12);
    border: 1px solid rgba(240, 150, 150, .45);
    color: #ffdede;
    font-size: 14px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-field-messages strong {
    color: #fff;
}


/* The panel's figures, on the same right edge as the editor's. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-panel-figures {
    margin: 14px 0 0;
}


/* ── HISTORY, AS SECONDARY INFORMATION ────────────────────────────────────────────────────────────────────
   It was reading as a prominent outlined button. A disclosure is a line of small text with a marker; the
   border, background and box shadow go, and the marker becomes a quiet chevron. */
body.venkero-refined-page .venkero-app.venkero-shell details.venkero-history {
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin-top: 18px;
}

body.venkero-refined-page .venkero-app.venkero-shell details.venkero-history > summary {
    display: inline-block;
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 2px 0;
    margin: 0;
    font: 500 13px/1.6 inherit;
    color: rgba(247, 249, 245, .66);
    list-style: none;
    cursor: pointer;
}

body.venkero-refined-page .venkero-app.venkero-shell details.venkero-history > summary::-webkit-details-marker {
    display: none;
}

body.venkero-refined-page .venkero-app.venkero-shell details.venkero-history > summary::marker {
    content: "";
}

body.venkero-refined-page .venkero-app.venkero-shell details.venkero-history > summary::before {
    content: "\25B8";
    display: inline-block;
    margin-right: 6px;
    color: rgba(198, 247, 74, .8);
}

body.venkero-refined-page .venkero-app.venkero-shell details.venkero-history[open] > summary::before {
    content: "\25BE";
}

body.venkero-refined-page .venkero-app.venkero-shell details.venkero-history > summary:hover {
    color: var(--link, var(--accent));
}


/* ── THE SELECTED VIEW, IN THE REFERENCE'S PROPORTIONS ────────────────────────────────────────────────────
   The list was taking about 71% of the width and leaving the panel 360px — not enough for the amounts to sit
   beside their labels. Two earlier rules disagreed (1.35fr/0.65fr then 1.55fr/0.45fr); this one replaces both.
   Side by side needs room for the list's own table AND a readable panel; at 1600px wide the content box is
   about 1249px, which splits to roughly 771 / 478 — the list keeps its table and the panel gets the
   reference's ~38%. Below that the two would be crushed, so the panel stacks above the list rather than
   squeezing beside it. */
@media (min-width: 1600px) {
    body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-split.venkero-has-panel {
        grid-template-columns: minmax(0, 1fr) minmax(440px, 0.62fr);
    }

    body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-panel {
        position: sticky;
        top: 24px;
        min-width: 0;
    }
}

@media (max-width: 1599px) {
    body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-split.venkero-has-panel {
        grid-template-columns: minmax(0, 1fr);
    }

    body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-panel {
        position: static;
        order: -1;
    }
}

/* The panel must not be squeezed to its scrollbar either. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-panel .venkero-card {
    min-width: 0;
}

/* ── ROOM BETWEEN THE LIME ACCENT AND THE WORDS ───────────────────────────────────────────────────────────
   The accent is drawn at the left edge of the row's first cell, and the text began at 0px from it. Every
   first cell is padded so the columns stay aligned whether a row is selected or not. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-table tbody td:first-child {
    padding-left: 16px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-table tr.venkero-selected td:first-child {
    box-shadow: inset 3px 0 0 0 #c6f74a;
    padding-left: 16px;
}

/* ── EVERY QUIET DISCLOSURE GETS THE SAME TREATMENT ───────────────────────────────────────────────────────
   The box was already invisible but its <summary> still carried WordPress's button look, which is why History
   looked quiet and the paste-lines fallback still looked like a large outlined button. The summary is the
   part that shows, so the summary is the part that is styled. */
body.venkero-refined-page .venkero-app.venkero-shell details.venkero-lines-fallback > summary,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-editor details.venkero-lines-fallback > summary,
body.venkero-refined-page .venkero-app.venkero-shell details.venkero-history > summary {
    display: inline-block;
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 2px 0;
    margin: 0;
    min-height: 0;
    width: auto;
    font: 500 13px/1.7 inherit;
    color: rgba(247, 249, 245, .66);
    text-decoration: none;
    list-style: none;
    cursor: pointer;
}

body.venkero-refined-page .venkero-app.venkero-shell details.venkero-lines-fallback > summary::-webkit-details-marker,
body.venkero-refined-page .venkero-app.venkero-shell details.venkero-history > summary::-webkit-details-marker {
    display: none;
}

body.venkero-refined-page .venkero-app.venkero-shell details.venkero-lines-fallback > summary::marker,
body.venkero-refined-page .venkero-app.venkero-shell details.venkero-history > summary::marker {
    content: "";
}

body.venkero-refined-page .venkero-app.venkero-shell details.venkero-lines-fallback > summary::before,
body.venkero-refined-page .venkero-app.venkero-shell details.venkero-history > summary::before {
    content: "\25B8";
    display: inline-block;
    margin-right: 6px;
    color: rgba(198, 247, 74, .8);
}

body.venkero-refined-page .venkero-app.venkero-shell details.venkero-lines-fallback[open] > summary::before,
body.venkero-refined-page .venkero-app.venkero-shell details.venkero-history[open] > summary::before {
    content: "\25BE";
}

body.venkero-refined-page .venkero-app.venkero-shell details.venkero-lines-fallback > summary:hover,
body.venkero-refined-page .venkero-app.venkero-shell details.venkero-history > summary:hover {
    color: var(--link, var(--accent));
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-editor .venkero-lines-fallback[open] {
    padding-bottom: 4px;
}

/* ── THE EDITOR'S FIGURES, AS A COMPACT GROUP ─────────────────────────────────────────────────────────────
   `space-between` across the whole card threw the label to the far left and the amount to the far right,
   which read as a table of two columns rather than a receipt. The group is now a block pinned to the right
   edge of the card, and inside it the label and value sit at its two ends. The panel's own figures are
   untouched. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-editor .venkero-totals {
    max-width: 380px;
    margin-left: auto;
    margin-right: 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-editor .venkero-total-row {
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 6px;
    padding: 6px 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-editor .venkero-total-row > span:first-child,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-editor .venkero-total-row > label {
    flex: 0 1 auto;
    min-width: 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-editor .venkero-total-rate {
    margin-left: auto;
}

@media (max-width: 720px) {
    body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-editor .venkero-totals {
        max-width: none;
    }
}


/* ── LEVEL TOPS, AND WHO THE DOCUMENT IS FOR ──────────────────────────────────────────────────────────────
   The panel's card began 31px below the list's because the Back link was printed above it. On the Estimates
   split the link now sits in the card's own head, right-aligned and quiet, so both cards start on one line.
   Sized to its words, so it cannot become a button the way the paste-lines summary did. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-panel .venkero-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-panel-back {
    margin-left: auto;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
    color: rgba(247, 249, 245, .66);
    text-decoration: none;
    white-space: nowrap;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-panel-back:hover,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-panel-back:focus {
    color: var(--link, var(--accent));
}

/* The details below the head keep their own spacing now that the link is not above them. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-estimate-panel .venkero-card-head + .venkero-quiet {
    margin-top: 6px;
}

/* A contract's fees sit behind a quiet disclosure, in the editor and in the panel. The fields stay in the form
   either way, so a stored value is re-posted unchanged on every save. */
.venkero-editor-fees > summary,
.venkero-panel-fees > summary {
  font-size: 13px; border: 0; background: transparent; box-shadow: none;
  padding: 4px 0; cursor: pointer; color: inherit; opacity: 0.78;
}
.venkero-editor-fees > summary:hover,
.venkero-panel-fees > summary:hover { opacity: 1; }
.venkero-editor-fees[open] > summary,
.venkero-panel-fees[open] > summary { opacity: 1; }

/* ── Status colours in LIGHT mode ─────────────────────────────────────────────────────────────────────────────
 * The shell's status treatment was written for the dark app: `.venkero-status` carries near-white text on a
 * translucent white plate. On light paper that measured 1.06:1 — the chip is there but a person cannot read it.
 * Light mode only became reachable with the appearance work, so this is a gap the new mode exposes rather than a
 * change to the approved look: dark mode is untouched, and when nothing is stored the shell is still dark.
 *
 * Same meanings, mode-appropriate shades — success stays green, action blue, error red, and an unrecognised status
 * stays muted. These selectors deliberately match the weight of the shell rules they override (a bare
 * `[data-mode="light"]` rule would lose to them and silently do nothing — the trap this file has hit before).
 */
body.venkero-refined-page .venkero-app.venkero-shell[data-mode="light"] .venkero-status {
    color: #575e53;
    background: rgba(32, 35, 31, .07);
}
body.venkero-refined-page .venkero-app.venkero-shell[data-mode="light"] .venkero-status-draft {
    color: #575e53;
    background: rgba(32, 35, 31, .07);
}
body.venkero-refined-page .venkero-app.venkero-shell[data-mode="light"] .venkero-status-paid {
    color: #1c6b36;
    background: rgba(28, 107, 54, .12);
}
body.venkero-refined-page .venkero-app.venkero-shell[data-mode="light"] .venkero-status-sent {
    color: #1d538d;
    background: rgba(29, 83, 141, .12);
}
body.venkero-refined-page .venkero-app.venkero-shell[data-mode="light"] .venkero-status-overdue {
    color: #a2342a;
    background: rgba(162, 52, 42, .12);
}

/* And the same for a person whose view follows the device, while the device is light. */
@media (prefers-color-scheme: light) {
    body.venkero-refined-page .venkero-app.venkero-shell[data-mode="system"] .venkero-status,
    body.venkero-refined-page .venkero-app.venkero-shell[data-mode="system"] .venkero-status-draft {
        color: #575e53;
        background: rgba(32, 35, 31, .07);
    }
    body.venkero-refined-page .venkero-app.venkero-shell[data-mode="system"] .venkero-status-paid {
        color: #1c6b36;
        background: rgba(28, 107, 54, .12);
    }
    body.venkero-refined-page .venkero-app.venkero-shell[data-mode="system"] .venkero-status-sent {
        color: #1d538d;
        background: rgba(29, 83, 141, .12);
    }
    body.venkero-refined-page .venkero-app.venkero-shell[data-mode="system"] .venkero-status-overdue {
        color: #a2342a;
        background: rgba(162, 52, 42, .12);
    }
}

/* ── Link colours: readable text, in every state ──────────────────────────────────────────────────────────────
 * The accent is the person's own choice and stays exactly as chosen — it is the right colour for buttons, marks and
 * current-state indicators. It is not always a readable colour for *text*: a mid-tone accent such as #8064b1
 * measures 3.7:1 on dark paper, under the 4.5:1 normal body text needs. So a link colour is DERIVED from the accent
 * (moved only as far toward black or white as it takes to clear 4.5:1 against the actual paper) and emitted as
 * --link / --link-hover / --link-visited. With an accent that already reads, the derived colour IS the accent, so
 * nothing changes for the common case.
 *
 * These mirror the exact selectors that paint anchor text with the accent, so they win on order rather than by
 * out-shouting them — a rule that loses silently is the trap this file has fallen into before.
 */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-card-link,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-nav-list a.is-current,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-workspace-list a.is-current,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-tabs a.is-current,
body.venkero-refined-page .venkero-app.venkero-shell.venkero-embed .venkero-actions-list a:hover,
body.venkero-refined-page .venkero-app.venkero-shell.venkero-embed .venkero-row-action:hover {
    color: var(--link, var(--accent));
}
body.venkero-refined-page .venkero-app.venkero-shell .venkero-card-link:hover,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-nav-list a.is-current:hover,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-workspace-list a.is-current:hover,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-tabs a.is-current:hover {
    color: var(--link-hover, var(--link, var(--accent)));
}
body.venkero-refined-page .venkero-app.venkero-shell .venkero-card-link:visited,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-nav-list a.is-current:visited,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-tabs a.is-current:visited,
.venkero-app a:visited {
    color: var(--link-visited, var(--link, var(--accent)));
}
body.venkero-refined-page .venkero-app.venkero-shell .venkero-card-link:focus-visible,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-nav-list a:focus-visible,
body.venkero-refined-page .venkero-app.venkero-shell .venkero-tabs a:focus-visible {
    outline: 2px solid var(--link, var(--accent));
    outline-offset: 2px;
}

/* ── Settings → Appearance: grouped controls on the left, labelled previews on the right ──────────────────────
 * The supplied design puts one column of grouped controls beside a labelled preview, in rounded cards on a 24px
 * rhythm, stacking to a single column when there is no room. This reuses the application's existing .venkero-split
 * pattern — the same one the invoice screen uses — with the columns and gap adjusted only for this screen, so no
 * other screen's layout moves.
 */
.venkero-app.venkero-shell .venkero-split.venkero-appearance-split {
    grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr);
    gap: 24px;
}
.venkero-app.venkero-shell .venkero-appearance-split .venkero-split-aside { position: sticky; top: 18px; }

@media (max-width: 1180px) {
    .venkero-app.venkero-shell .venkero-split.venkero-appearance-split { grid-template-columns: minmax(0, 1fr); }
    .venkero-app.venkero-shell .venkero-appearance-split .venkero-split-aside { position: static; }
}

.venkero-app .venkero-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
}
.venkero-app .venkero-panel + .venkero-panel { margin-top: 24px; }
.venkero-app .venkero-panel-title { font-size: 20px; margin: 0 0 6px; }
.venkero-app .venkero-panel-note { margin: 0 0 20px; font-size: 13px; color: var(--text-muted); }

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   THE BUSINESS OVERVIEW, COMPACT. Peter, 2026-10-02:
   *"Make the business Overview genuinely compact… The latest Safari screenshots still require several screens of
   scrolling, with substantial unused space beneath the email sidebar… Do not reserve an otherwise empty right-hand
   column for the full page height."*

   The page was a two-column grid whose second column held the Recent emails card for the whole height of the page;
   the rail was pushed below it. These rules replace that with three bands. Each band states a minimum column width
   and lets `auto-fit` decide how many fit, so the number of columns follows the space actually available — no width
   is hard-coded, no card is clipped, and nothing scrolls inside a card. Nothing here shrinks type to save space: the
   saving comes from fewer columns of empty space, one action row instead of two, three rows per list instead of
   five, and tighter card padding.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

.venkero-app.venkero-shell .venkero-overview {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

/* ── the three bands ── */
.venkero-app.venkero-shell .venkero-overview-tiles,
.venkero-app.venkero-shell .venkero-overview-live,
.venkero-app.venkero-shell .venkero-overview-lower {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 14px;
    align-items: start;
}

/* The mail card has more to say than a tile, so it takes a wider minimum and keeps the middle band to three. */
.venkero-app.venkero-shell .venkero-overview-live {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
}

.venkero-app.venkero-shell .venkero-overview-tiles,
.venkero-app.venkero-shell .venkero-overview-live,
.venkero-app.venkero-shell .venkero-overview-lower,
.venkero-app.venkero-shell .venkero-overview-tiles > *,
.venkero-app.venkero-shell .venkero-overview-live > *,
.venkero-app.venkero-shell .venkero-overview-lower > * {
    min-width: 0;
}

/* ── less air in every card on this page ── */
.venkero-app.venkero-shell .venkero-overview .venkero-card {
    padding: 14px 16px;
}

.venkero-app.venkero-shell .venkero-overview .venkero-card-head {
    margin-bottom: 8px;
}

.venkero-app.venkero-shell .venkero-overview .venkero-rows > li.venkero-row {
    padding: 7px 0;
    gap: 4px 10px;
}

.venkero-app.venkero-shell .venkero-overview .venkero-card-foot {
    margin: 8px 0 0;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   CARDS THAT SHARE THEIR EDGES, Peter, 2026-10-02:
   *"Make cards within each row share the same top and bottom edges, using natural grid stretching rather than fixed
   heights… Standardize card padding, heading alignment and spacing… Align footer actions consistently."*

   The bands said `align-items: start`, which is precisely why cards in one row ended on different lines: each kept
   its own height. They stretch now — grid stretch, no fixed height anywhere — and the cards are flex columns so a
   footer sits at the bottom of its card rather than floating after short content. Sparse cards are NOT spread to fill
   the space: only the footer is pushed down, which is what "align footer actions" means. On a phone the cards go back
   to their natural height, one under another.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

.venkero-app.venkero-shell .venkero-overview-tiles,
.venkero-app.venkero-shell .venkero-overview-live,
.venkero-app.venkero-shell .venkero-overview-lower {
    align-items: stretch;
}

.venkero-app.venkero-shell .venkero-overview .venkero-card {
    display: flex;
    flex-direction: column;
}

/* One heading line per card, the same top and the same space beneath it. */
.venkero-app.venkero-shell .venkero-overview .venkero-card > .venkero-card-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 8px;
}

.venkero-app.venkero-shell .venkero-overview .venkero-card-head .venkero-card-title {
    margin: 0;
}

/* A COUNT IS A NOTE ABOUT THE LIST, NOT THE HEADING'S EQUAL. */
.venkero-app.venkero-shell .venkero-overview .venkero-card-head .venkero-quiet {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-muted);
}

/* EVERY WAY OUT OF A CARD SITS AT THE SAME END OF ITS HEAD. The first of the pair takes the free space, so View all
   and New email sit together at the right whether the card is wide or narrow, and wrap together when it is narrow. */
.venkero-app.venkero-shell .venkero-overview .venkero-card-head > .venkero-card-link,
.venkero-app.venkero-shell .venkero-overview .venkero-card-head > .button {
    margin-left: auto;
}

.venkero-app.venkero-shell .venkero-overview .venkero-card-head > .button {
    margin-left: 0;
    min-height: 28px;
    padding: 0 .6rem;
    font-size: 12.5px;
    line-height: 26px;
}

/* The way into the mailbox is a secondary action: a quiet line at the foot of the card, not a second primary
   control. The mailbox help and the unfiled list are the same kind of thing. */
.venkero-app.venkero-shell .venkero-overview .venkero-email-attach-existing > summary,
.venkero-app.venkero-shell .venkero-overview .venkero-email-mailbox-help > summary,
.venkero-app.venkero-shell .venkero-overview .venkero-email-unassigned > summary {
    min-height: 0;
    width: auto;
    padding: 2px 0;
    border: 0;
    background: none;
    font-size: 12.5px;
    color: var(--text-muted);
    text-align: left;
}

.venkero-app.venkero-shell .venkero-overview .venkero-email-attach-existing > summary:hover,
.venkero-app.venkero-shell .venkero-overview .venkero-email-mailbox-help > summary:hover,
.venkero-app.venkero-shell .venkero-overview .venkero-email-unassigned > summary:hover {
    color: var(--accent);
}

.venkero-app.venkero-shell .venkero-overview .venkero-email-attach-existing,
.venkero-app.venkero-shell .venkero-overview .venkero-email-mailbox-help {
    margin: auto 0 0;
    padding-top: 6px;
}

.venkero-app.venkero-shell .venkero-overview .venkero-card-foot {
    margin-top: auto;
}

/* On a phone, one card under another, each as tall as what is in it. */
@media (max-width: 640px) {
    .venkero-app.venkero-shell .venkero-overview-tiles,
    .venkero-app.venkero-shell .venkero-overview-live,
    .venkero-app.venkero-shell .venkero-overview-lower {
        align-items: start;
    }

    .venkero-app.venkero-shell .venkero-overview .venkero-card {
        display: block;
    }
}

/* ── the two summary tiles: a figure, one line, and a quiet way in ── */
.venkero-app.venkero-shell .venkero-overview-tiles .venkero-alert-label {
    margin: 0 0 4px;
}

.venkero-app.venkero-shell .venkero-overview-tiles .venkero-alert-body {
    gap: 10px;
    padding: 2px 0 0;
}

.venkero-app.venkero-shell .venkero-overview-tiles .venkero-alert-headline {
    font-size: 15.5px;
    line-height: 1.25;
}

.venkero-app.venkero-shell .venkero-overview-tiles .venkero-alert-line {
    margin: 2px 0 0;
}

/* The action on a tile is a text link with a real target, not a full-width button that sets the tile's height. */
.venkero-app.venkero-shell .venkero-overview-tiles .venkero-alert-action {
    margin: 8px 0 0;
}

.venkero-app.venkero-shell .venkero-overview-tiles .venkero-alert-action .button,
.venkero-app.venkero-shell .venkero-overview-tiles .venkero-alert-action .button-primary {
    min-height: 32px;
    padding: 0 12px;
    font-size: 13.5px;
    box-shadow: none;
}

/* ── the money: the totals keep their weight, the chart gives way ── */
.venkero-app.venkero-shell .venkero-overview .venkero-metrics {
    gap: 12px;
}

.venkero-app.venkero-shell .venkero-overview .venkero-metric-amount {
    font-size: 22px;
}

.venkero-app.venkero-shell .venkero-overview .venkero-chart {
    height: 40px;
    margin-top: 8px;
}

/* ── the action row and its menu ── */
.venkero-app.venkero-shell .venkero-actions.is-overview {
    margin: 0 0 14px;
}

.venkero-app.venkero-shell .venkero-more-actions {
    position: relative;
    display: inline-block;
}

.venkero-app.venkero-shell .venkero-more-actions > summary {
    list-style: none;
    cursor: pointer;
}

.venkero-app.venkero-shell .venkero-more-actions > summary::-webkit-details-marker {
    display: none;
}

.venkero-app.venkero-shell .venkero-more-actions > summary::after {
    content: " \25BE";
    font-size: 11px;
}

.venkero-app.venkero-shell .venkero-more-actions[open] > summary::after {
    content: " \25B4";
}

.venkero-app.venkero-shell .venkero-more-actions > ul {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    margin: 0;
    padding: 6px;
    min-width: 190px;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius, 10px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
}

.venkero-app.venkero-shell .venkero-more-actions > ul a {
    display: block;
    padding: 7px 10px;
    border-radius: 8px;
    text-decoration: none;
}

.venkero-app.venkero-shell .venkero-more-actions > ul a:hover {
    background: var(--surface-soft, var(--surface));
}

/* ── the mailbox machinery, one click away ── */
.venkero-app.venkero-shell .venkero-email-mailbox-help > summary {
    min-height: 0;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 0;
    border: 0;
    background: none;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--text-muted);
    cursor: pointer;
}

.venkero-app.venkero-shell .venkero-email-mailbox-help > summary::-webkit-details-marker {
    display: none;
}

.venkero-app.venkero-shell .venkero-email-mailbox-help .venkero-email-toolbar {
    margin: .45rem 0 .2rem;
}

/* ── the phone: one column, in priority order, and normal page scrolling ── */
@media (max-width: 640px) {
    .venkero-app.venkero-shell .venkero-overview-tiles,
    .venkero-app.venkero-shell .venkero-overview-live,
    .venkero-app.venkero-shell .venkero-overview-lower {
        grid-template-columns: minmax(0, 1fr);
    }

    .venkero-app.venkero-shell .venkero-actions.is-overview .button,
    .venkero-app.venkero-shell .venkero-more-actions > summary {
        flex: 1 1 auto;
        justify-content: center;
    }
}

.venkero-app .venkero-row { margin: 0 0 20px; }
.venkero-app .venkero-row:last-of-type { margin-bottom: 0; }
.venkero-app .venkero-row-label { display: block; font-size: 14px; font-weight: 550; margin: 0 0 8px; }
.venkero-app .venkero-row-help { margin: 8px 0 0; font-size: 13px; color: var(--text-muted); }
.venkero-app .venkero-panel .venkero-row input[type="text"],
.venkero-app .venkero-panel .venkero-row input[type="url"],
.venkero-app .venkero-panel .venkero-row input[type="color"],
.venkero-app .venkero-panel .venkero-row select { border-radius: 8px; }

.venkero-app .venkero-choices { display: grid; gap: 8px; }
.venkero-app .venkero-choice {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-soft);
    cursor: pointer;
    margin: 0;
}
.venkero-app .venkero-choice:hover { border-color: var(--text-muted); }
.venkero-app .venkero-choice:has(input:checked) { border-color: var(--accent); background: var(--surface); }
.venkero-app .venkero-choice input { margin: 0; }

.venkero-app .venkero-swatch-row { display: flex; align-items: center; gap: 10px; }
.venkero-app .venkero-swatch-row input[type="color"] { width: 46px; height: 38px; padding: 2px; border-radius: 8px; cursor: pointer; }

.venkero-app .venkero-panel-actions { display: grid; gap: 10px; margin: 20px 0 0; }
.venkero-app .venkero-panel-actions .button { width: 100%; justify-content: center; border-radius: 8px; }
.venkero-app .venkero-inline-actions { display: flex; gap: 10px; }
.venkero-app .venkero-inline-actions .button { width: auto; flex: 1; }

/* the previews, each labelled with the surface it stands for */
.venkero-app .venkero-preview-frame {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--background);
}
.venkero-app .venkero-preview-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    background: var(--surface-soft);
    border-bottom: 1px solid var(--border);
    font-size: 12.5px; color: var(--text-muted);
}
.venkero-app .venkero-preview-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 6px;
    background: var(--accent); color: var(--on-accent, #0d100b);
    font-size: 11px; font-weight: 700;
}
.venkero-app .venkero-preview-body { padding: 16px; display: grid; gap: 12px; background: var(--background); }
.venkero-app .venkero-preview-title { font-size: 17px; margin: 0; }
.venkero-app .venkero-preview-line { margin: 0; font-size: 13px; color: var(--text-muted); }
.venkero-app .venkero-preview-micro { margin: 0; font-size: 12px; color: var(--text-muted); }
.venkero-app .venkero-preview-card {
    border: 1px solid var(--border); border-radius: 10px; padding: 12px;
    background: var(--surface); display: grid; gap: 6px;
}
.venkero-app .venkero-preview-chip {
    display: inline-block; padding: 3px 9px; border-radius: 999px;
    font-size: 11.5px; color: var(--text-muted);
    background: var(--surface-soft); border: 1px solid var(--border);
}
.venkero-app .venkero-preview-button {
    display: inline-block; padding: 8px 14px; border-radius: 8px;
    background: var(--accent); color: var(--on-accent, #0d100b);
    font-size: 13px; font-weight: 600;
}
.venkero-app .venkero-samples {
    margin: 14px 0 0; padding-top: 12px;
    border-top: 1px dashed var(--border);
    font-size: 12.5px; color: var(--text-muted);
}

/* A link inside a preview is still link text: it takes the derived colour so the preview shows what a save
 * produces, rather than the plain foreground the base anchor rule gives. */
.venkero-app .venkero-preview-frame a { color: var(--link, var(--accent)); }

/* ── Light mode: text colours that were written for the dark app ─────────────────────────────────────────────
 * The shell was drawn dark and much of its text colour was written as a literal near-white. Those literals stay the
 * fallback, so dark mode renders exactly as it did; in light mode the tokens below take over and the same rules
 * paint readable text instead of white on white. --ink-* only means anything in light mode. */
.venkero-app[data-mode="light"] {
    --ink-strong: var(--foreground);
    --ink-quiet: var(--text-muted);
    --proto-detail: var(--text-muted);
    --status-bad: #a2342a;
    --status-good: #1c6b36;
    --status-warn: #7a5c10;
}

@media (prefers-color-scheme: light) {
    .venkero-app[data-mode="system"] {
        --ink-strong: var(--foreground);
        --ink-quiet: var(--text-muted);
        --proto-detail: var(--text-muted);
        --status-bad: #a2342a;
        --status-good: #1c6b36;
        --status-warn: #7a5c10;
    }
}

/* ── A preview reads in ITS OWN mode, not the page's ─────────────────────────────────────────────────────────
 * The frame carries its own token set inline, but plain text inside it was inheriting the colour of whatever page it
 * was sitting in — a light client preview embedded in a dark workspace drew its text in white. The frame states its
 * own ink now, so both combinations hold: dark workspace with a light preview, and light workspace with a dark one. */
.venkero-app .venkero-preview-frame { color: var(--foreground); }
.venkero-app .venkero-preview-frame .venkero-preview-title { color: var(--foreground); }
.venkero-app .venkero-preview-frame .venkero-preview-bar,
.venkero-app .venkero-preview-frame .venkero-preview-bar span {
    color: var(--foreground);
}

/* The badge is not text on the bar: it is text on the accent, so it keeps the on-accent colour the design gives it.
   Round two's rule above had swept it up and left "EV" at 3.27:1 on its own square. */
.venkero-app .venkero-preview-frame .venkero-preview-bar .venkero-preview-mark,
.venkero-app .venkero-preview-frame .venkero-preview-bar .venkero-preview-mark span {
    color: var(--on-accent);
}

/* ── Light mode: the sidebar's icons ─────────────────────────────────────────────────────────────────────────
 * Inactive icons were drawn in a 72% near-white, which is right on the dark shell and very nearly invisible on light
 * paper. The light shade is scoped to light, so the dark shell renders exactly as it did. */
body.venkero-refined-page .venkero-app.venkero-shell[data-mode="light"] .venkero-nav-list a .dashicons,
body.venkero-refined-page .venkero-app.venkero-shell[data-mode="light"] .venkero-nav-list a::before {
    color: rgba(32, 35, 31, .80);
}

@media (prefers-color-scheme: light) {
    body.venkero-refined-page .venkero-app.venkero-shell[data-mode="system"] .venkero-nav-list a .dashicons,
    body.venkero-refined-page .venkero-app.venkero-shell[data-mode="system"] .venkero-nav-list a::before {
        color: rgba(32, 35, 31, .80);
    }
}

/* An icon is a graphical object, and the current item's icon was taking the raw accent: with a mid-tone identity
 * colour that measured 2.82:1, under the 3:1 a graphical object needs. It takes the same readable colour as link
 * text, so the accent is still the accent, but never an unreadable one. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-nav-list a.is-current .dashicons,
.venkero-app.venkero-shell .venkero-nav-list a.is-current .dashicons {
    color: var(--link, var(--accent));
}
/* ── Customization: one column of controls beside ONE switchable preview ─────────────────────────────────────
 * The old screen stacked long cards with two small previews. This puts the controls on the left in compact
 * sections and one preview on the right that can show several audiences and device sizes.
 *
 * Everything here is scoped under .venkero-custom, so no other screen moves. The preview frame keeps the rules
 * established for it earlier: it states its OWN tokens (painted from the draft by customization.js), so a light
 * preview inside a dark workspace draws its own ink rather than inheriting the page's.
 */
.venkero-app .venkero-custom { display: grid; gap: 20px; }

.venkero-app .venkero-custom-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.venkero-app .venkero-custom-eyebrow {
    margin: 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted);
}
.venkero-app .venkero-custom-title { margin: 2px 0 6px; font-size: 24px; }
.venkero-app .venkero-custom-intro p:last-child { margin: 0; max-width: 52ch; }
.venkero-app .venkero-custom-actions {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end;
}
.venkero-app .venkero-custom-actions .button { border-radius: 8px; }
.venkero-app .venkero-custom-status { font-size: 12.5px; color: var(--text-muted); }
.venkero-app .venkero-custom-scope {
    flex-basis: 100%; text-align: right; font-size: 12px; color: var(--text-muted);
}

.venkero-app .venkero-custom-body {
    display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 20px; align-items: start;
}
.venkero-app .venkero-custom-controls,
.venkero-app .venkero-custom-preview {
    background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px;
}
.venkero-app .venkero-custom-preview { padding: 14px; }

/* On smaller screens the controls come first and the preview keeps a usable full width beneath them. */
@media (max-width: 1180px) {
    .venkero-app .venkero-custom-body { grid-template-columns: minmax(0, 1fr); }
}

.venkero-app .venkero-custom-editing { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.venkero-app .venkero-custom-editing-label {
    font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted);
}
.venkero-app .venkero-custom-help { flex-basis: 100%; margin: 2px 0 0; font-size: 12.5px; color: var(--text-muted); }

.venkero-app .venkero-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.venkero-app .venkero-seg button {
    border: 0; border-radius: 0; background: transparent; color: var(--text-muted);
    padding: 6px 11px; font: inherit; cursor: pointer;
}
.venkero-app .venkero-seg button[aria-pressed="true"] { background: var(--surface-soft); color: var(--foreground); font-weight: 600; }
.venkero-app .venkero-seg button:focus-visible { outline: 2px solid var(--link, var(--accent)); outline-offset: -2px; }

.venkero-app .venkero-custom-tabs {
    display: flex; gap: 6px; flex-wrap: wrap; margin: 16px 0 14px; padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.venkero-app .venkero-custom-tabs button {
    border: 0; background: transparent; color: var(--text-muted); padding: 6px 11px; border-radius: 8px;
    font: inherit; cursor: pointer;
}
.venkero-app .venkero-custom-tabs button[aria-pressed="true"] { background: var(--surface-soft); color: var(--foreground); font-weight: 600; }
.venkero-app .venkero-custom-tabs button:focus-visible { outline: 2px solid var(--link, var(--accent)); outline-offset: 2px; }

.venkero-app .venkero-custom-panel .venkero-field:first-of-type { margin-top: 0; }
.venkero-app .venkero-custom-buttons { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 8px; }
.venkero-app .venkero-custom-buttons .button { border-radius: 8px; }

/* Panels and the inactive Save buttons are only hidden once the script is running: without it every panel and
 * every Save stays visible, so the screen is still usable rather than half-drawn. */
.venkero-app .venkero-custom.is-ready .venkero-custom-panel { display: none; }
.venkero-app .venkero-custom.is-ready .venkero-custom-panel.is-open { display: block; }
.venkero-app .venkero-custom.is-ready [data-custom-save] { display: inline-block; }

/* A Save with nothing to write is shown disabled rather than removed from the screen. The Portal tab and every
 * portal demonstration have no save target at all, and a person should see that the action is there and is not
 * available — beside the note that says nothing on the tab is saved — instead of finding no Save button and
 * wondering whether the screen finished drawing. */
.venkero-app .venkero-custom.is-ready [data-custom-save]:disabled {
    display: inline-block;
    cursor: not-allowed;
    /* WordPress styles a primary button by class, and that styling was beating this rule: the button stayed
     * accent-coloured while disabled, which reads as "ready to save" during a demonstration. These four are stated
     * with !important so a disabled Save cannot look available. */
    background: var(--surface-soft) !important;
    border-color: var(--border) !important;
    color: var(--text-muted) !important;
    box-shadow: none !important;
    opacity: 1;
}

/* ── the preview ──────────────────────────────────────────────────────────────────────────────────────────── */
.venkero-app .venkero-custom-preview-head {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--border);
}
/* ── WHAT ARE YOU CUSTOMIZING? ────────────────────────────────────────────────────────────────────────
 * One choice replacing the old pair of selectors. It is drawn entirely from the EDITOR's own surface
 * tokens — never from the preview's theme — which is what the old "Preview as" dropdown got wrong: it
 * inherited the muted label ink and left the native popup to draw itself, so on a dark editor surface the
 * selected text and the opened options came out dark on dark. Real radio inputs rather than a <select>:
 * the choice is visible at a glance, and arrow keys, Tab and Space are the browser's own.
 */
.venkero-app .venkero-custom-showing {
    display: flex; align-items: baseline; gap: 6px; margin: 0; font-size: 12.5px; color: var(--text-muted);
}
.venkero-app .venkero-custom-showing strong { color: var(--foreground); font-weight: 600; }
.venkero-app .venkero-custom-showing-why { color: var(--text-muted); }

.venkero-app .venkero-custom-dest { margin: 0 0 14px; }
.venkero-app .venkero-custom-dest-sticky {
    /* Text only: it floats above the option list, and a click meant for an option must never be spent on it. */
    pointer-events: none;
    position: sticky; top: 0; z-index: 5;
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
    margin: 0 0 10px; padding: 8px 10px;
    background: var(--surface-soft); border: 1px solid var(--border); border-radius: 8px;
    font-size: 12px; color: var(--foreground);
}
.venkero-app .venkero-custom-dest-sticky-what { color: var(--text-muted); }
.venkero-app .venkero-custom-dest-sticky strong { font-weight: 600; }
.venkero-app .venkero-custom-dest-sticky-where { color: var(--text-muted); }

.venkero-app .venkero-custom-dest-set {
    margin: 0; padding: 10px 12px 12px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    color-scheme: light dark;
}
.venkero-app .venkero-custom-dest-legend {
    padding: 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--foreground);
}
.venkero-app .venkero-custom-dest-opt {
    display: flex; align-items: flex-start; gap: 9px;
    margin: 0; padding: 8px 10px; border-radius: 8px; cursor: pointer;
    color: var(--foreground);
}
.venkero-app .venkero-custom-dest-opt + .venkero-custom-dest-opt { margin-top: 4px; }
.venkero-app .venkero-custom-dest-opt:hover { background: var(--surface-soft); }
.venkero-app .venkero-custom-dest-opt input[type="radio"] {
    margin: 2px 0 0; flex: none; accent-color: var(--accent);
}
.venkero-app .venkero-custom-dest-opt:has(input:checked) {
    background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--foreground);
}
.venkero-app .venkero-custom-dest-opt:has(input:focus-visible) {
    outline: 2px solid var(--link, var(--accent)); outline-offset: 1px;
}
.venkero-app .venkero-custom-dest-body { display: flex; flex-direction: column; gap: 1px; }
.venkero-app .venkero-custom-dest-name { font-weight: 600; color: var(--foreground); }
.venkero-app .venkero-custom-dest-why { font-size: 12px; color: var(--text-muted); }
.venkero-app .venkero-custom-dest-where { margin: 8px 0 0; font-size: 12px; color: var(--text-muted); }
.venkero-app .venkero-custom-dest-where strong { color: var(--foreground); }

/* The proposed portal demonstrations, in their own area and away from the colour controls. */
.venkero-app .venkero-proposed {
    margin-top: 14px; padding: 12px 14px;
    background: var(--surface-soft); border: 1px dashed var(--border); border-radius: 10px;
}
.venkero-app .venkero-proposed-title { margin: 0 0 6px; font-size: 14px; color: var(--foreground); }
.venkero-app .venkero-proposed-buttons { margin: 10px 0 6px; }

.venkero-app .venkero-preview-only {
    margin-left: auto; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted);
}

/* The frame is drawn at the device's REAL width and scaled down to fit, so Desktop, Tablet and Mobile differ even
 * when the preview column is narrower than the device — a 390px frame that silently shrank to 100% of its column
 * would make all three look identical. */
.venkero-app .venkero-custom-stage { display: flex; justify-content: center; overflow: hidden; }
.venkero-app .venkero-frame-scale { margin: 0 auto; }

/* ── THE PORTAL PREVIEWS ────────────────────────────────────────────────────────────────────────────────────
 * SIBLINGS OF THE WORKSPACE STAGE, NOT CHILDREN OF IT. That distinction is load-bearing: `portals()` hides the
 * stage when a portal is selected, and an ancestor's `hidden` hides everything beneath it whatever css says.
 * Nested inside the stage, the portal preview disappeared the moment it was asked for.
 *
 * The height is the other half of the fix. `.venkero-pv-frame` had no rule anywhere in this plugin and the script
 * sets only an iframe WIDTH, so the frame fell back to the browser's default replaced-element height: no usable
 * size even once visible. Tablet and mobile widths are set per device by the script and are wider than this column,
 * so the frame scrolls sideways rather than shrinking the page to a size that shows nothing.
 *
 * The `[hidden]` rule is stated at HIGHER specificity than the display rule above it, so it wins on its own and no
 * `!important` is needed. */
.venkero-app .venkero-pv-frame {
    display: block; width: 100%; box-sizing: border-box; padding: 2px;
    overflow-x: auto; overflow-y: hidden;
}
.venkero-app .venkero-pv-frame[hidden] { display: none; }
.venkero-app .venkero-pv-frame iframe {
    display: block; width: 100%; height: clamp(340px, 62vh, 720px);
    border: 1px solid var(--border, #c9cfc4); border-radius: 10px; background: var(--surface, #ffffff);
}
.venkero-app .venkero-custom-stage .venkero-preview-frame {
    container-type: inline-size; transform-origin: top left; box-sizing: border-box;
}

.venkero-app .venkero-preview-badge {
    margin-left: auto; font-size: 11px; letter-spacing: .04em; color: var(--text-muted);
}
.venkero-app .venkero-preview-frame[data-proposed="1"] { border-style: dashed; }

/* A proposed audience is labelled in the bar and in the words beneath it — never left to look implemented. */
.venkero-app .venkero-preview-frame[data-proposed="1"] .venkero-preview-badge { color: var(--status-warn, #e8c46a); }

/* ── keeping the preview available while editing (usability pass) ────────────────────────────────────────────
 * The preview column sticks beside the controls on desktop, so the bottom of the editor — the per-page rows —
 * is still edited with the frame in view. The frame is fitted to the height actually left in the window, so the
 * demo stays COMPLETE rather than clipped, and it never becomes a second scrolling area.
 * Below 1180px the layout stacks (see the rule above) and the "Show preview" action opens the same frame over
 * the page; that sheet is dismissible, keeps the draft, and hands focus back to the control it was opened from.
 * Nothing here changes a colour: the indicator is a separate overlay, never a stored value. */
@media (min-width: 1181px) {
    .venkero-app .venkero-custom-preview {
        position: sticky; top: 24px; align-self: start;
        max-height: calc(100vh - 48px); overflow: hidden;
    }
    /* In a window too short to hold the frame at a readable size, the box stops clamping its height: the preview
     * stays whole and a readable scale, and the page — not an inner scrollbar — carries the rest of it. */
    .venkero-app .venkero-custom-preview.is-tall { max-height: none; }
}

.venkero-app .venkero-pv-note { flex-basis: 100%; margin: 6px 0 0; font-size: 12.5px; color: var(--text-muted); }
.venkero-app .venkero-pv-note button { margin-left: 8px; }
/* Scoped at 0-3-0 on purpose: the shell styles every `.button` at 0-3-0, and a rule of mine at 0-2-0 loses to
 * it — the desktop-only controls then show on desktop, which is exactly how a stray "Show preview" appears
 * beside a preview that is already visible. */
.venkero-app .venkero-custom .venkero-pv-open,
.venkero-app .venkero-custom .venkero-pv-close { display: none; }

@media (max-width: 1180px) {
    .venkero-app .venkero-custom .venkero-pv-open {
        display: inline-flex; align-items: center; position: fixed; right: 16px; bottom: 16px; z-index: 55;
    }
    .venkero-app .venkero-custom.is-sheet-open .venkero-pv-open { display: none; }
    .venkero-app .venkero-custom-preview.is-sheet {
        display: block; position: fixed; inset: 10px; z-index: 60; overflow: auto;
        background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px;
    }
    .venkero-app .venkero-custom .venkero-custom-preview.is-sheet .venkero-pv-close { display: inline-flex; margin-left: auto; }
}

/* The indicator drawn over the preview when a control is focused. It is an overlay ABOVE the frame's own
 * colours, so it stays legible on any chosen palette, and it is not a form field — it can never be saved. */
.venkero-app .venkero-preview-frame .venkero-pv-mark {
    position: absolute; z-index: 6; pointer-events: none; border-radius: 8px;
    outline: 2px solid #3ba7ff; outline-offset: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5);
}
.venkero-app .venkero-preview-frame .venkero-pv-mark-label {
    position: absolute; left: 0; bottom: 100%; margin-bottom: 5px; padding: 2px 7px; border-radius: 6px;
    background: #10130f; color: #ffffff; font-size: 11px; line-height: 1.6; white-space: nowrap;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .35);
}
.venkero-app .venkero-preview-frame .venkero-pv-mark.is-inlaid .venkero-pv-mark-label {
    bottom: auto; top: 0; margin: 0;
}

/* ── the representative page inside the frame ─────────────────────────────────────────────────────────────── */
.venkero-app .venkero-demo { display: grid; grid-template-columns: 190px minmax(0, 1fr); min-height: 380px; }
@container (max-width: 700px) {
    .venkero-app .venkero-demo { grid-template-columns: minmax(0, 1fr); }
    .venkero-app .venkero-demo-grid { grid-template-columns: minmax(0, 1fr); }
}

.venkero-app .venkero-demo-nav {
    border-right: 1px solid var(--border); padding: 14px 12px; display: grid; gap: 4px; align-content: start;
}
.venkero-app .venkero-demo-brand { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 10px; }
.venkero-app .venkero-demo-label {
    margin: 8px 0 4px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted);
}
.venkero-app .venkero-demo-nav a {
    display: block; padding: 6px 8px; border-radius: 7px; font-size: 13px;
    color: var(--text-muted); text-decoration: none;
}
.venkero-app .venkero-demo-nav a.is-current {
    background: var(--surface-soft); color: var(--foreground); box-shadow: inset 2px 0 0 var(--link, var(--accent));
}
.venkero-app .venkero-demo-user { margin: 14px 0 0; font-size: 12px; color: var(--foreground); }
.venkero-app .venkero-demo-user span { color: var(--text-muted); }

.venkero-app .venkero-demo-main { padding: 16px; min-width: 0; display: grid; gap: 12px; align-content: start; }
.venkero-app .venkero-demo-eyebrow {
    margin: 0; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted);
}
.venkero-app .venkero-demo-title { margin: 0; font-size: 20px; }
.venkero-app .venkero-demo-sub { margin: 0; font-size: 13px; color: var(--text-muted); }
.venkero-app .venkero-demo-strong { margin: 0; font-size: 14px; font-weight: 600; }

.venkero-app .venkero-demo-brief,
.venkero-app .venkero-demo-card {
    border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
    padding: 12px; display: grid; gap: 8px; justify-items: start;
}
.venkero-app .venkero-demo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.venkero-app .venkero-demo-chip {
    padding: 3px 9px; border-radius: 999px; font-size: 11.5px;
    background: var(--surface-soft); border: 1px solid var(--border); color: var(--text-muted);
}
.venkero-app .venkero-demo-video {
    width: 100%; height: 62px; border: 1px solid var(--border); border-radius: 9px;
    display: grid; place-items: center; color: var(--text-muted); font-size: 12px; background: var(--background);
}
.venkero-app .venkero-demo-detail {
    display: flex; justify-content: space-between; width: 100%; gap: 10px;
    border-top: 1px solid var(--border); padding-top: 6px; font-size: 12.5px; color: var(--text-muted);
}
.venkero-app .venkero-demo-detail b { color: var(--foreground); font-weight: 600; }
/* A status is not an identity colour: these keep their own, whatever the accent is. */
.venkero-app .venkero-demo-detail .venkero-demo-done { color: var(--status-good, #8fd39a); }
.venkero-app .venkero-demo-detail a { color: var(--link, var(--accent)); }

.venkero-app .venkero-demo-strip { display: flex; gap: 8px; flex-wrap: wrap; }
.venkero-app .venkero-demo-stage {
    flex: 1 1 90px; border: 1px solid var(--border); border-top-width: 3px; border-radius: 9px;
    padding: 7px 9px; font-size: 12px; color: var(--text-muted);
}
.venkero-app .venkero-demo-stage-booked { border-top-color: #527a55; }
.venkero-app .venkero-demo-stage-production { border-top-color: #347ca5; }
.venkero-app .venkero-demo-stage-review { border-top-color: #8064b1; }
.venkero-app .venkero-demo-stage-delivered { border-top-color: #b77c25; }

.venkero-app .venkero-demo-foot {
    display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0;
    padding-top: 10px; border-top: 1px dashed var(--border); font-size: 11px; color: var(--text-muted);
}
.venkero-app .venkero-custom-caption { margin: 12px 0 0; font-size: 12.5px; color: var(--text-muted); }

/* ─────────────────────────────────────────────────────────────────────────────────────────────────────────
   PHASE 1 · THE COLOUR CONTROLS, AND THE TOKEN HOOKS THEY FEED

   Every hook below is scoped to `.venkero-app[data-appearance]`, which the shell only sets when a choice has
   actually been stored. With nothing stored the screen is painted exactly as it was before this phase, so a
   default workspace is untouched. The tokens themselves come from Venkero_Appearance::tokens(), so the same
   readability rules govern the shell and the preview: nothing here decides what is legible.
   ───────────────────────────────────────────────────────────────────────────────────────────────────────── */

/* The primary action uses the chosen button colour when one was chosen, and the accent otherwise. */
.venkero-app[data-appearance] .venkero-shell .button-primary,
.venkero-app[data-appearance] .venkero-shell a.venkero-button.is-current {
    background: var(--button, var(--accent)) !important;
    border-color: var(--button, var(--accent)) !important;
    color: var(--on-button, var(--on-accent)) !important;
}

/* Icons and focus rings follow the ink that is legible on the chosen paper. */
.venkero-app[data-appearance] .venkero-nav-list a .dashicons,
.venkero-app[data-appearance] .venkero-nav-list a::before { color: var(--navigation-muted, var(--icon-quiet, currentColor)); }
.venkero-app[data-appearance] :focus-visible { outline-color: var(--link, var(--accent)); }

/* The sidebar's own surface, when the Navigation colour was chosen. */
.venkero-app[data-appearance] .venkero-nav,
.venkero-app[data-appearance] .venkero-nav-list { background: var(--navigation); }

/* The business mark carries the identity colour; an uploaded logo is never tinted. */
.venkero-app[data-appearance] .venkero-brand-mark,
.venkero-app[data-appearance] .venkero-preview-mark { background: var(--primary, var(--accent)); color: var(--on-primary, var(--on-accent)); }

/* ── Starting styles ─────────────────────────────────────────────────────────────────────────────────── */
.venkero-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.venkero-presets .button { min-height: 30px; padding: 0 12px; font-size: 12px; }
.venkero-presets .button[aria-pressed="true"] {
    background: var(--nav-active, rgba(198, 247, 74, .16));
    border-color: var(--accent);
    color: var(--foreground);
    font-weight: 600;
}

/* ── One colour, one control ─────────────────────────────────────────────────────────────────────────── */
.venkero-colour { margin: 0 0 12px; }
.venkero-colour-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.venkero-colour-label { font-size: 12.5px; font-weight: 600; }
.venkero-colour-now {
    width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--border);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.venkero-colour-reset {
    margin-left: auto; background: none; border: 0; padding: 0 2px; cursor: pointer;
    font-size: 11.5px; color: var(--text-muted); text-decoration: underline;
}
.venkero-colour-reset:hover { color: var(--foreground); }
.venkero-colour-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.venkero-colour-row input[type="text"] {
    width: 102px; font-variant-numeric: tabular-nums; letter-spacing: .02em; text-transform: uppercase;
}
.venkero-colour-row input[type="color"] {
    width: 34px; height: 30px; padding: 2px; border-radius: 6px; cursor: pointer;
}
.venkero-colour-said { font-size: 11.5px; color: var(--status-bad, #a2342a); }

/* ── Swatches: the curated set, this business's own, and the recent ones ─────────────────────────────── */
.venkero-colour-swatches { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.venkero-swatch {
    width: 22px; height: 22px; padding: 0; border-radius: 6px; cursor: pointer;
    background: var(--swatch); border: 1px solid var(--border);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .10);
}
.venkero-swatch:hover { transform: translateY(-1px); }
.venkero-swatch:focus-visible { outline: 2px solid var(--link, var(--accent)); outline-offset: 2px; }

/* ── Groups and the business's own palette ───────────────────────────────────────────────────────────── */
.venkero-group { border-top: 1px solid var(--border); padding: 10px 0 2px; margin: 10px 0 0; }
.venkero-group > summary { cursor: pointer; font-size: 12.5px; font-weight: 600; }
.venkero-group[open] > summary { margin-bottom: 8px; }
.venkero-palette { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.venkero-palette-item { position: relative; display: inline-flex; }
.venkero-palette-chip {
    width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--border);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .10);
}
.venkero-palette-remove {
    position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; line-height: 1;
    border-radius: 50%; border: 1px solid var(--border); background: var(--surface); cursor: pointer;
    font-size: 11px; color: var(--text-muted); padding: 0;
}
.venkero-palette-remove:hover { color: var(--foreground); }

/* The shell's generic control rule (`.venkero-app button`, specificity 0-1-1) out-ranks a bare class, so the remove
 * control was being drawn as a 44px surface-filled box beside the swatch instead of a small control on its corner.
 * These carry the customization shell in the selector so the palette's own layout wins, and the pick button is a
 * transparent hit area over the chip. A near-white chip keeps a visible edge here too. */
.venkero-app.venkero-shell .venkero-palette { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.venkero-app.venkero-shell .venkero-palette-item { position: relative; display: inline-flex; width: 26px; height: 26px; }
.venkero-app.venkero-shell .venkero-palette-chip {
    display: block; width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--border);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .10), 0 0 0 1px rgba(0, 0, 0, .06);
}
.venkero-app.venkero-shell .venkero-palette-pick {
    position: absolute; top: 0; right: 0; width: 26px; height: 26px; min-height: 0; padding: 0; margin: 0;
    border: 0; border-radius: 7px; background: transparent; cursor: pointer;
}
.venkero-app.venkero-shell .venkero-palette-remove {
    position: absolute; top: -7px; right: -7px; z-index: 2; width: 18px; height: 18px; min-height: 0; padding: 0;
    margin: 0; line-height: 1; border-radius: 50%; border: 1px solid var(--border); background: var(--surface);
    cursor: pointer; font-size: 12px; font-weight: 600; color: var(--foreground);
}
.venkero-app.venkero-shell .venkero-palette-remove:hover { background: var(--surface-soft); color: var(--foreground); }
.venkero-app.venkero-shell .venkero-palette-remove:focus-visible { outline: 2px solid var(--foreground); outline-offset: 2px; }

/* ── Colours by page: the row the preview points at ──────────────────────────────────────────────────── */
.venkero-page-row {
    display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px;
    border: 1px solid transparent;
}
.venkero-page-row.is-pointed-at {
    border-color: var(--accent);
    background: var(--nav-active, rgba(198, 247, 74, .12));
}
.venkero-page-name { font-size: 12.5px; font-weight: 600; min-width: 96px; }

/* ── The pages inside the preview, which select what is being shown ───────────────────────────────────── */
.venkero-demo-page {
    display: block; width: 100%; text-align: left; cursor: pointer;
    background: none; border: 0; border-radius: 8px; padding: 7px 10px;
    color: inherit; font: inherit; font-size: 12.5px;
}
.venkero-demo-page:hover { background: rgba(255, 255, 255, .06); }
.venkero-demo-page.is-current { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.venkero-demo-nav { background: var(--navigation, var(--surface-soft)); }

/* The navigation and the raised surface carry their own readings of the chosen ink and accent, so a palette whose
   surfaces were chosen to differ still reads. Scoped to a stored appearance, and never over the current page's own
   highlight — an active entry keeps the accent that marks it. */
.venkero-app[data-appearance] .venkero-nav-list a:not(.is-current):not([aria-current]) { color: var(--navigation-foreground, inherit); }
.venkero-app[data-appearance] .venkero-nav-list a:not(.is-current):not([aria-current]):hover { color: var(--navigation-foreground, var(--link)); }
.venkero-app[data-appearance] .venkero-nav-list a .dashicons,
.venkero-app[data-appearance] .venkero-nav-list a::before { color: var(--navigation-muted, var(--icon-quiet, currentColor)); }
.venkero-app[data-appearance] .venkero-card { color: var(--card-foreground, var(--foreground)); }
.venkero-app[data-appearance] .venkero-card a { color: var(--card-link, var(--link)); }
.venkero-demo-nav, .venkero-demo-nav .venkero-demo-page { color: var(--soft-foreground, inherit); }
.venkero-demo-nav .venkero-demo-label, .venkero-demo-nav .venkero-demo-user span { color: var(--soft-muted, inherit); }
.venkero-demo-card { color: var(--card-foreground, inherit); }
.venkero-demo-card .venkero-link { color: var(--card-link, var(--link)); }

/* ─────────────────────────────────────────────────────────────────────────────────────────────────────────
   PHASE 1 · THE CUSTOMIZATION SCREEN'S OWN CONTROLS

   The shell paints every button with a surface fill and a full border (`.venkero-app button`, specificity 0-1-1).
   The swatches and the preview's own navigation are not shell controls, and they had been inheriting that paint:
   a swatch showed as an empty box and a sidebar entry as an outlined button. Everything here is scoped to the
   customization shell and written at a specificity the shell's control rule cannot out-rank, so those styles stay
   exactly as they are everywhere else in the app.
   ───────────────────────────────────────────────────────────────────────────────────────────────────────── */

.venkero-app .venkero-colour-swatches .venkero-swatch {
    display: inline-block;
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 0;
    padding: 0;
    gap: 0;
    font-size: 0;
    line-height: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--swatch);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
    cursor: pointer;
}

.venkero-app .venkero-colour-swatches .venkero-swatch:hover {
    background: var(--swatch);
    border-color: var(--foreground);
}

/* The chosen one: two rings, in the page's own ink, so it reads on a light panel and a dark one. */
.venkero-app .venkero-colour-swatches .venkero-swatch.is-selected {
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--foreground);
}

.venkero-app .venkero-colour-swatches .venkero-swatch:focus-visible {
    outline: 2px solid var(--link, var(--accent));
    outline-offset: 3px;
}

/* The preview's sidebar, as the app's sidebar is: rows in a list, not a stack of framed buttons. Clicking a row
   still selects that page, and the selected row is the accent with the label colour that clears it. */
.venkero-app .venkero-demo-nav .venkero-demo-page {
    display: block;
    width: 100%;
    min-height: 0;
    padding: 7px 10px;
    gap: 0;
    justify-content: flex-start;
    text-align: left;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--soft-foreground, var(--foreground));
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
}

.venkero-app .venkero-demo-nav .venkero-demo-page:hover {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--foreground);
}

.venkero-app .venkero-demo-nav .venkero-demo-page:focus-visible {
    outline: 2px solid var(--link, var(--accent));
    outline-offset: 1px;
}

.venkero-app .venkero-demo-nav .venkero-demo-page.is-current {
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
}

/* Status indicators carry their own surface. That is what makes a meaning readable on any paper: the label is
   measured against the chip, and the chip's edge against the cards behind it. */
.venkero-app .venkero-demo-chip {
    display: inline-flex;
    align-items: center;
    min-height: 0;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid var(--status-warn-edge, currentColor);
    background: var(--status-warn-surface, rgba(240, 196, 106, .16));
    color: var(--status-warn-pill, inherit);
    font-size: 11.5px;
    font-weight: 600;
}

.venkero-app .venkero-demo-chip[data-status="good"] {
    border-color: var(--status-good-edge, currentColor);
    background: var(--status-good-surface, rgba(111, 220, 154, .16));
    color: var(--status-good-pill, inherit);
}

.venkero-app .venkero-demo-chip[data-status="bad"] {
    border-color: var(--status-bad-edge, currentColor);
    background: var(--status-bad-surface, rgba(242, 128, 111, .16));
    color: var(--status-bad-pill, inherit);
}

/* A chip with nothing chosen is not a black square and not an unexplained slot: it is a dashed outline that says
   "follows the app", and the row's own label carries the same words. */
.venkero-app .venkero-colour [data-colour-chip].is-empty {
    background: transparent;
    border: 1px dashed var(--soft-foreground, var(--border));
    opacity: .65;
}

/* A chip that has nothing chosen must not wear the app's accent, or an untouched field would read as a chosen one.
   The dashed outline and the words in its tooltip say which of the two states it is in; the row's own label already
   says "follows the app". */
.venkero-app .venkero-colour [data-colour-chip]:not(.is-chosen) {
    background: transparent !important;
    border: 1px dashed var(--soft-foreground, var(--border));
    opacity: .6;
}
.venkero-app .venkero-colour [data-colour-chip].is-chosen {
    border: 1px solid var(--border);
    opacity: 1;
}

/* ── The logo roles: six slots in the Brand panel, and the preview's placements ─────────────────────────
 * Artwork is fitted, never cropped: object-fit: contain with a max height per role, so a wide wordmark keeps its
 * proportions in a wide place and a compact mark stays compact. The square places cap width as well as height.
 */
.venkero-logo-role { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 8px; }
.venkero-logo-role-name { font-size: 12.5px; font-weight: 600; margin: 0 0 4px; }
.venkero-logo-slot { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; padding: 6px 0; }
.venkero-logo-thumb {
    flex: 0 0 96px; min-height: 52px; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); border-radius: 8px; background: var(--surface); padding: 4px;
}
.venkero-logo-art { display: block; max-width: 100%; height: auto; object-fit: contain; }
.venkero-logo-art-primary { max-height: 44px; }
.venkero-logo-art-secondary { max-height: 32px; }
.venkero-logo-art-emblem { max-height: 26px; max-width: 26px; }
.venkero-logo-wordmark { font-weight: 700; letter-spacing: .04em; color: var(--foreground); font-size: 15px; }
.venkero-logo-choose { flex: 1 1 220px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.venkero-logo-label { font-size: 12.5px; font-weight: 600; flex: 1 1 100%; }
.venkero-logo-file { font-size: 12px; max-width: 190px; }
.venkero-logo-pending { font-size: 12px; font-weight: 600; }
.venkero-preview-emblem {
    display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
    border-radius: 7px; background: rgba(127, 127, 127, .18); font-size: 11px; font-weight: 700; overflow: hidden;
}
.venkero-preview-emblem img, .venkero-demo-brand img, .venkero-preview-brandblock img {
    display: block; max-width: 100%; height: auto; object-fit: contain;
}
.venkero-preview-emblem img { max-height: 20px; max-width: 20px; }
.venkero-demo-brand img { max-height: 26px; }
.venkero-preview-brandblock { display: flex; align-items: center; gap: 8px; margin-top: 10px; opacity: .92; }
.venkero-preview-brandblock img { max-height: 22px; }

/* The logo slots, laid out to be read: roles grouped, light and dark beside each other where the panel allows, and
 * a file control wide enough to show the name it is about to send. */
.venkero-app .venkero-field.venkero-logos { max-width: none; }
.venkero-logos { container-type: inline-size; }
.venkero-logo-role-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
/* The pair is decided by the space the fieldset really has, not by the width of the window: two variants
   side by side once there is room for two comfortable columns, stacked when there is not. */
@container (min-width: 430px) {
    .venkero-logo-role-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.venkero-logo-role-slots > *, [data-logo-slot], [data-logo-slot] > * { min-width: 0; }
[data-logo-slot] select, [data-logo-slot] input[type="file"] { width: 100%; max-width: 100%; box-sizing: border-box; }
[data-logo-slot] .venkero-logo-thumb { max-width: 100%; }
[data-logo-slot] .venkero-logo-thumb img { max-width: 64px; height: auto; }
[data-logo-slot] button { max-width: 100%; }
[data-logo-slot] { overflow-wrap: anywhere; }
.venkero-logo-slot { align-items: flex-start; gap: 8px; }
.venkero-logo-thumb { flex: 0 0 64px; min-height: 46px; }
.venkero-logo-art-primary { max-height: 32px; }
.venkero-logo-art-secondary { max-height: 24px; }
.venkero-logo-choose { gap: 4px; }
.venkero-logo-label { font-size: 12px; margin-bottom: 1px; }
.venkero-logo-choose select { width: 100%; max-width: 100%; font-size: 12.5px; }
.venkero-logo-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.venkero-logo-file { flex: 1 1 168px; min-width: 0; max-width: 100%; font-size: 11.5px; }
.venkero-app.venkero-shell .venkero-logo-clear { min-height: 32px; padding: 0 10px; font-size: 12px; }
.venkero-logo-note { margin: 2px 0 0; font-size: 11.5px; line-height: 1.35; }
/* A white mark on a white page has no edge of its own, and the editor cannot invent one inside the file. These
 * places draw a soft plate behind the artwork instead: the file is untouched, its proportions are untouched, and a
 * near-white mark stays visible against a light background. The same plate is behind dark artwork, where it is barely
 * perceptible. */
/* A plate only where the artwork needs one, and it follows both the artwork's ink and the surface it
   sits on: light artwork on a light surface gets a dark plate, dark artwork on a dark surface a light
   one, and a mismatch — light on dark, dark on light — needs no plate at all. */
[data-ink="light"][data-surface="light"] img,
[data-ink="light"][data-surface="light"].venkero-preview-emblem { background: rgba(14, 18, 14, .20); }
[data-ink="dark"][data-surface="dark"] img,
[data-ink="dark"][data-surface="dark"].venkero-preview-emblem { background: rgba(255, 255, 255, .18); }
[data-ink="light"][data-surface="dark"] img,
[data-ink="dark"][data-surface="light"] img { background: transparent; }
.venkero-logo-error {
    margin: 6px 0; padding: 8px 10px; border-radius: 8px; font-size: 12.5px;
    border: 1px solid #b75d47; background: rgba(183, 93, 71, .12); color: var(--foreground);
}
/* The slot pair is sized by its container, so a narrow card stacks instead of spilling into the preview. */

/* ── the three logo placements in the preview ───────────────────────────────────────────────────── */
.venkero-demo-brandarea { display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
    padding: 14px 16px; margin: 0 0 14px; border-radius: 12px; background: var(--cards, #ffffff);
    border: 1px solid var(--borders, rgba(0,0,0,.1)); }
.venkero-demo-brandarea img { max-width: 100%; height: auto; max-height: 58px; object-fit: contain; }
.venkero-demo-brandarea .venkero-preview-altword { font-size: 13px; color: var(--muted, #5b6159); }
.venkero-preview-alt { display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
    padding: 12px 14px; margin: 0 0 14px; border-radius: 12px; background: var(--cards, #ffffff);
    border: 1px dashed var(--borders, rgba(0,0,0,.25)); }
.venkero-preview-alt-label { margin: 0; font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted, #5b6159); }
.venkero-preview-alt img { max-width: 100%; height: auto; max-height: 40px; object-fit: contain; }
.venkero-preview-emblem { display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 8px; overflow: hidden; flex: 0 0 auto;
    font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--navigation-ink, inherit); }
.venkero-preview-emblem img { width: 100%; height: 100%; object-fit: contain; }
/* The plate rules live at the end of this file, where they can see both ink and surface. */
/* The nav header keeps the compact emblem clear of the page rows below it. */
.venkero-demo-brand { display: flex; align-items: center; gap: 8px; padding-bottom: 8px;
    margin-bottom: 8px; border-bottom: 1px solid var(--borders, rgba(0,0,0,.12)); }

/* ── the preview's own page, cards and navigation follow the audience's resolved values ───────────
   The frame carries every token as a custom property and is repainted from the draft, so the page
   inside it changes with the mode, the presets and any custom colour — not just the frame around it. */
.venkero-preview-frame .venkero-demo { background: var(--background, #f7f8f6); color: var(--foreground, #20231f); }
.venkero-preview-frame .venkero-demo-main { background: var(--background, #f7f8f6); }
.venkero-preview-frame .venkero-demo-nav { background: var(--navigation, var(--surface, #ffffff)); border-right-color: var(--border, #c9cfc4); }
.venkero-preview-frame .venkero-demo-card,
.venkero-preview-frame .venkero-demo-brief,
.venkero-preview-frame .venkero-demo-video,
.venkero-preview-frame .venkero-demo-detail,
.venkero-preview-frame .venkero-demo-stage,
.venkero-preview-frame .venkero-preview-alt,
.venkero-preview-frame .venkero-demo-brandarea {
    background: var(--surface, #ffffff); border-color: var(--border, #c9cfc4); color: var(--card-foreground, #20231f);
}
.venkero-preview-frame .venkero-demo-sub,
.venkero-preview-frame .venkero-preview-alt-label { color: var(--card-muted, var(--text-muted, #575e53)); }
.venkero-preview-frame .venkero-demo-chip { background: var(--surface-soft, #eef0eb); color: var(--soft-foreground, #20231f); }
.venkero-preview-frame .venkero-preview-button {
    /* THE PALETTE WINS, AND THE LIME CANNOT CREEP BACK. This read `var(--button, #c6f74a)`, and because the
       frame's own document was never given `--button`, the fallback was the only value it ever saw — which is
       why View projects, Open review and View files stayed lime while everything around them took the chosen
       colour. The frame now receives the whole palette, and the fallback is the accent rather than a literal. */
    background: var(--button, var(--accent, #c6f74a));
    color: var(--on-button, var(--on-accent, #0d100b));
}
.venkero-preview-frame .venkero-briefing-cta,
.venkero-preview-frame .venkero-demo-page.is-current { background: var(--accent, #c6f74a); color: var(--on-accent, #000); }

/* ── a backing that actually separates the artwork from what it sits on ──────────────────────────
   Light artwork on a light surface and dark artwork on a dark surface need a solid contrast shown
   behind them; the mismatched pairs need none. The artwork itself is never altered. */
[data-ink="light"][data-surface="light"] img,
[data-ink="light"][data-surface="light"].venkero-preview-emblem {
    background: #14170f; border-radius: 6px; padding: 3px;
}
[data-ink="dark"][data-surface="dark"] img,
[data-ink="dark"][data-surface="dark"].venkero-preview-emblem {
    background: #ffffff; border-radius: 6px; padding: 3px;
}
[data-ink="light"][data-surface="dark"] img,
[data-ink="dark"][data-surface="light"] img { background: transparent; padding: 0; }

/* ── the logo controls use the width their card actually gives them ───────────────────────────── */
[data-logo-slot] input[type="file"] { min-width: 0; }
[data-logo-slot] .venkero-logo-chosen { display: block; margin: 4px 0 0; font-size: 12px; color: var(--text-muted, #575e53); }

/* ── every foreground in the preview resolves against the surface it is really drawn on ────────────
   The page, the cards, the raised surface and the navigation can all be different colours, so each
   element takes the ink pair belonging to its own surface: navigation text and icons from the
   navigation, card text from the cards, status words from the status shade read against the cards. */
.venkero-preview-frame .venkero-demo-nav .venkero-demo-brand,
.venkero-preview-frame .venkero-demo-nav .venkero-demo-brand span,
.venkero-preview-frame .venkero-demo-nav .venkero-demo-page,
.venkero-preview-frame .venkero-demo-nav .venkero-demo-user { color: var(--navigation-foreground, var(--foreground, inherit)); }

.venkero-preview-frame .venkero-demo-nav .venkero-demo-page.is-current { color: var(--on-accent, #000000); }

.venkero-preview-frame .venkero-demo-nav .venkero-demo-label,
.venkero-preview-frame .venkero-demo-nav .venkero-demo-user span,
.venkero-preview-frame .venkero-demo-nav .dashicons,
.venkero-preview-frame .venkero-demo-nav svg { color: var(--navigation-muted, var(--text-muted, inherit)); }

.venkero-preview-frame .venkero-demo-detail { color: var(--card-muted, var(--text-muted, inherit)); border-top-color: var(--border, currentColor); }
.venkero-preview-frame .venkero-demo-detail b { color: var(--card-foreground, var(--foreground, inherit)); }
.venkero-preview-frame .venkero-demo-detail a { color: var(--card-link, var(--link, inherit)); }

/* A status word keeps its meaning and is read against the surface it sits on, not against the page. */
.venkero-preview-frame .venkero-demo-done,
.venkero-preview-frame .venkero-demo-detail .venkero-demo-done {
    color: var(--status-good-edge, var(--status-good, var(--card-foreground, #1c6b36)));
}

.venkero-preview-frame .venkero-demo-chip { color: var(--card-muted, var(--soft-foreground, inherit)); }
.venkero-preview-frame .venkero-demo-chip[data-status] { color: var(--status-warn-pill, var(--card-foreground, inherit)); }
.venkero-preview-frame .venkero-demo-chip[data-status="good"] { color: var(--status-good-pill, var(--card-foreground, inherit)); }
.venkero-preview-frame .venkero-demo-chip[data-status="bad"] { color: var(--status-bad-pill, var(--card-foreground, inherit)); }

.venkero-preview-frame .venkero-preview-altword,
.venkero-preview-frame .venkero-preview-alt-label,
.venkero-preview-frame .venkero-demo-brandarea .venkero-preview-altword { color: var(--card-muted, var(--text-muted, inherit)); }

/* The remaining mixed-surface readings: a section label inside a card takes the cards' muted ink, the
   introductory line sits on the page and takes the page's, and a status badge is measured against its own
   fill rather than against the card it is lying on. */
.venkero-preview-frame .venkero-demo-eyebrow { color: var(--card-muted, var(--text-muted, inherit)); }
.venkero-preview-frame .venkero-demo-sub { color: var(--text-muted, var(--foreground, inherit)); }

.venkero-preview-frame .venkero-demo-chip[data-status="good"] { background: var(--status-good-surface, rgba(111, 220, 154, .16)); color: var(--status-good-pill, var(--card-foreground, inherit)); }
.venkero-preview-frame .venkero-demo-chip[data-status="warn"] { background: var(--status-warn-surface, rgba(240, 196, 106, .16)); color: var(--status-warn-pill, var(--card-foreground, inherit)); }
.venkero-preview-frame .venkero-demo-chip[data-status="bad"]  { background: var(--status-bad-surface, rgba(242, 128, 111, .16));  color: var(--status-bad-pill, var(--card-foreground, inherit)); }

/* ── the demo's remaining surfaces, each read against what it is actually drawn on ────────────────────
   A page-level label takes the page's ink; the same label inside a card takes the cards' ink; the brief
   block sits on the page even when the cards are pale, so it is not treated as a card. Fallbacks are
   written flat, one token deep.

   Two of these carry the marker the app's own generic rules would otherwise win with: `.venkero-app a`
   colours every link from the page's link ink, and it is not surface-aware, so a link drawn on a pale card
   in a dark frame came out as the page's lime at 1.25:1. A resolved surface colour has to beat a generic
   one, so these two declarations are stated as final for their elements. */
.venkero-preview-frame .venkero-demo-eyebrow { color: var(--text-muted, #575e53); }
.venkero-preview-frame .venkero-demo-card .venkero-demo-eyebrow { color: var(--card-muted, #575e53) !important; }
.venkero-preview-frame .venkero-demo-card .venkero-demo-sub,
.venkero-preview-frame .venkero-demo-card .venkero-demo-strong { color: var(--card-foreground, #20231f); }
/* The briefing block is a raised surface, not the page: it takes the cards' fill when the cards are pale, so
   it takes the cards' ink too. Pointing it at the page's muted ink left it at 2.62:1 on a white block. */
.venkero-preview-frame .venkero-demo-brief .venkero-demo-eyebrow,
.venkero-preview-frame .venkero-demo-brief .venkero-demo-sub { color: var(--card-muted, #575e53); }
.venkero-preview-frame .venkero-demo-brief .venkero-demo-strong { color: var(--card-foreground, #20231f); }
.venkero-preview-frame .venkero-demo-card .venkero-demo-detail a[href],
.venkero-preview-frame .venkero-demo-detail a[href] { color: var(--card-link, #637c25) !important; }


/* ── COLOUR THEME CARDS ────────────────────────────────────────────────────────────────────────────────────────
   Ten choices, each showing the page, card and button colour of the theme it sets. Restrained on purpose: a chooser,
   not a decoration. */
.venkero-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; margin: 4px 0 2px; }
.venkero-theme-card { display: block; position: relative; cursor: pointer; padding: 10px 10px 11px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--foreground); }
.venkero-theme-card input { position: absolute; opacity: 0; pointer-events: none; }
.venkero-theme-card:hover { border-color: var(--accent); }
.venkero-theme-card.is-picked, .venkero-theme-card:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.venkero-theme-card:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.venkero-theme-name { display: block; font-weight: 600; font-size: 13px; margin-bottom: 7px; }
.venkero-theme-note { display: block; font-weight: 400; font-size: 12px; opacity: .75; margin-top: 6px; }
.venkero-theme-swatches { display: flex; gap: 4px; }
.venkero-theme-chip { width: 26px; height: 20px; border-radius: 5px; border: 1px solid rgba(0,0,0,.12); }

/* ── CUSTOM COLOUR ─────────────────────────────────────────────────────────────────────────────────────
   The picker and its hex field appear when Custom colour is the chosen card and stay out of the way otherwise:
   choosing one colour is the whole interaction, so nothing else is revealed with it. */
/* ── Custom colour: the picker and its hex, beneath the choices and outside every card ───────────────────
   Visible on its own terms. The old rules hung the row's visibility on the card being picked, which meant a card
   that was not picked hid the controls; these carry their own borders, backgrounds and colours so no panel rule can
   leave the field looking absent on a white card. */
/* SELF-CONSISTENT BY CONSTRUCTION. This row asked for `var(--ink)`, and on the real page `--ink` is the LIGHT
   paper's ink (#0d100b) while the surfaces around it are dark (#161915, #1e221b) — so the label and the hex text came
   out nearly black on a dark surface. `--foreground` and `--surface` move together with the mode, so the row's text
   and its own background always agree, in both modes and for every destination. */
.venkero-custom-colour-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border, rgba(128, 128, 128, 0.45));
    border-radius: 10px;
    background: var(--surface, #ffffff);
    color: var(--foreground, #20231f);
}

.venkero-custom-colour-row[hidden] { display: none; }

.venkero-custom-colour-head {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--foreground, #20231f);
}

.venkero-custom-pick { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }

.venkero-custom-pick input[type="color"] {
    inline-size: 46px;
    block-size: 32px;
    padding: 2px;
    border: 1px solid var(--border, rgba(128, 128, 128, 0.45));
    border-radius: 8px;
    background: var(--surface, #ffffff);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.venkero-custom-pick input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.venkero-custom-pick input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 5px; }
.venkero-custom-pick input[type="color"]::-moz-color-swatch { border: 0; border-radius: 5px; }

.venkero-custom-pick input[type="text"] {
    inline-size: 9ch;
    min-inline-size: 88px;
    padding: 6px 8px;
    border: 1px solid var(--border, rgba(128, 128, 128, 0.45));
    border-radius: 8px;
    background: var(--surface-soft, #eef0eb);
    color: var(--foreground, #20231f);
    font-size: 13px;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}

.venkero-custom-colour-row .venkero-colour-chip {
    inline-size: 28px;
    block-size: 28px;
    flex: 0 0 auto;
    border: 1px solid var(--border, rgba(128, 128, 128, 0.45));
    border-radius: 6px;
}

.venkero-custom-colour-row .venkero-colour-said { font-size: 11.5px; color: var(--status-bad, #a2342a); }
.venkero-custom-colour-row .venkero-colour-said:empty { display: none; }

/* The per-page colour group is not offered any more. `hidden` alone is not enough: a `display` in a more specific
 * rule beats the browser's own rule for it, so this states it finally. The stored values are still carried by the
 * hidden inputs with `data-legacy`, so nothing saved is lost. */
.venkero-group[hidden] { display: none !important; }


/* ─────────────────────────────────────────────────────────────────────────────────────────────── the phone
 *
 * Three faults, each reproduced on 2026-10-04 against the rendered page and the stylesheet that reaches it.
 *
 *  1. THE TOOLBAR'S RESERVED STRIP. WordPress prints `html{margin-top:32px !important}` — 46px under 782px —
 *     whenever it believes its admin toolbar is being shown. The application hid the toolbar's MARKUP with CSS
 *     and never removed the RESERVATION, so a signed-in owner kept a blank band above the header at exactly the
 *     height of a toolbar nobody could see. Refusing the toolbar on customer-facing requests removes both.
 *
 *  2. THE HEADER COULD NOT STAY PUT. `.venkero-mobile-bar` was `position: sticky` and lived INSIDE
 *     `.venkero-topbar`. A sticky element can only stick within its parent's box, and that parent ends a few
 *     lines below the greeting — so the control scrolled away with it. A fixed band pinned to the viewport is
 *     not bounded by anything.
 *
 *  3. THE PANEL PAINTED BELOW THE PAGE. The panel was `position: fixed` with `z-index: auto`, and
 *     `.venkero-topbar` is `position: relative` and comes LATER in the document — so the greeting, its subtitle
 *     and the Overview action row, all inside that positioned header, painted over the open panel. The missing
 *     stacking level was the whole disease: the panel now has one (44), the band a higher one (45), the scrim a
 *     lower one (43) and page content stays at auto, which puts them in the order the eye expects.
 *
 * Nothing here hides an overflow to conceal a width defect.
 */

/* Desktop default: the band is inert, and its children behave as the header's own. */
.venkero-app.venkero-shell .venkero-mobile-bar { display: contents; }

@media (max-width: 782px) {

    /* The two heights the panel is bounded by, stated once. */
    .venkero-app.venkero-shell {
        --venkero-mobile-bar: 56px;
        --venkero-bottom-bar: 72px;
        padding: 0 max(16px, env(safe-area-inset-left))
            calc(var(--venkero-bottom-bar) + 6px + env(safe-area-inset-bottom))
            max(16px, env(safe-area-inset-right)) !important;
    }

    /* THE BAND: fixed, so it cannot be left behind; opaque, so content passing under it is not seen through it;
       full width, because a header is chrome and not content. */
    .venkero-app.venkero-shell .venkero-mobile-bar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 45;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        height: var(--venkero-mobile-bar);
        margin: 0;
        padding: 0 max(16px, env(safe-area-inset-left)) 0 max(16px, env(safe-area-inset-right));
        background: var(--background);
        border-bottom: 1px solid var(--border);
    }

    /* The room the band takes, reserved once: the band itself is out of the flow. Nothing else reserves it, so
       there is no second strip above it and no gap under it. */
    .venkero-app.venkero-shell .venkero-topbar {
        padding: var(--venkero-mobile-bar) 0 0;
        margin-bottom: 14px;
    }

    .venkero-app.venkero-shell .venkero-nav-button {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        min-height: var(--target);
        padding: 0 16px;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--surface);
        color: var(--foreground);
        font: inherit;
        font-size: 15px;
        font-weight: 550;
        cursor: pointer;
    }

    .venkero-app.venkero-shell .venkero-nav-button:focus-visible {
        outline: 2px solid var(--foreground);
        outline-offset: 3px;
    }

    /* The bell is the second half of the header row, and it rides in the band. */
    .venkero-app.venkero-shell .venkero-topbar .venkero-bell {
        position: fixed;
        top: 8px;
        right: max(16px, env(safe-area-inset-right));
        z-index: 46;
        margin: 0;
    }

    /* THE PANEL: below the band, above the page, bounded above the foot, scrolling inside itself. Its top edge is
       the band's own height rather than a measurement, so its first control can never sit behind the header. */
    .venkero-app.venkero-shell .venkero-nav {
        display: none;
        position: fixed;
        top: var(--venkero-mobile-bar);
        left: 0;
        right: 0;
        z-index: 44;
        width: auto;
        height: auto;
        max-height: calc(100dvh - var(--venkero-mobile-bar) - var(--venkero-bottom-bar));
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        margin: 0;
        padding: 8px max(16px, env(safe-area-inset-left)) 12px max(16px, env(safe-area-inset-right));
        border: 0;
        border-bottom: 1px solid var(--border);
        box-shadow: 0 20px 34px -16px rgba(0, 0, 0, .6);
    }

    .venkero-app.venkero-shell .venkero-nav.is-open { display: block; }

    /* The ends of the list keep clear of the band and of the foot. */
    .venkero-app.venkero-shell .venkero-nav > :first-child { margin-top: 0; }
    .venkero-app.venkero-shell .venkero-nav > :last-child { margin-bottom: 0; }

    /* A tap meant for the page under the open panel lands here instead, and closes the menu: nothing a covered
       control might have done happens. It stops short of the foot, so the foot stays usable. */
    .venkero-app.venkero-shell .venkero-nav-scrim {
        position: fixed;
        top: var(--venkero-mobile-bar);
        left: 0;
        right: 0;
        bottom: var(--venkero-bottom-bar);
        z-index: 43;
        background: rgba(0, 0, 0, .45);
        border: 0;
    }

    /* Compact rows: the desktop sidebar's heights are for a mouse and a tall window. */
    .venkero-app.venkero-shell .venkero-nav .venkero-brand { display: none; }
    .venkero-app.venkero-shell .venkero-nav .venkero-workspace { margin-bottom: 6px; }
    .venkero-app.venkero-shell .venkero-nav .venkero-nav-group { margin: 10px 0 2px; }
    .venkero-app.venkero-shell .venkero-nav .venkero-nav-list a,
    .venkero-app.venkero-shell .venkero-nav .venkero-nav-exit {
        min-height: 40px;
        padding: 8px 10px;
        font-size: 15px;
    }
    .venkero-app.venkero-shell .venkero-nav .venkero-workspace > summary { min-height: 40px; }
    .venkero-app.venkero-shell .venkero-nav .venkero-account { margin-top: 8px; padding-top: 8px; }

    /* ── the foot ── */
    .venkero-app.venkero-shell .venkero-bottom-nav .venkero-bottom-action {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        min-width: 64px;
        padding: 4px 2px;
        background: none;
        border: 0;
        color: inherit;
        font: inherit;
        text-decoration: none;
        cursor: pointer;
    }

    .venkero-app.venkero-shell .venkero-bottom-nav .venkero-bottom-action:focus-visible {
        outline: 2px solid var(--foreground);
        outline-offset: -2px;
        border-radius: 8px;
    }

    /* ── wide things scroll inside themselves; the page never does ── */
    body.venkero-refined-page .venkero-app.venkero-shell .venkero-pipeline,
    .venkero-app.venkero-shell .venkero-pipeline {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(240px, 78vw);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }

    body.venkero-refined-page .venkero-app.venkero-shell .venkero-table-scroll,
    .venkero-app.venkero-shell .venkero-table-scroll,
    .venkero-app.venkero-shell .venkero-grid-table { max-width: 100%; }

    /* Long addresses, filenames and subjects wrap inside their bubble rather than widening the page. */
    .venkero-app.venkero-shell .venkero-email-bubble,
    .venkero-app.venkero-shell .venkero-email-file,
    .venkero-app.venkero-shell .venkero-email-file-name,
    .venkero-app.venkero-shell .venkero-row,
    .venkero-app.venkero-shell .venkero-card { min-width: 0; overflow-wrap: anywhere; }

    .venkero-app.venkero-shell .venkero-email-bubble,
    .venkero-app.venkero-shell .venkero-email-composer,
    .venkero-app.venkero-shell .venkero-email-body { max-width: 100%; }

    /* Actions wrap instead of widening the page. */
    .venkero-app.venkero-shell .venkero-actions,
    .venkero-app.venkero-shell .venkero-tabs,
    .venkero-app.venkero-shell .venkero-toolbar,
    .venkero-app.venkero-shell .venkero-card-head { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: no-preference) {
    .venkero-app.venkero-shell .venkero-nav { animation: venkero-menu-in 120ms ease-out; }
    @keyframes venkero-menu-in {
        from { opacity: 0; transform: translateY(-6px); }
        to { opacity: 1; transform: none; }
    }
}

/* ── mobile: give the screen back to the content ────────────────────────────────────────────────────────────────
   A 390px phone was spending its first screenful on an oversized heading and a widely spaced tab strip before any of
   the work appeared. The app's own small-screen width is 620px (the editor portal uses it), and the spacing tokens are
   the app's own, so this is the existing design at a smaller size rather than a second design. */
@media (max-width: 620px) {
  .venkero-app.venkero-shell .venkero-screen-title,
  .venkero-app.venkero-shell .venkero-page-title,
  .venkero-app.venkero-shell .venkero-section-head h1,
  .venkero-app.venkero-shell .venkero-head h1,
  .venkero-app.venkero-shell h1 { font-size: 22px; line-height: 1.2; margin: 4px 0 6px; }

  .venkero-app.venkero-shell .venkero-subtitle,
  .venkero-app.venkero-shell .venkero-screen-summary,
  .venkero-app.venkero-shell .venkero-quiet-intro { font-size: 13px; margin-bottom: 8px; }

  /* One scrollable line of tabs, closer together, instead of a strip that wraps and spreads. */
  .venkero-app.venkero-shell .venkero-tabs {
    display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    gap: 2px; margin: 6px 0 10px; padding-bottom: 4px; scrollbar-width: none;
  }
  .venkero-app.venkero-shell .venkero-tabs::-webkit-scrollbar { display: none; }
  .venkero-app.venkero-shell .venkero-tabs a { padding: 6px 9px; font-size: 13px; white-space: nowrap; }

  /* Tables stay readable without a row's worth of vertical padding. */
  .venkero-app.venkero-shell .venkero-table th { padding-top: 8px; padding-bottom: 8px; }
  .venkero-app.venkero-shell .venkero-table td { padding-top: 10px; padding-bottom: 10px; }
  .venkero-app.venkero-shell .venkero-table { font-size: 13px; }
  .venkero-app.venkero-shell .venkero-table th { position: sticky; top: 0; background: var(--surface); z-index: 1; }

  /* The page's own frame: less air above the content. */
  .venkero-app.venkero-shell .venkero-wrap,
  .venkero-app.venkero-shell .venkero-content { padding-top: 8px; }
  .venkero-app.venkero-shell .venkero-panel { padding: 12px; margin-bottom: 10px; }
  .venkero-app.venkero-shell .venkero-panel h2,
  .venkero-app.venkero-shell .venkero-panel h3 { font-size: 15px; margin: 0 0 6px; }
}


/* ── Ongoing-project pass: job tiles, and a media tile that can be played ─────────────────────────────────────────
   Colours are the app's own tokens (--proto-label, --proto-subtitle) and its existing habit of translucent
   near-white for surfaces and hairlines. Nothing new is invented for the palette. */
.venkero-job-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    list-style: none;
    margin: 12px 0 16px;
    padding: 0;
}

.venkero-job-tile-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

.venkero-job-tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 96px;
    padding: 14px 16px;
    border: 1px solid rgba(239, 241, 238, .14);
    border-radius: 10px;
    background: rgba(239, 241, 238, .03);
    color: var(--proto-label);
    text-decoration: none;
}

.venkero-job-tile:hover {
    border-color: var(--link, var(--accent));
    background: rgba(239, 241, 238, .06);
}

.venkero-job-tile:focus-visible {
    outline: 2px solid var(--link, var(--accent));
    outline-offset: 2px;
}

.venkero-job-tile-name {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--proto-label);
}

.venkero-job-tile-meta {
    font-size: 12.5px;
    color: var(--proto-subtitle);
}

.venkero-job-tile-date {
    margin-top: auto;
    font-size: 13px;
    color: var(--proto-subtitle);
}

.venkero-job-tile-date--confirmed {
    color: var(--proto-label);
}

.venkero-job-tile-date--requested {
    font-style: italic;
}

/* The action has to read as an action, not as a collapsed footnote. */
.venkero-card-more > summary {
    display: inline-block;
    margin: 4px 0 10px;
    padding: 8px 14px;
    border: 1px solid rgba(239, 241, 238, .18);
    border-radius: 8px;
    color: var(--proto-label);
    cursor: pointer;
    list-style: none;
}

.venkero-card-more > summary::-webkit-details-marker {
    display: none;
}

.venkero-card-more > summary:hover,
.venkero-card-more > summary:focus-visible {
    border-color: var(--link, var(--accent));
    outline: none;
}

/* The player fills its tile, and keeps its own controls visible. */
.venkero-media-video {
    display: block;
    width: 100%;
    height: auto;
    max-height: 240px;
    border-radius: 8px;
    background: #000;
}


/* ── Ongoing-project pass, part 2 ─────────────────────────────────────────────────────────────────────────────────
   The job card, the folded Project details section, and the rule that separates the Media tab's files from its
   actions. The app's own tokens only: --proto-label, --proto-subtitle, --link/--accent. */
.venkero-job-summary .venkero-job-back {
    margin: 0 0 12px;
    font-size: 13.5px;
}

.venkero-job-back a {
    color: var(--link, var(--accent));
    text-decoration: none;
}

.venkero-job-back a:hover,
.venkero-job-back a:focus-visible {
    text-decoration: underline;
    outline: none;
}

.venkero-job-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin: 0 0 14px;
    padding: 0;
}

.venkero-job-dates > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.venkero-job-dates dt {
    font-size: 11.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--proto-cat, var(--proto-subtitle));
}

.venkero-job-dates dd {
    margin: 0;
    font-size: 14.5px;
    color: var(--proto-label);
}

/* ── THE FIELD AND ITS BUTTON, SPACED, Peter, 2026-10-09 ─────────────────────────────────────────────────
   "Add normal spacing between the date field and Confirm date button where they currently sit flush
   together. Keep that adjustment consistent with the existing form controls."

   Both controls are `form.venkero-row-action` — the tiles' confirm form and the mini job card's. The field
   carries the app's own `.venkero-field` margins (4px 12px 8px 0), so the pair's spacing depended on whether
   the button fitted on the same line: side by side it got 12px, and when the button wrapped below the field
   it got only 8px and the two read as one joined control. A wrapping flex row with a 12px gap gives the same
   12px either way — the value the app already uses between a field and whatever follows it.

   Scoped to the two forms by element name, so the same class used as a link elsewhere (the embed's "Open"
   action) and every other form in the app stay exactly as they are. */
form.venkero-row-action {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

form.venkero-row-action .venkero-field {
    margin: 0;
    flex: 0 0 auto;
}

/* ══ THE POLISH PASS, Peter, 2026-10-09 — ongoing parents and their minis only ═════════════════════════════
   Everything here is scoped to a class that only those two pages carry: `.venkero-job-tile*` and
   `.venkero-mini-card` exist only on an ongoing parent, `.venkero-job-summary` only on a mini, and
   `.venkero-secondary` (Project details) is emitted only for those two. A standard project's Summary is
   untouched by every rule below. */

/* ── the tiles: even boxes, and the three facts in a fixed order ────────────────────────────────────────── */
.venkero-app .venkero-job-tiles {
    gap: 12px;
    margin: 12px 0 4px;
}

.venkero-app .venkero-job-tile-item {
    display: flex;
    flex-direction: column;
}

.venkero-app .venkero-job-tile {
    flex: 1 1 auto;
    min-height: 110px;
    gap: 8px;
    padding: 14px 16px;
}

.venkero-app .venkero-job-tile .venkero-job-tile-when {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: auto;
}

.venkero-app .venkero-job-tile .venkero-job-tile-date {
    margin-top: 0;
    font-size: 12.5px;
    line-height: 1.35;
}

.venkero-app .venkero-job-tile .venkero-job-tile-date--confirmed {
    color: var(--proto-label);
    font-weight: 550;
}

.venkero-app .venkero-job-tile .venkero-job-tile-date--requested {
    font-style: normal;
    color: var(--proto-subtitle);
}

/* ── the minis card head: the button stays on the heading's row and level with it ─────────────────────────
   The row is the app's own card-head convention — heading left, action right, `space-between` — and that is
   kept deliberately: it is how every other card in the app pairs a title with an action. What is asserted
   here, at a specificity the inline rules cannot out-rank, is only that the pair stays on one row and that
   the button is centred on the heading's line rather than dropped below it when space is tight. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-mini-card > .venkero-card-head {
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-mini-card > .venkero-card-head > h2 {
    flex: 0 1 auto;
    margin: 0;
}

/* ── the mini project's card: a labelled brief, then the dates and their action ─────────────────────────── */
.venkero-app.venkero-shell .venkero-job-summary .venkero-job-label {
    margin: 0 0 6px;
    font-size: 11.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--proto-cat, var(--proto-subtitle));
}

.venkero-app.venkero-shell .venkero-job-summary .venkero-job-brief {
    margin: 0 0 16px;
}

.venkero-app.venkero-shell .venkero-job-summary .venkero-job-brief .venkero-brief,
.venkero-app.venkero-shell .venkero-job-summary .venkero-job-brief > p:last-child {
    margin: 0;
}

/* The dates and the control that changes one of them are one block, set off from the brief above. */
.venkero-app.venkero-shell .venkero-job-summary .venkero-job-when {
    margin: 0 0 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(239, 241, 238, .12);
}

.venkero-app.venkero-shell .venkero-job-summary .venkero-job-when .venkero-job-dates {
    margin-bottom: 12px;
}

.venkero-app.venkero-shell .venkero-job-summary .venkero-job-facts {
    margin-bottom: 0;
}

/* ── Project details: a clean disclosure row, not an outlined button ───────────────────────────────────── */
.venkero-app.venkero-shell .venkero-secondary {
    padding: 0;
}

.venkero-app.venkero-shell .venkero-secondary > .venkero-secondary-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 14px 16px;
    border: 0;
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--proto-label);
    font-family: inherit;
    font-size: 17px;
    font-weight: 550;
    letter-spacing: -0.02em;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    list-style: none;
    cursor: pointer;
}

.venkero-app.venkero-shell .venkero-secondary > .venkero-secondary-head:hover {
    background: rgba(239, 241, 238, .04);
}

.venkero-app.venkero-shell .venkero-secondary > .venkero-secondary-head:focus-visible {
    outline: 2px solid var(--link, var(--accent));
    outline-offset: -2px;
}

/* The secondary text sits at the right, and the chevron after it. The app draws the chevron as an 8px V in
   #989a95 — on this dark card, at that size, it was invisible in the rendered page, so it is drawn a touch
   larger and lighter here. The row is the same; only the mark is legible. */
.venkero-app.venkero-shell .venkero-secondary > .venkero-secondary-head > .venkero-quiet {
    margin: 0 0 0 auto;
    font-size: 12.5px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-secondary > .venkero-secondary-head .venkero-section-caret {
    width: 9px;
    height: 9px;
    border-right: 2px solid rgba(247, 249, 245, .72);
    border-bottom: 2px solid rgba(247, 249, 245, .72);
    margin-left: 12px;
}

.venkero-app.venkero-shell .venkero-secondary[open] > .venkero-secondary-head .venkero-section-caret {
    transform: rotate(225deg);
}

.venkero-app.venkero-shell .venkero-secondary > .venkero-secondary-body {
    padding: 0 16px 16px;
}

/* ── the rail: Client and Collaborators, tighter, with everything still there ─────────────────────────────
   Specificity here is not a guess. The rules that were winning were `body.venkero-refined-page
   .venkero-app.venkero-shell .venkero-project-rail > .venkero-card` and its card-head child — five classes
   and an element, written in an inline <style> that lands AFTER this stylesheet, so an equally specific rule
   loses on document order. Each selector below therefore carries the rail element itself and its compact
   class (six classes), which wins outright whatever the order. The avatar needed a second thing: the app sets
   `flex: 0 0 54px` on it, and a flex basis beats a width, so `width: 24px` alone left it at 54px. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-project-rail.venkero-rail-compact > .venkero-card {
    padding: 12px 14px;
    margin-bottom: 12px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-project-rail.venkero-rail-compact > .venkero-card > .venkero-card-head {
    margin: 0 0 8px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-project-rail.venkero-rail-compact .venkero-card-title {
    font-size: 15px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-project-rail.venkero-rail-compact .venkero-avatar {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    min-width: 24px;
    font-size: 10px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-project-rail.venkero-rail-compact .venkero-client-head {
    gap: 8px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-project-rail.venkero-rail-compact .venkero-facts {
    margin: 6px 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-project-rail.venkero-rail-compact .venkero-facts dt {
    font-size: 11px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-project-rail.venkero-rail-compact .venkero-facts dd {
    font-size: 13px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-project-rail.venkero-rail-compact .venkero-cta-row {
    margin: 8px 0 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-project-rail.venkero-rail-compact .venkero-card-more > summary {
    min-height: 30px;
    margin: 2px 0 6px;
    padding: 4px 10px;
    font-size: 12.5px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-project-rail.venkero-rail-compact .venkero-actions-list > li {
    padding: 6px 0;
}

/* ══ TWO FINAL ADJUSTMENTS, Peter, 2026-10-09 ═════════════════════════════════════════════════════════════
   Both are scoped to the compact rail (ongoing parents and their minis) and to Project details, which only
   those two pages carry. Nothing here reaches a standard project. */

/* ── the Client card: identity, Contact details and View client grouped ───────────────────────────────────
   App rule `padding: 14px 0 16px` on the identity block was the whole of the "large empty gaps": 42px of
   text inside a 72px box, with the 24px avatar centred in the padding. The padding is dropped, the two text
   lines set tight line-heights, and the avatar centres on them. The link keeps a proper target. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-project-rail.venkero-rail-compact .venkero-client-head {
    padding: 0;
    margin: 0 0 8px;
    align-items: center;
    gap: 10px;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-project-rail.venkero-rail-compact .venkero-client-head strong {
    font-size: 15px;
    line-height: 1.25;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-project-rail.venkero-rail-compact .venkero-client-head .venkero-quiet {
    margin-top: 1px;
    font-size: 12.5px;
    line-height: 1.3;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-project-rail.venkero-rail-compact .venkero-cta-row {
    margin: 10px 0 0;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-project-rail.venkero-rail-compact .venkero-cta-row .button-link {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
}

/* ── the Project details chevron: legible, with its own space at the far right ────────────────────────────
   The app's mark is 8px in #989a95; at 9px and 2px with 0.72 alpha it still could not be made out in a
   screenshot. It is 12px and 2.5px in near-white, it never shrinks, and the secondary text yields to it. */
body.venkero-refined-page .venkero-app.venkero-shell .venkero-secondary > .venkero-secondary-head {
    box-sizing: border-box;
    flex-wrap: nowrap;
    padding-right: 14px;
}

/* WHY `box-sizing` IS LOAD-BEARING HERE — the chevron was laid out but never painted.
   The head is `width: 100%`. In content box that means the card's content width, and the padding is then added
   ON TOP: measured, the head spanned x313-1054 inside a card spanning x312-1025 — 29px wider than the card
   that contains it. The card carries `overflow: auto` (the app uses it on rounded cards), so everything past
   x1025 was clipped away, and the 12px chevron sits at x1023-1043. Only a 2px sliver survived, which is
   exactly what Peter saw: "not discernible". Border box makes the head's padding come out of its width, so it
   is 711px inside a 711px content box and the chevron paints in full.
   Lesson for future checks: an element's bounding box is not evidence that it was painted. Read the pixels. */

body.venkero-refined-page .venkero-app.venkero-shell .venkero-secondary > .venkero-secondary-head > .venkero-quiet {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 62%;
    margin: 0 0 0 auto;
    padding-left: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.venkero-refined-page .venkero-app.venkero-shell .venkero-secondary > .venkero-secondary-head .venkero-section-caret {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    margin-left: 0;
    border-right: 2.5px solid rgba(247, 249, 245, .95);
    border-bottom: 2.5px solid rgba(247, 249, 245, .95);
}

/* ── THE TILES: NO BLANKET UNDERLINE, AND A REAL BUTTON, Peter, 2026-10-09 ────────────────────────────────
   "Keep each tile fully clickable, but remove the blanket underlining from its name, code, status and date.
   Use clear hierarchy, hover styling and a visible keyboard focus ring."
   "Make 'New mini project' an actual visible button beside the section heading."

   THE UNDERLINE WAS NOT OURS. `.venkero-app a { text-decoration: underline }` carries one class AND one
   element, so it out-ranks `.venkero-job-tile` (one class) however the tile is written — the anchor underlined
   every word inside it. These rules name the shell as well, so they win, and they say it for the hover state
   too. The tile stays one link: every part of it is still clickable.

   The action button is stated at the same weight of specificity that flattened it, scoped to its own class so
   no other card's summary is affected. */
.venkero-app .venkero-job-tile,
.venkero-app .venkero-job-tile:hover,
.venkero-app .venkero-job-tile:focus-visible,
.venkero-app .venkero-job-tile * {
    text-decoration: none;
}

.venkero-app .venkero-job-tile {
    color: var(--proto-label);
}

/* Hierarchy, stated rather than inherited: the name leads, the status is a step quieter, the code and the
   date are context. */
.venkero-app .venkero-job-tile .venkero-job-tile-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--proto-label);
}

.venkero-app .venkero-job-tile .venkero-job-tile-status {
    color: var(--proto-label);
}

.venkero-app .venkero-job-tile .venkero-job-tile-meta,
.venkero-app .venkero-job-tile .venkero-job-tile-date {
    color: var(--proto-subtitle);
    font-weight: 400;
}

.venkero-app .venkero-job-tile:hover {
    border-color: var(--link, var(--accent));
    background: rgba(239, 241, 238, .06);
}

.venkero-app .venkero-job-tile:focus-visible {
    outline: 2px solid var(--link, var(--accent));
    outline-offset: 2px;
}

/* The new-mini-project action: a button beside the heading, and the form gets its own row when it opens. */
.venkero-app.venkero-shell .venkero-mini-card .venkero-card-head .venkero-new-mini {
    margin-left: auto;
}

.venkero-app.venkero-shell .venkero-new-mini > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 36px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--foreground);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--foreground);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 550;
    line-height: 1.2;
    text-decoration: none;
    list-style: none;
    cursor: pointer;
}

.venkero-app.venkero-shell .venkero-new-mini > summary::-webkit-details-marker {
    display: none;
}

.venkero-app.venkero-shell .venkero-new-mini > summary:hover,
.venkero-app.venkero-shell .venkero-new-mini > summary:focus-visible {
    border-color: var(--link, var(--accent));
    color: var(--link, var(--accent));
    text-decoration: none;
}

.venkero-app.venkero-shell .venkero-new-mini > summary:focus-visible {
    outline: 2px solid var(--link, var(--accent));
    outline-offset: 2px;
}

.venkero-app.venkero-shell .venkero-mini-card .venkero-card-head .venkero-new-mini[open] {
    flex: 1 0 100%;
}

/* THE FORM MUST STAY INSIDE THE DISCLOSURE. `.venkero-app .venkero-card-head form { display: inline-block }`
   is an author rule, and an author rule beats the user-agent rule that hides a closed <details>'s contents —
   so once this control moved into the head row, the whole create form stood open on the card whether the
   summary was pressed or not. Measured, not assumed: the form reported a real height while `open` was false.
   These two rules out-rank it by naming the shell, and the form is hidden until the button is pressed. */
.venkero-app.venkero-shell .venkero-new-mini > form {
    display: none;
}

.venkero-app.venkero-shell .venkero-new-mini[open] > form {
    display: block;
    margin: 12px 0 0;
}

/* The folded context. Closed by default, so the tiles and the job card are what the page opens on. */
.venkero-secondary {
    margin-top: 16px;
}

.venkero-secondary > .venkero-secondary-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    cursor: pointer;
    list-style: none;
}

.venkero-secondary > .venkero-secondary-head::-webkit-details-marker {
    display: none;
}

.venkero-secondary-body {
    padding-top: 12px;
}

/* The Media tab: the files, then a rule, then everything that acts on them. */
.venkero-media-files-head {
    margin-bottom: 10px;
}

.venkero-media-actions {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid rgba(239, 241, 238, .14);
}

.venkero-media-actions-head {
    margin-bottom: 10px;
}


/* ── Invoice list controls, and the billing block on an invoice ─────────────────────────────────────────────
   These rules had been echoed from inside the invoice DETAIL card, so on the invoice LIST they simply were not
   there: the action cells kept their old nowrap, the table kept scrolling sideways, and on a phone the controls
   stayed off the screen. They live in the app's stylesheet now, which every app page loads. */

.venkero-invoice-table td.venkero-invoice-actions { white-space: normal !important; vertical-align: top; }
.venkero-invoice-table td.venkero-invoice-actions a,
.venkero-invoice-table td.venkero-invoice-actions form { display: inline-block; margin: 0 8px 8px 0; }
.venkero-invoice-table td.venkero-invoice-actions .button,
.venkero-invoice-table td.venkero-invoice-actions button { padding: 2px 10px; min-height: 0; font-size: 13px; }
.venkero-invoice-billed-label { display: block; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; opacity: .7; }
.venkero-invoice-billed-value { display: block; margin-top: 2px; }
.venkero-invoice-billed-note { display: block; margin-top: 2px; font-size: 13px; opacity: .75; }

@media (max-width: 700px) {
  /* The row becomes a card: identity first, controls under it, full width. The controls used to sit in a column
     at the far right of a table that scrolled sideways, which made Issue, Edit, Print and View undiscoverable. */
  .venkero-invoice-table thead { display: none; }
  .venkero-invoice-table { width: 100% !important; min-width: 0 !important; max-width: 100% !important;
    table-layout: auto !important; }
  .venkero-invoice-table tbody tr td:first-child { white-space: normal; }
  .venkero-invoice-table col, .venkero-invoice-table colgroup { width: auto !important; }
  .venkero-invoice-table,
  .venkero-invoice-table tbody,
  .venkero-invoice-table tr,
  .venkero-invoice-table td { display: block; width: auto; }
  .venkero-invoice-table tr { border: 1px solid var(--border); border-radius: 12px; margin: 0 0 10px; padding: 10px 12px; }
  .venkero-invoice-table td { border: 0; padding: 2px 0; text-align: left; white-space: normal;
    width: auto !important; min-width: 0 !important; max-width: none !important; }
  .venkero-invoice-table td.venkero-invoice-client,
  .venkero-invoice-table td.venkero-invoice-project,
  .venkero-invoice-table td.venkero-nowrap { display: none; }
  .venkero-invoice-table td.venkero-invoice-actions {
    margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border);
  }
  .venkero-invoice-table td.venkero-invoice-actions a,
  .venkero-invoice-table td.venkero-invoice-actions form { display: inline-block; margin: 0 12px 6px 0; }
  .venkero-invoice-table td.venkero-invoice-actions .button,
  .venkero-invoice-table td.venkero-invoice-actions button { padding: 4px 12px; }
  .venkero-invoice-table { display: block; }
  .venkero-table-scroll, .venkero-table-wrap, .venkero-scroll-x { overflow: visible !important; }
}


/* ── Invoice row actions: the label centres in its own button ───────────────────────────────────────────────
   From the Safari screenshot of the live list: the labels sat at the top of their buttons, and the wrapped
   "Print / save as PDF" left the row looking ragged. Each button now centres its own text, horizontally and
   vertically, and a wrapped label centres both of its lines.

   WHERE the action group sits is the cell's business and stays that way — the buttons are inline-level, so the
   cell's own alignment (right on desktop, full width in a phone card) keeps positioning them. Padding and
   height are deliberately NOT set here: each layout keeps its own, so the desktop buttons and the phone card's
   comfortable touch targets are unchanged. */
.venkero-invoice-table td.venkero-invoice-actions a,
.venkero-invoice-table td.venkero-invoice-actions button,
.venkero-invoice-table td.venkero-invoice-actions input[type=submit] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.25 !important;
  text-wrap: balance;
  box-sizing: border-box;
  vertical-align: middle;
  /* A fixed height was squeezing a two-line label: measured on the wrapped "Print / save as PDF", only 0.8px
     of air above the text and 2px below. The box now grows with its own content, so a wrapped label gets
     symmetrical padding and a single-line label keeps the same minimum height as its neighbours. */
  height: auto !important;
}

/* Enough room for a wrapped label, on the widths where the buttons sit in a table column. Scoped to above the
   phone breakpoint on purpose: the phone card sets its own generous padding and height for touch, and those
   must not be overridden from here. */
@media (min-width: 701px) {
  .venkero-invoice-table td.venkero-invoice-actions a,
  .venkero-invoice-table td.venkero-invoice-actions button,
  .venkero-invoice-table td.venkero-invoice-actions input[type=submit] {
    padding: 6px 12px !important;
    min-height: 34px !important;
  }
}

/* The phone card keeps its comfortable targets. The app's rules for these were written for `.button` and
   `button`, and every one of these controls is a link — which is how the labels ended up with no padding at
   all and a 32px target. Named here for links and buttons alike. */
@media (max-width: 700px) {
  .venkero-invoice-table td.venkero-invoice-actions a,
  .venkero-invoice-table td.venkero-invoice-actions button,
  .venkero-invoice-table td.venkero-invoice-actions input[type=submit] {
    padding: 9px 14px !important;
    min-height: 40px !important;
  }
}


/* ── A notice is never painted under a page action ───────────────────────────────────────────────────────────
   The page action lives in `.venkero-heading-slot`, which is position:absolute at the top-right of the content
   column and therefore takes no room in the flow. The notice is the first thing in that flow, so its box ran
   underneath the button: measured on the invoices screen, 152x30px of the notice sat under Create Invoice, and
   the tail of a message — which is where the outcome is — was the part hidden.

   The notice stops short of the action's column and wraps its own text, so no message can be covered whatever it
   says. Above the width where the heading stops fitting its action beside the title, the action drops into the
   flow and the inset is no longer needed. */
.venkero-app.venkero-shell .venkero-note-ok,
.venkero-app.venkero-shell .venkero-note-warn,
.venkero-app.venkero-shell .venkero-note-error {
    margin-right: calc(var(--venkero-heading-slot, 168px) + 16px);
}

@media (max-width: 1024px) {
    .venkero-app.venkero-shell .venkero-note-ok,
    .venkero-app.venkero-shell .venkero-note-warn,
    .venkero-app.venkero-shell .venkero-note-error {
        margin-right: 0;
    }
}


/* ── the detail view, spaced and readable ────────────────────────────────────────────────────────────────────
   One invoice, opened on purpose: a way back at the top, the figures on their own lines, sections that are
   visibly separate, and prose that stops at a comfortable line length rather than running the width of a wide
   screen. The list underneath is hidden while a detail is open — the request was for the invoice, not the
   invoice and everything else after it. */
.venkero-invoice-back { margin: 0 0 14px; }
.venkero-invoice-back a { text-decoration: none; }

.venkero-invoice-detail ~ .venkero-invoice-list { display: none; }

.venkero-invoice-detail { padding: 22px 24px 26px; }
.venkero-invoice-detail > * + * { margin-top: 20px; }
.venkero-invoice-detail .venkero-card-title { margin: 0 0 6px; }
.venkero-invoice-detail .venkero-quiet { max-width: 68ch; }

.venkero-invoice-state-note { max-width: 68ch; margin: 0; }

/* The figures: a label on the left, an amount on the right, each on its own line, and the one that matters
   marked as the one that matters. */
.venkero-invoice-amounts {
  max-width: 420px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.venkero-invoice-amounts .venkero-amount {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.venkero-invoice-amounts .venkero-amount span { color: var(--text-muted); }
.venkero-invoice-amounts .venkero-amount strong { font-variant-numeric: tabular-nums; }
.venkero-invoice-amounts .venkero-amount-due { border-bottom: 0; padding-top: 10px; }
.venkero-invoice-amounts .venkero-amount-due span,
.venkero-invoice-amounts .venkero-amount-due strong { font-size: 17px; }

/* Sections inside the detail, told apart by space and a rule rather than by repeating a paragraph about what
   the platform will not do. */
.venkero-invoice-detail .venkero-invoice-sharing,
.venkero-invoice-detail .venkero-invoice-replacement { margin: 0; padding-top: 20px; border-top: 1px solid var(--border); }
.venkero-invoice-detail h3 { margin: 0 0 8px; font-size: 15px; }

/* Corrections are folded away until asked for. */
.venkero-invoice-detail .venkero-invoice-corrections { padding-top: 20px; border-top: 1px solid var(--border); }
.venkero-invoice-detail .venkero-invoice-corrections > summary {
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
}
.venkero-invoice-detail .venkero-invoice-corrections[open] > summary { margin-bottom: 10px; }
.venkero-invoice-detail .venkero-invoice-corrections .venkero-quiet { max-width: 68ch; }

/* Buttons in this view: labels centred both ways, targets comfortable, and nothing sitting under a fixed bar. */
.venkero-invoice-detail button,
.venkero-invoice-detail .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 38px;
  padding: 8px 16px;
  line-height: 1.25;
}

/* On a phone: one column, full-width controls, generous gaps, and the label still centred inside each button. */
@media (max-width: 700px) {
  .venkero-invoice-detail { padding: 18px 16px 22px; }
  .venkero-invoice-detail > * + * { margin-top: 18px; }
  .venkero-invoice-amounts { max-width: none; }
  .venkero-invoice-detail .venkero-invoice-email-form input[type=email] { width: 100%; }
  .venkero-invoice-detail button,
  .venkero-invoice-detail .button { width: 100%; }
  .venkero-invoice-detail .venkero-invoice-print { width: auto; }
  .venkero-invoice-detail .venkero-invoice-download { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
}


/* The detail reads at a comfortable length: prose stops at about seventy characters whatever the card's width,
   and the figures sit on the right, where a table of amounts would put them. Audit information is folded away. */
.venkero-invoice-detail p,
.venkero-invoice-detail li { max-width: 72ch; }
.venkero-invoice-detail .venkero-invoice-amounts { margin-left: auto; }
.venkero-invoice-detail .venkero-invoice-audit { padding-top: 16px; border-top: 1px solid var(--border); }
.venkero-invoice-detail .venkero-invoice-audit > summary { cursor: pointer; color: var(--text-muted); font-size: 13px; }
.venkero-invoice-detail .venkero-invoice-audit[open] > summary { margin-bottom: 8px; }
@media (max-width: 700px) {
  .venkero-invoice-detail p, .venkero-invoice-detail li { max-width: none; }
  .venkero-invoice-detail .venkero-invoice-amounts { margin-left: 0; }
}


/* ── the figures, on a phone ────────────────────────────────────────────────────────────────────────────────
   The document's own table is built for paper. On a narrow screen each item becomes a block: the description
   first, then each figure on its own line with its label in front of it, so nothing is a bare "2" or "$70.00"
   with no idea what it means. Screen only — the printed document and the PDF keep the table exactly as it is. */
.venkero-app .venkero-invoice-detail .venkero-invoice-owed {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 10px 0 0;
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--border);
  max-width: 420px;
}
.venkero-app .venkero-invoice-detail .venkero-invoice-owed span { color: var(--text-muted); }
.venkero-app .venkero-invoice-detail .venkero-invoice-owed strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.venkero-app .venkero-invoice-detail .venkero-invoice-from { margin: 0 0 6px; }

@media screen and (max-width: 760px) {
  .venkero-app .venkero-invoice-detail table,
  .venkero-app .venkero-invoice-detail thead,
  .venkero-app .venkero-invoice-detail tbody,
  .venkero-app .venkero-invoice-detail tr,
  .venkero-app .venkero-invoice-detail th,
  .venkero-app .venkero-invoice-detail td { display: block !important; width: auto !important; }
  .venkero-app .venkero-invoice-detail thead { display: none !important; }
  .venkero-app .venkero-invoice-detail tr {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    margin: 0 0 12px;
  }
  .venkero-app .venkero-invoice-detail td,
  .venkero-app .venkero-invoice-detail th {
    border: 0 !important;
    padding: 3px 0 !important;
    text-align: left !important;
    white-space: normal !important;
  }
  .venkero-app .venkero-invoice-detail td[data-label] {
    display: flex !important;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
  }
  .venkero-app .venkero-invoice-detail td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .venkero-app .venkero-invoice-detail .venkero-invoice-owed { max-width: none; }

  /* The item table shown here can be a stored snapshot, written when the invoice was issued, so its cells may
     carry no label attribute at all. The figures are therefore named by their position in the row — the first
     cell is the description, then quantity, unit price and amount — and rows that hold a total are skipped,
     because their first cell spans the table. Labels only; no figure is touched. */
  .venkero-app .venkero-invoice-detail tr:not(:has([colspan])) td.num:nth-child(2),
  .venkero-app .venkero-invoice-detail tr:not(:has([colspan])) td.num:nth-child(3),
  .venkero-app .venkero-invoice-detail tr:not(:has([colspan])) td.num:nth-child(4) {
    display: flex !important;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
  }
  .venkero-app .venkero-invoice-detail tr:not(:has([colspan])) td.num:nth-child(2)::before { content: "Quantity"; }
  .venkero-app .venkero-invoice-detail tr:not(:has([colspan])) td.num:nth-child(3)::before { content: "Unit price"; }
  .venkero-app .venkero-invoice-detail tr:not(:has([colspan])) td.num:nth-child(4)::before { content: "Amount"; }
  .venkero-app .venkero-invoice-detail tr:not(:has([colspan])) td.num::before {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  /* Room at the end of the page for the fixed bottom bar: the last control can be scrolled clear of it, and a
     focused control is never left sitting underneath it. */
  body.venkero-portal-body,
  body.venkero-shell { padding-bottom: 150px; }
  .venkero-app .venkero-invoice-detail button,
  .venkero-app .venkero-invoice-detail .button,
  .venkero-app .venkero-invoice-detail summary { scroll-margin-bottom: 104px; }
}


/* ── the item figures, named on a phone ─────────────────────────────────────────────────────────────────────
   The caption is placed by the script in this screen, inside the item table only. On a wide screen it is hidden
   and the table looks exactly as it did; on a narrow one each figure gets its name in front of it. */
.venkero-app .venkero-invoice-detail .venkero-cell-label { display: none; }

@media screen and (max-width: 760px) {
  .venkero-app .venkero-invoice-detail td.venkero-labelled-cell {
    display: flex !important;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
  }
  .venkero-app .venkero-invoice-detail .venkero-cell-label {
    display: inline-block;
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
}

/* Templates -> Saved items: a table on a desktop, cards on a phone. The phone rules make each row its own
   block and print the column name from the cell's data-label, so no column is clipped or dropped. */
.venkero-saved-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between;margin:0 0 14px}
.venkero-saved-searchform{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin:0}
.venkero-saved-searchlabel{display:flex;flex-direction:column;gap:4px;font-size:12px;color:#6b7280}
.venkero-saved-searchlabel .venkero-field{min-width:240px}
.venkero-saved-clear{align-self:center;font-size:12px}
.venkero-saved-count{margin:0;color:#6b7280;font-size:13px}
.venkero-saved-note{margin:0 0 14px;padding:10px 12px;border-radius:8px;background:#eef7ee;color:#1f5130;font-size:13px}
.venkero-saved-formcard{margin:0 0 18px}
.venkero-saved-formtitle{margin:0 0 12px;font-size:15px}
/* ONE ROW OF EQUAL BOXES, WHATEVER THE BROWSER THINKS A DROPDOWN IS.
   Chrome draws a <select> and an <input> at the same height by luck of its own metrics; Safari draws the select
   taller and sits its text lower, so "Billed by" stood proud of Name, Description, Quantity and Rate. The height
   is therefore stated rather than left to the widget, the padding is vertical-zero on both, and the label column
   is pushed to the bottom so a label that ever wraps cannot drag its control out of line. Styling only: no field,
   name, value or handler is touched. */
.venkero-saved-fields{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch}
.venkero-saved-fields label{display:flex;flex-direction:column;justify-content:flex-end;gap:4px;font-size:12px;color:#6b7280}
.venkero-saved-fields .venkero-field{min-width:150px}
.venkero-saved-fields input.venkero-field,
.venkero-saved-fields select.venkero-field{
  height:44px;
  min-height:44px;
  max-height:44px;
  box-sizing:border-box;
  padding-top:0;
  padding-bottom:0;
  font-size:15px;
  font-family:inherit;
  line-height:normal;
  vertical-align:middle;
}
/* Safari sizes the select's inner text with its own line box; asking for the same line height and no vertical
   padding is what makes the text sit where the inputs' text sits. The arrow is left to the platform. */
.venkero-saved-fields select.venkero-field{
  padding-left:10px;
  padding-right:10px;
  -webkit-appearance:menulist;
  appearance:auto;
}
.venkero-saved-formactions{margin:14px 0 0;display:flex;gap:8px;align-items:center}
.venkero-saved-scroll{overflow-x:auto}
.venkero-saved-table td.venkero-saved-name-cell{font-weight:600}
.venkero-saved-name{display:block;color:inherit}
.venkero-saved-detail{display:block;color:#6b7280;font-size:12px;font-weight:400}
.venkero-saved-actions-cell{white-space:nowrap}
.venkero-saved-delete{display:inline}
.venkero-saved-actions-cell .venkero-saved-delete{margin-left:6px}
.venkero-saved-help{margin:10px 0 0}
@media (max-width: 640px){
  .venkero-saved-searchlabel,.venkero-saved-searchlabel .venkero-field{width:100%;min-width:0}
  .venkero-saved-searchform{width:100%}
  .venkero-saved-scroll{overflow-x:visible}
  .venkero-saved-table thead{display:none}
  .venkero-saved-table,.venkero-saved-table tbody,.venkero-saved-table tr,.venkero-saved-table td{display:block;width:100%}
  /* NO WHITE CARD ON A DARK SCREEN. A forced white background left every value in the theme's light ink:
     the labels were readable because they set their own grey, and the numbers and Yes/No were invisible. */
  .venkero-saved-table tr{border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:12px;margin:0 0 10px;color:inherit}
  .venkero-saved-table td{border:0;padding:3px 0;display:flex;justify-content:space-between;gap:12px;text-align:right}
  .venkero-saved-table td::before{content:attr(data-label);color:#6b7280;font-size:12px;text-align:left}
  .venkero-saved-table td.venkero-saved-name-cell{display:block;text-align:left;font-size:15px;padding-bottom:6px}
  .venkero-saved-table td.venkero-saved-name-cell::before{content:none}
  .venkero-saved-table td.venkero-saved-actions-cell{display:flex;justify-content:flex-start;gap:8px;padding-top:10px}
  .venkero-saved-table td.venkero-saved-actions-cell::before{content:none}
  .venkero-saved-fields label,.venkero-saved-fields .venkero-field{width:100%;min-width:0}
}