/*
 * KIT — Material Design shell.
 *
 * Written as plain CSS custom properties rather than pulled from a CDN: the
 * production host is GoDaddy shared hosting and the fewer external requests
 * the application depends on, the fewer ways it breaks (docs/REVAMP-PLAN.md
 * §6.3).
 *
 * Responsive where it earns its place (§5.1): every screen works on a tablet,
 * rep-facing screens work on a phone, and wide data tables scroll inside
 * their own container rather than being crushed.
 */

:root {
    --kit-primary: #1565c0;
    --kit-primary-dark: #0d47a1;
    --kit-primary-light: #e3f2fd;
    --kit-accent: #ff6f00;

    --kit-surface: #ffffff;
    --kit-background: #f4f6f8;
    --kit-border: #e0e4e8;

    --kit-text: #1f2933;
    --kit-text-muted: #5c6b7a;
    --kit-text-inverse: #ffffff;

    --kit-success: #2e7d32;
    --kit-success-surface: #e8f5e9;
    --kit-error: #c62828;
    --kit-error-surface: #ffebee;
    --kit-info: #0277bd;
    --kit-info-surface: #e1f5fe;

    --kit-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
    --kit-elevation-2: 0 3px 6px rgba(0, 0, 0, 0.10), 0 3px 6px rgba(0, 0, 0, 0.12);
    --kit-elevation-3: 0 10px 20px rgba(0, 0, 0, 0.12), 0 6px 6px rgba(0, 0, 0, 0.10);

    --kit-radius: 4px;

    /* Buttons read these, so Admin → Appearance can restyle every button in
       the application without a deploy. The values here are the defaults. */
    --kit-button-radius: var(--kit-radius);
    --kit-button-height: 36px;
    --kit-button-font: 14px;
    --kit-button-transform: uppercase;
    --kit-button-spacing: 0.04em;
    --kit-sidebar-width: 240px;
    --kit-topbar-height: 56px;

    --kit-space-xs: 4px;
    --kit-space-sm: 8px;
    --kit-space-md: 16px;
    --kit-space-lg: 24px;
    --kit-space-xl: 32px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* The hidden attribute means hidden, whatever display the element is given
   afterwards. Nearly everything here is laid out as a flex or grid box, and
   every one of those beats the browser's own rule for [hidden]. That left a
   hidden panel, a hidden dialog field and a hidden row action standing on
   the page, each patched where it happened to be noticed. Said once here,
   so the next thing a script hides is hidden. */
[hidden] {
    display: none !important;
}

body.kit-body {
    margin: 0;
    font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--kit-text);
    background: var(--kit-background);
}

/*
 * A link is blue and a little heavier than the text around it, rather than
 * underlined. The colour is the brand colour Admin → Appearance sets, so
 * links follow it rather than pinning a second blue into the stylesheet.
 *
 * The weight is doing real work, not decoration. Colour on its own is not a
 * signal everyone receives — someone who cannot distinguish blue from black
 * would be left with nothing telling them what is clickable — so the link
 * differs from its neighbours in two ways, not one, and the underline comes
 * back on hover and on keyboard focus.
 *
 * :not([class]) is what keeps this to content links. Buttons, sidebar items
 * and icon links are anchors too, and they already carry their own colour
 * and their own hover; making them bold or underlining them on hover would
 * be this rule reaching somewhere it was never meant to go.
 */
a:not([class]) {
    color: var(--kit-link-colour, var(--kit-primary));
    font-weight: var(--kit-link-weight, 500);
    text-decoration: var(--kit-link-decoration, none);
}

a:not([class]):hover,
a:not([class]):focus-visible {
    text-decoration: var(--kit-link-decoration-hover, underline);
}

/*
 * No outline — it sat proud of the control and looked bolted on. Focus is
 * shown with a soft ring on the control's own edge instead.
 *
 * The ring is not decoration: a keyboard user has no pointer, so without
 * some visible focus state there is nothing at all telling them where they
 * are on the page (§5.1). :focus-visible means a mouse click does not
 * trigger it, only keyboard navigation.
 */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 0;
    border-radius: var(--kit-radius);
    box-shadow: 0 0 0 3px var(--kit-primary-light), 0 0 0 4px var(--kit-primary);
}

/* Form controls already carry a border, so the ring hugs it. */
.kit-field__input:focus-visible,
.kit-field__select:focus-visible,
.kit-field__textarea:focus-visible {
    border-color: var(--kit-primary);
    box-shadow: 0 0 0 3px var(--kit-primary-light);
}

/* A field in error keeps its own colour when focused. */
.kit-field--has-error .kit-field__input:focus-visible,
.kit-field--has-error .kit-field__select:focus-visible,
.kit-field--has-error .kit-field__textarea:focus-visible {
    border-color: var(--kit-error);
    box-shadow: 0 0 0 3px var(--kit-error-surface);
}

.kit-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.kit-skip-link {
    position: absolute;
    top: -100px;
    left: var(--kit-space-md);
    z-index: 100;
    padding: var(--kit-space-sm) var(--kit-space-md);
    background: var(--kit-surface);
    box-shadow: var(--kit-elevation-2);
    border-radius: var(--kit-radius);
    transition: top 150ms ease;
}

.kit-skip-link:focus {
    top: var(--kit-space-md);
}

/* ---------------------------------------------------------------- shell */

.kit-shell {
    display: flex;
    min-height: 100vh;
}

.kit-content {
    flex: 1;
    min-width: 0; /* lets wide tables scroll instead of stretching the page */
    display: flex;
    flex-direction: column;
}

.kit-main {
    flex: 1;
    padding: var(--kit-space-lg);
}

/* -------------------------------------------------------------- sidebar */

.kit-sidebar {
    width: var(--kit-sidebar-width);
    flex-shrink: 0;
    background: var(--kit-surface);
    border-right: 1px solid var(--kit-border);
    display: flex;
    flex-direction: column;
}

.kit-sidebar__brand {
    height: var(--kit-topbar-height);
    display: flex;
    align-items: center;
    padding: 0 var(--kit-space-lg);
    border-bottom: 1px solid var(--kit-border);
    /* A link, but not one that should look like body text turned blue. */
    text-decoration: none;
}

.kit-sidebar__brand:hover .kit-sidebar__brand-mark {
    color: var(--kit-primary-dark);
}

.kit-sidebar__brand-mark {
    font-size: 20px;
    /* Named rather than left to the font, because the name is an admin
       setting now: a long one wraps to two lines and the spacing between
       them should not be whatever the browser happens to choose. */
    line-height: 20px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--kit-primary);
}

.kit-sidebar__nav {
    padding: var(--kit-space-sm) 0;
}

.kit-sidebar__link {
    display: flex;
    align-items: center;
    gap: var(--kit-space-md);
    padding: var(--kit-space-sm) var(--kit-space-lg);
    color: var(--kit-text-muted);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background 120ms ease, color 120ms ease;
}

.kit-sidebar__link:hover {
    background: var(--kit-background);
    color: var(--kit-text);
}

.kit-sidebar__link.is-current {
    background: var(--kit-primary-light);
    border-left-color: var(--kit-primary);
    color: var(--kit-primary-dark);
    font-weight: 500;
}

.kit-sidebar__divider {
    height: 1px;
    margin: var(--kit-space-sm) var(--kit-space-lg);
    background: var(--kit-border);
}

/* --------------------------------------------------------------- topbar */

.kit-topbar {
    height: var(--kit-topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--kit-space-lg);
    background: var(--kit-surface);
    border-bottom: 1px solid var(--kit-border);
}

.kit-topbar__menu-toggle {
    display: none;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--kit-text-muted);
}

.kit-topbar__actions {
    display: flex;
    align-items: center;
    gap: var(--kit-space-lg);
    margin-left: auto;
}

/* One term across everything. Given room to grow but a ceiling, so it does
   not push the bell and the user menu off a laptop screen. */
.kit-topbar__search {
    position: relative;
    flex: 1 1 260px;
    max-width: 420px;
    margin-left: var(--kit-space-lg);
}

.kit-topbar__search-icon {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--kit-text-muted);
    pointer-events: none;
}

.kit-topbar__search input {
    width: 100%;
    height: 34px;
    padding: 0 12px 0 34px;
    font: inherit;
    font-size: 14px;
    color: var(--kit-text);
    background: var(--kit-background);
    border: 1px solid var(--kit-border);
    border-radius: 17px;
    outline: none;
}

.kit-topbar__search input:focus {
    border-color: var(--kit-primary);
    background: var(--kit-surface);
}

.kit-topbar__bell {
    position: relative;
    display: inline-flex;
    color: var(--kit-text-muted);
    text-decoration: none;
}

.kit-topbar__badge {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    color: var(--kit-text-inverse);
    background: var(--kit-accent);
    border-radius: 9px;
}

.kit-topbar__user {
    display: flex;
    align-items: center;
    gap: var(--kit-space-md);
    font-size: 14px;
}

.kit-topbar__sign-out {
    color: var(--kit-primary);
    text-decoration: none;
}

/* ---------------------------------------------------------- breadcrumbs */

.kit-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kit-space-sm);
    margin: 0 0 var(--kit-space-sm);
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: var(--kit-text-muted);
}

.kit-breadcrumb li + li::before {
    content: "chevron_right";
    font-family: "Material Icons";
    font-size: 16px;
    vertical-align: middle;
    margin-right: var(--kit-space-sm);
    color: var(--kit-border);
}

.kit-breadcrumb a {
    color: var(--kit-primary);
    text-decoration: none;
}

.kit-breadcrumb a:hover {
    text-decoration: underline;
}

.kit-breadcrumb [aria-current="page"] span {
    color: var(--kit-text);
    font-weight: 500;
}

/* ---------------------------------------------------------- page header */

.kit-page-header {
    margin-bottom: var(--kit-space-lg);
}

.kit-page-header__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--kit-space-md);
    flex-wrap: wrap;
}

.kit-page-header__title {
    margin: 0;
    font-size: 24px;
    font-weight: 400;
}

.kit-page-header__subtitle {
    margin: var(--kit-space-xs) 0 0;
    color: var(--kit-text-muted);
    font-size: 14px;
}

/* -------------------------------------------------------------- buttons */

.kit-button {
    display: inline-flex;
    align-items: center;
    gap: var(--kit-space-sm);
    padding: 0 var(--kit-space-md);
    height: var(--kit-button-height);
    font-size: var(--kit-button-font);
    font-weight: 500;
    text-decoration: none;
    text-transform: var(--kit-button-transform);
    letter-spacing: var(--kit-button-spacing);
    border: 0;
    border-radius: var(--kit-button-radius);
    cursor: pointer;
    transition: box-shadow 120ms ease, background 120ms ease;
}

.kit-button--primary {
    color: var(--kit-text-inverse);
    background: var(--kit-primary);
    box-shadow: var(--kit-elevation-1);
}

.kit-button--primary:hover {
    background: var(--kit-primary-dark);
    box-shadow: var(--kit-elevation-2);
}

.kit-button--text {
    color: var(--kit-primary);
    background: none;
}

.kit-button--danger {
    color: var(--kit-text-inverse);
    background: var(--kit-error);
}

/* ---------------------------------------------------------------- cards */

.kit-card {
    background: var(--kit-surface);
    border-radius: var(--kit-radius);
    box-shadow: var(--kit-elevation-1);
    padding: var(--kit-space-lg);
    margin-bottom: var(--kit-space-lg);
}

.kit-card__title {
    margin: 0 0 var(--kit-space-md);
    font-size: 16px;
    font-weight: 500;
}

/* A card that opens.

   For the parts of a record that are usually nothing to look at: agreed
   finance before anything is agreed, attachments before anything is
   attached. Closed they cost a line; open they read as any other card. The
   ones that do hold something are rendered open, so nothing already
   recorded is hidden behind a click.

   <details> rather than a script: it keeps the keyboard and screen-reader
   behaviour without any of it being written here, and it works before
   kit.js has loaded. */
.kit-accordion > .kit-accordion__summary {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
}

/* Safari draws its own triangle through ::-webkit-details-marker. */
.kit-accordion > .kit-accordion__summary::-webkit-details-marker {
    display: none;
}

/* Drawn rather than set in the icon font: this one is the control's only
   affordance, and a ligature that fails to load leaves the word
   "expand_more" sitting in the heading, upside down once it is rotated. */
.kit-accordion > .kit-accordion__summary::before {
    content: '';
    width: 7px;
    height: 7px;
    margin: -3px 4px 0 2px;
    border-right: 2px solid var(--kit-text-muted);
    border-bottom: 2px solid var(--kit-text-muted);
    transform: rotate(45deg);
    transition: transform 120ms ease;
}

.kit-accordion[open] > .kit-accordion__summary::before {
    margin-top: 3px;
    transform: rotate(-135deg);
}

/* Open, the summary is a heading with content under it and needs the gap a
   card title would have had. */
.kit-accordion[open] > .kit-accordion__summary {
    margin-bottom: var(--kit-space-md);
}

.kit-accordion > .kit-accordion__summary:focus-visible {
    outline: 2px solid var(--kit-primary);
    outline-offset: 2px;
}

/* A panel inside a card.

   The two bulk panels on the lead search sit inside the results card, so
   they carry none of a card's own chrome: nested, the two paddings drew a
   box inside a box and pushed the table down a screen. A rule above each
   one is what separates them instead. */
.kit-bulk-panel {
    margin: 0 0 var(--kit-space-md);
    padding: var(--kit-space-md) 0 0;
    border-top: 1px solid var(--kit-border);
}

.kit-bulk-panel__note {
    margin: var(--kit-space-xs) 0 var(--kit-space-md);
    font-size: 13px;
    color: var(--kit-text-muted);
}

/* Open, the summary already has the gap a card title would have had, and
   the note under it supplies the rest. */
.kit-bulk-panel[open] > .kit-accordion__summary {
    margin-bottom: 0;
}

/* --------------------------------------------------------------- tables */

/*
 * Wide tables scroll inside their own container, never the page — so the
 * breadcrumb and header stay put on a small screen (§5.1).
 */
.kit-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.kit-table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    font-size: 14px;
}

.kit-table th,
.kit-table td {
    padding: var(--kit-space-sm) var(--kit-space-md);
    text-align: left;
    border-bottom: 1px solid var(--kit-border);
    white-space: nowrap;
}

.kit-table th {
    font-weight: 500;
    color: var(--kit-text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kit-table tbody tr:hover {
    background: var(--kit-background);
}

/* --------------------------------------------------------------- forms */

.kit-field {
    margin-bottom: var(--kit-space-md);
}

.kit-field__label {
    display: block;
    margin-bottom: var(--kit-space-xs);
    font-size: 13px;
    font-weight: 500;
    color: var(--kit-text-muted);
}

.kit-field__input,
.kit-field__select,
.kit-field__textarea {
    width: 100%;
    padding: var(--kit-space-sm) var(--kit-space-md);
    font-size: 15px;
    /* Stated rather than left to the browser: an input and a select
       default to different line boxes, so a row containing both sat 2px
       out of line everywhere they appeared side by side. */
    line-height: 1.35;
    font-family: inherit;
    color: var(--kit-text);
    background: var(--kit-surface);
    border: 1px solid var(--kit-border);
    border-radius: var(--kit-radius);
    transition: border-color 120ms ease;
}

.kit-field__input:focus,
.kit-field__select:focus,
.kit-field__textarea:focus {
    border-color: var(--kit-primary);
}

/* Shown for reference, not for changing: the page's own grey, so it reads
   as settled rather than as a box somebody forgot to fill in. */
.kit-field__input[readonly] {
    color: var(--kit-text-muted);
    background: var(--kit-background);
    cursor: default;
}

.kit-field--has-error .kit-field__input,
.kit-field--has-error .kit-field__select,
.kit-field--has-error .kit-field__textarea {
    border-color: var(--kit-error);
}

.kit-field-error {
    display: block;
    margin-top: var(--kit-space-xs);
    font-size: 12px;
    color: var(--kit-error);
}

.kit-field__help {
    display: block;
    margin-top: var(--kit-space-xs);
    font-size: 12px;
    color: var(--kit-text-muted);
}

/* --------------------------------------------------------------- toasts */

.kit-toast-stack {
    position: fixed;
    left: 50%;
    bottom: var(--kit-space-lg);
    transform: translateX(-50%);
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: var(--kit-space-sm);
    /*
     * The stack itself ignores pointer events so a toast never blocks the
     * primary action underneath it; individual toasts re-enable them.
     */
    pointer-events: none;
}

.kit-toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: var(--kit-space-sm);
    min-width: 280px;
    max-width: min(560px, calc(100vw - 2 * var(--kit-space-lg)));
    padding: var(--kit-space-sm) var(--kit-space-md);
    color: var(--kit-text);
    background: var(--kit-surface);
    border-radius: var(--kit-radius);
    box-shadow: var(--kit-elevation-3);
    opacity: 1;
    transition: opacity 400ms ease, transform 400ms ease;
}

/*
 * Success and info fade out on their own. Errors do not — a validation
 * failure fading away before it is read is worse than no message (§5.1).
 */
.kit-toast--auto-dismiss.is-fading {
    opacity: 0;
    transform: translateY(8px);
}

.kit-toast--success {
    background: var(--kit-success-surface);
    border-left: 4px solid var(--kit-success);
}

.kit-toast--success .kit-toast__icon {
    color: var(--kit-success);
}

.kit-toast--info {
    background: var(--kit-info-surface);
    border-left: 4px solid var(--kit-info);
}

.kit-toast--info .kit-toast__icon {
    color: var(--kit-info);
}

.kit-toast--error {
    background: var(--kit-error-surface);
    border-left: 4px solid var(--kit-error);
}

.kit-toast--error .kit-toast__icon {
    color: var(--kit-error);
}

.kit-toast__message {
    flex: 1;
    font-size: 14px;
}

.kit-toast__dismiss {
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--kit-text-muted);
    display: inline-flex;
}

/* --------------------------------------------------------- empty states */

.kit-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--kit-space-md);
    padding: var(--kit-space-xl);
    text-align: center;
    color: var(--kit-text-muted);
}

.kit-empty-state__icon {
    font-size: 48px;
    color: var(--kit-border);
}

.kit-empty-state__message {
    margin: 0;
    font-size: 15px;
}

/* ----------------------------------------------------------- pagination */

.kit-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kit-space-md);
    padding-top: var(--kit-space-md);
    flex-wrap: wrap;
}

.kit-pagination__count {
    margin: 0;
    font-size: 13px;
    color: var(--kit-text-muted);
}

.kit-pagination__pages {
    display: flex;
    align-items: center;
    gap: var(--kit-space-md);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
}

.kit-pagination__pages a {
    display: inline-flex;
    color: var(--kit-primary);
    text-decoration: none;
}

/* How many rows to show. Sizes sit together as one control rather than
   three separate links, so the current one reads as a selection. */
.kit-pagination__sizes {
    display: flex;
    align-items: center;
    gap: var(--kit-space-xs);
    margin: 0;
    font-size: 13px;
    color: var(--kit-text-muted);
}

.kit-pagination__size {
    padding: 2px 8px;
    color: var(--kit-primary);
    text-decoration: none;
    border-radius: var(--kit-radius);
}

.kit-pagination__size:hover {
    background: var(--kit-surface-sunken);
}

.kit-pagination__size.is-current {
    color: var(--kit-text);
    font-weight: 600;
    background: var(--kit-surface-sunken);
}

.kit-pagination__sizes-label {
    margin-left: 2px;
}

/* The row number. Narrow, quiet, and never the point of the row. */
.kit-table__serial {
    width: 1%;
    white-space: nowrap;
    color: var(--kit-text-muted);
    font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------- contact links */

.kit-contact-links {
    display: inline-flex;
    gap: var(--kit-space-sm);
}

.kit-contact-links__item {
    display: inline-flex;
    color: var(--kit-text-muted);
    text-decoration: none;
    transition: color 120ms ease;
}

.kit-contact-links__item:hover {
    color: var(--kit-primary);
}

.kit-contact-links__item .material-icons {
    font-size: 18px;
}

/* The LinkedIn mark is an inline SVG, so it sits on the text baseline the
   way the icon font's glyphs do rather than a couple of pixels below it. */
.kit-contact-links__icon {
    display: block;
    width: 18px;
    height: 18px;
}

/* ------------------------------------------------------------ sign-in */

.kit-signin {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--kit-space-md);
}

.kit-signin__card {
    width: 100%;
    max-width: 380px;
    padding: var(--kit-space-xl);
    background: var(--kit-surface);
    border-radius: var(--kit-radius);
    box-shadow: var(--kit-elevation-2);
}

.kit-signin__title {
    margin: 0 0 var(--kit-space-lg);
    font-size: 20px;
    font-weight: 400;
    text-align: center;
}

/* --------------------------------------------------------- responsive */

@media (max-width: 900px) {
    .kit-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 50;
        transform: translateX(-100%);
        transition: transform 200ms ease;
        box-shadow: var(--kit-elevation-3);
    }

    .kit-sidebar.is-open {
        transform: translateX(0);
    }

    .kit-topbar__menu-toggle {
        display: inline-flex;
    }

    /* On a phone the box would leave nothing for the bell or the user menu,
       so it gives up its own row instead of squeezing them. */
    .kit-topbar {
        flex-wrap: wrap;
        height: auto;
        padding-bottom: var(--kit-space-sm);
    }

    .kit-topbar__search {
        order: 3;
        flex-basis: 100%;
        max-width: none;
        margin: 0 0 var(--kit-space-sm);
    }

    .kit-main {
        padding: var(--kit-space-md);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ---------------------------------------------------------- admin tiles */

.kit-admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--kit-space-md);
}

.kit-admin-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--kit-space-xs);
    padding: var(--kit-space-lg);
    background: var(--kit-surface);
    border-radius: var(--kit-radius);
    box-shadow: var(--kit-elevation-1);
    color: inherit;
    text-decoration: none;
    transition: box-shadow 120ms ease;
}

.kit-admin-tile:hover {
    box-shadow: var(--kit-elevation-2);
}

.kit-admin-tile--unavailable {
    opacity: 0.55;
    box-shadow: none;
    border: 1px dashed var(--kit-border);
}

.kit-admin-tile--unavailable:hover {
    box-shadow: none;
}

.kit-admin-tile__icon {
    color: var(--kit-primary);
    font-size: 28px;
}

.kit-admin-tile__label {
    font-size: 16px;
    font-weight: 500;
}

.kit-admin-tile__description {
    font-size: 13px;
    color: var(--kit-text-muted);
}

.kit-admin-tile__badge {
    align-self: flex-start;
    margin-top: var(--kit-space-xs);
    padding: 2px var(--kit-space-sm);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--kit-text-muted);
    background: var(--kit-background);
    border-radius: 10px;
}

/* --------------------------------------------------------------- chips */

.kit-chip {
    display: inline-block;
    padding: 2px var(--kit-space-sm);
    font-size: 12px;
    border-radius: 10px;
}

.kit-chip--active {
    color: var(--kit-success);
    background: var(--kit-success-surface);
}

.kit-chip--retired {
    color: var(--kit-text-muted);
    background: var(--kit-background);
}

/* --------------------------------------------------------- form layout */

.kit-form-actions {
    display: flex;
    gap: var(--kit-space-sm);
    align-items: center;
    margin-top: var(--kit-space-lg);
}

/* On a narrow screen an action row wraps rather than running off the side.

   The lead search puts Search, Clear, three panel buttons and two exports on
   one row. Wide, they fit by shrinking a little, which is the layout every
   form here was built around. On a phone they ran 112px past the edge of the
   screen with the last button unreachable, so below this width they wrap
   instead. Kept to the narrow case on purpose: wrapping everywhere moved
   buttons on desktop screens where nothing was wrong. */
@media (max-width: 900px) {
    .kit-form-actions {
        flex-wrap: wrap;
    }
}

.kit-field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--kit-space-md);
}

/* Two per row and no more. auto-fit will happily put three or four short
   inputs across a wide card, which reads as a wall rather than as pairs. */
.kit-field-row--pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 640px) {
    .kit-field-row--pair { grid-template-columns: 1fr; }
}

/* A field that will not sit in half a row — a textarea, mainly. */
.kit-field--full {
    grid-column: 1 / -1;
}

/* ------------------------------------------------------- detail layout */

.kit-detail-grid {
    display: grid;
    /* minmax(0, ...) rather than bare fr: a bare fr column is never narrower
       than its widest content, so the contacts table - which scrolls inside
       its own box - pushed the whole page wider than a phone instead. */
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--kit-space-lg);
    align-items: start;
}

@media (max-width: 900px) {
    .kit-detail-grid { grid-template-columns: minmax(0, 1fr); }
}

.kit-detail-actions {
    display: flex;
    gap: var(--kit-space-sm);
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: var(--kit-space-lg);
}

.kit-detail {
    margin: 0;
    display: grid;
    gap: var(--kit-space-sm);
}

.kit-detail__row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: var(--kit-space-md);
    align-items: baseline;
}

@media (max-width: 600px) {
    .kit-detail__row { grid-template-columns: 1fr; gap: 0; }
}

.kit-detail dt {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--kit-text-muted);
}

.kit-detail dd {
    margin: 0;
    font-size: 15px;
    word-break: break-word;
}

.kit-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--kit-space-sm);
}

.kit-timeline li {
    display: grid;
    gap: 2px;
    padding-left: var(--kit-space-md);
    border-left: 2px solid var(--kit-primary-light);
    font-size: 13px;
}

.kit-timeline li span {
    color: var(--kit-text-muted);
}

/* -------------------------------------------------------- dashboard */

.kit-widget-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--kit-space-lg);
    align-items: start;
}

@media (max-width: 900px) {
    .kit-widget-grid { grid-template-columns: 1fr; }
}

.kit-widget { margin-bottom: 0; }
.kit-widget--wide { grid-column: 1 / -1; }

.kit-widget__empty {
    margin: 0;
    color: var(--kit-text-muted);
    font-size: 14px;
}

.kit-widget__figure {
    margin: 0 0 var(--kit-space-sm);
    font-size: 28px;
    font-weight: 300;
}

/* Three headline numbers side by side, ahead of a widget's own table. */
.kit-widget__stats {
    display: flex;
    gap: var(--kit-space-lg);
    margin-bottom: var(--kit-space-md);
}

.kit-widget__stat-label {
    margin: 0 0 2px;
    font-size: 12px;
    color: var(--kit-text-muted);
}

.kit-widget__stats .kit-widget__figure {
    font-size: 22px;
    margin-bottom: 0;
}

/* Admin -> Knowledge Center: reading width, and the chip beside a title. */
.kit-knowledge {
    max-width: 860px;
    line-height: 1.55;
}

.kit-knowledge .kit-card__title {
    display: flex;
    align-items: center;
    gap: var(--kit-space-sm, 8px);
    flex-wrap: wrap;
}

.kit-knowledge__heading {
    margin: var(--kit-space-md) 0 4px;
    font-size: 14px;
    font-weight: 600;
}

.kit-knowledge__what {
    margin-top: 0;
    font-size: 15px;
}

.kit-knowledge__missing {
    color: var(--kit-text-muted);
}

.kit-knowledge__contents {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: var(--kit-space-md);
    font-size: 14px;
}

/* A column heading that sorts its list. The arrows stay faint until the
   list is sorted by that column. */
.kit-sort {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.kit-sort__icon {
    font-family: 'Material Icons';
    font-size: 16px;
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    opacity: 0.35;
}

.kit-sort__icon--none::before { content: 'unfold_more'; }
.kit-sort__icon--asc::before { content: 'arrow_upward'; }
.kit-sort__icon--desc::before { content: 'arrow_downward'; }

.kit-sort:hover .kit-sort__icon,
.kit-sort:focus-visible .kit-sort__icon,
.kit-sort.is-sorted .kit-sort__icon {
    opacity: 1;
}

.kit-sort.is-sorted {
    color: var(--kit-primary);
}

/* The flame after a hot lead's name: the text's height, on its line. */
.kit-hot-flame {
    width: 1em;
    height: 1em;
    vertical-align: -0.12em;
    margin-left: 2px;
}

/* The pipeline money: five figures, wrapping on a narrow screen. */
.kit-money-stats {
    flex-wrap: wrap;
}

.kit-money-stats > div {
    flex: 1 1 150px;
}

.kit-money-stats__note,
.kit-money-note {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--kit-text-muted);
}

.kit-money-note {
    margin: 0;
    font-size: 13px;
}

.kit-money-table {
    margin-top: var(--kit-space-md);
}

.kit-money-table__count {
    font-size: 12px;
    color: var(--kit-text-muted);
}

/* Bars are plain CSS widths — the numbers are small, and one fewer
   dependency is one fewer thing to break on shared hosting. */
.kit-bar {
    display: block;
    height: 8px;
    background: var(--kit-background);
    border-radius: 4px;
    overflow: hidden;
}

.kit-bar__fill {
    display: block;
    height: 100%;
    background: var(--kit-primary);
    border-radius: 4px;
}

/*
 * Tables inside a widget are small summaries, not wide data grids, so they
 * must not inherit the 600px min-width that makes list tables scroll. Without
 * this the funnel's count column overflows the card and lands on top of the
 * widget beside it.
 */
.kit-widget .kit-table {
    min-width: 0;
}

.kit-widget .kit-table th,
.kit-widget .kit-table td {
    padding: var(--kit-space-xs) var(--kit-space-sm);
    white-space: normal;
}

/* The bar column should give up its width before the label or the number. */
.kit-widget .kit-bar {
    min-width: 40px;
}

/* --------------------------------------------- required and error state */

.kit-required {
    color: var(--kit-error);
    font-weight: 600;
    margin-left: 2px;
}

/*
 * A failed field gets a red border rather than only a message underneath.
 * The message says what is wrong; the border says *where*, which on a long
 * form is the harder question.
 */
.kit-field--has-error .kit-field__input,
.kit-field--has-error .kit-field__select,
.kit-field--has-error .kit-field__textarea {
    border-color: var(--kit-error);
    border-width: 2px;
    /* Keep the control the same height as its neighbours despite the
       thicker border, so a row does not jump when it fails. */
    padding: calc(var(--kit-space-sm) - 1px) calc(var(--kit-space-md) - 1px);
}

.kit-field--has-error .kit-field__label {
    color: var(--kit-error);
}

/* --------------------------------------------------------- contact rows */

.kit-contact-row {
    position: relative;
    border-top: 1px solid var(--kit-border);
    padding-top: var(--kit-space-md);
    margin-top: var(--kit-space-md);
}

.kit-contact-row:first-child {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}

.kit-contact-row__remove {
    position: absolute;
    top: var(--kit-space-md);
    right: 0;
    display: inline-flex;
    padding: 2px;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--kit-text-muted);
    border-radius: var(--kit-radius);
}

.kit-contact-row__remove:hover {
    color: var(--kit-error);
    background: var(--kit-error-surface);
}

/* A currency input, with the unit shown rather than typed. The symbol sits
   inside the field's border so it reads as part of the input, and the text
   starts clear of it. */
.kit-input-with-prefix {
    position: relative;
    display: block;
}

.kit-input-with-prefix__prefix {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--kit-text-muted);
    font-size: 14px;
    pointer-events: none;
}

.kit-input-with-prefix .kit-field__input {
    padding-left: 26px;
}

/* ------------------------------------------------------- filter bar */

/* Five filters and their buttons on one line.
   .kit-field-row is built for forms — 220px minimum per column, a full
   space-md gap and a margin under every field — which is right when a
   field is the thing you came to fill in, and too much for controls that
   only narrow a list. This is the same fields at a smaller scale: tighter
   gaps, no bottom margin, and a search box allowed to take the extra
   width because it is the one people type into. */
.kit-filter-bar {
    display: grid;
    grid-template-columns: minmax(160px, 1.6fr) repeat(4, minmax(110px, 1fr)) auto;
    gap: var(--kit-space-sm);
    align-items: end;
}

.kit-filter-bar .kit-field {
    margin-bottom: 0;
    min-width: 0;
}

.kit-filter-bar .kit-field__label {
    margin-bottom: 2px;
    font-size: 12px;
}

.kit-filter-bar .kit-field__input,
.kit-filter-bar .kit-field__select {
    padding: 6px var(--kit-space-sm);
    font-size: 14px;
}

.kit-filter-bar .kit-filter-bar__actions {
    display: flex;
    gap: var(--kit-space-xs);
    align-items: center;
    white-space: nowrap;
    /* The last column, whatever the bar holds. The track list is fixed at
       six, so a bar with fewer filters than that would otherwise leave its
       buttons in a narrow middle column and spill them past the card. */
    grid-column: -2 / -1;
}

/* A bar that holds only its buttons.

   The six-column track list reserves 600px of minimums for filters, so a
   bar with no filters in it still asks for room for five that are not
   there, and the buttons spill past the card - the same trap the email
   queue avoided by not using this class at all. With nothing to line the
   buttons up against, there is no grid to be in.

   Wrapping rather than nowrap on the row: these labels carry counts
   ("Export all 400, every field"), so the row has no fixed width to plan
   around. */
.kit-filter-bar--actions-only {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--kit-space-xs);
}

.kit-filter-bar--actions-only .kit-filter-bar__actions {
    flex-wrap: wrap;
}

/* A link to somewhere else, under the filters rather than among them. */
.kit-filter-bar__aside {
    margin: var(--kit-space-sm) 0 0;
    font-size: 14px;
}

.kit-filter-bar__aside a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--kit-primary);
    text-decoration: none;
}

.kit-filter-bar__aside .material-icons {
    font-size: 18px;
}

.kit-filter-bar .kit-filter-bar__actions .kit-button {
    padding: 7px var(--kit-space-md);
    font-size: 14px;
}

/* Below this the row would squeeze the selects past the point of reading
   their values, so it wraps instead — the buttons keep the full width so
   they stay reachable rather than stranded in a narrow last column. */
@media (max-width: 1180px) {
    .kit-filter-bar {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .kit-filter-bar .kit-filter-bar__actions {
        grid-column: 1 / -1;
    }
}

/* --------------------------------------------------- search criteria */

/* One condition per line, reading like a sentence: [and] [field]
   [comparison] [value] [x]. The logic cell is fixed width so the fields
   stay in their columns however many rows there are. */
.kit-criterion {
    display: grid;
    grid-template-columns: 90px minmax(140px, 1.2fr) minmax(120px, 1fr) minmax(140px, 1.4fr) auto auto;
    gap: var(--kit-space-sm);
    align-items: center;
    margin-bottom: var(--kit-space-sm);
}

.kit-criterion__lead-in {
    font-size: 14px;
    color: var(--kit-text-muted);
    padding-left: 2px;
}

.kit-criterion .kit-field__select,
.kit-criterion .kit-field__input {
    padding: 6px var(--kit-space-sm);
    font-size: 14px;
}

/* A field describing a related record asks several things at once, so its
   controls drop to a second line spanning the width of the row. Pinning the
   remove button to the last column keeps it on the first line, where the
   value boxes it replaces are hidden and would otherwise pull it left. */
.kit-criterion__compound {
    grid-column: 2 / 6;
    display: flex;
    flex-wrap: wrap;
    gap: var(--kit-space-md);
    align-items: end;
    padding: var(--kit-space-sm) 0 var(--kit-space-xs);
}

.kit-criterion__part {
    display: grid;
    gap: 2px;
    font-size: 12px;
    color: var(--kit-text-muted);
}

.kit-criterion__part-range {
    display: inline-flex;
    gap: var(--kit-space-xs);
}

.kit-criterion__remove {
    grid-column: 6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    color: var(--kit-text-muted);
    background: none;
    border: 0;
    border-radius: var(--kit-radius);
    cursor: pointer;
}

.kit-criterion__remove:hover {
    color: var(--kit-error);
    background: var(--kit-surface-sunken);
}

.kit-criterion__remove .material-icons {
    font-size: 18px;
}

/* A condition reads as a sentence across a desk and cannot on a phone: six
   columns in 375px left the field and comparison as bare chevrons with no
   room for a word, and "Where" clipped to "W".

   So it stacks. One part per line, full width, with the remove button
   pinned beside the first of them.

   The parts are given their columns here as well. Naming a narrower grid
   and leaving them on the old one is what put the compound row and the
   remove button in columns five and six of a two-column grid - columns the
   browser then invented off the side of the card, which is why the page
   scrolled sideways and the remove button sat on top of a select. */
@media (max-width: 900px) {
    .kit-criterion {
        grid-template-columns: 1fr auto;
        align-items: start;
        row-gap: var(--kit-space-xs);
        padding-bottom: var(--kit-space-sm);
        border-bottom: 1px solid var(--kit-border);
    }

    .kit-criterion__logic {
        grid-column: 1;
        grid-row: 1;
    }

    .kit-criterion > .kit-field__select,
    .kit-criterion__value,
    .kit-criterion__compound {
        grid-column: 1 / -1;
    }

    /* Beside the line it removes, not under the fields it is nothing to
       do with. */
    .kit-criterion__remove {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }

    .kit-criterion__compound {
        gap: var(--kit-space-sm);
    }

    /* Two date boxes side by side leave each about 120px, which is under
       what a date input needs before it starts clipping its own text. */
    .kit-criterion__part,
    .kit-criterion__part-range {
        width: 100%;
    }

    .kit-criterion__part-range .kit-field__input {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* ---------------------------------------------------- column picker */

.kit-column-picker {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kit-space-xs);
    padding: var(--kit-space-xs);
    background: var(--kit-surface-sunken);
    border-radius: var(--kit-radius);
}

.kit-column-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px var(--kit-space-sm) 4px 2px;
    font-size: 14px;
    background: var(--kit-surface);
    border: 1px solid var(--kit-border);
    border-radius: var(--kit-radius);
    cursor: grab;
    user-select: none;
}

.kit-column-chip label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.kit-column-chip__grip {
    font-size: 18px;
    color: var(--kit-text-muted);
}

/* Unticked columns stay on the list — taking a column off the table
   should not take it off the list you put it back from — but they read
   as set aside rather than chosen. */
.kit-column-chip--unused {
    background: transparent;
    border-style: dashed;
    opacity: 0.6;
}

/* A widget chip carries a width control as well as its name, so it needs
   more room than a column's does — and on a phone there is not enough of it,
   so the name is allowed to wrap rather than the chip to outgrow the box it
   is being dragged around inside. */
.kit-column-chip--wide {
    padding-right: var(--kit-space-xs);
    max-width: 100%;
}

.kit-column-chip--wide label {
    min-width: 0;
    flex-wrap: wrap;
}

.kit-column-chip__width {
    margin-left: var(--kit-space-xs);
    padding: 2px 4px;
    font: inherit;
    font-size: 12px;
    color: var(--kit-text-muted);
    background: var(--kit-surface);
    border: 1px solid var(--kit-border);
    border-radius: var(--kit-radius);
}

.kit-column-chip.is-dragging {
    opacity: 0.4;
    cursor: grabbing;
}


/* ------------------------------------------------------------- brand */

.kit-sidebar__brand {
    gap: var(--kit-space-sm);
}

.kit-sidebar__logo {
    width: 28px;
    height: auto;
    flex: 0 0 auto;
}

.kit-signin__logo {
    display: block;
    width: 56px;
    height: auto;
    margin: 0 auto var(--kit-space-md);
}

/* ------------------------------------------------------------- chart */

/* A fixed height, because a canvas with none collapses to nothing and a
   responsive chart needs something to be responsive within. */
.kit-chart {
    position: relative;
    height: 320px;
    margin-top: var(--kit-space-md);
}

/* ------------------------------------------- search settings, out of the way

   Columns and the chart are set up once and then left alone, so they sit
   behind a button on the results rather than taking a card each above them.
   The panel is positioned rather than moved, which is what keeps its inputs
   inside the search form. */

.kit-search-toolbar {
    display: flex;
    gap: var(--kit-space-sm);
    align-items: center;
}

.kit-search-toolbar__item {
    position: relative;
}

.kit-search-toolbar__button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px var(--kit-space-sm);
    font-size: 13px;
    font-family: inherit;
    color: var(--kit-text);
    background: none;
    border: 1px solid var(--kit-border);
    border-radius: var(--kit-radius);
    cursor: pointer;
}

.kit-search-toolbar__button:hover,
.kit-search-toolbar__button[aria-expanded="true"] {
    background: var(--kit-surface-sunken);
    border-color: var(--kit-border-strong, var(--kit-border));
}

.kit-search-toolbar__button .material-icons {
    font-size: 18px;
}

/* A closed panel hides a setting that is no longer the default, so the
   button carries a mark saying so. */
.kit-search-toolbar__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--kit-primary);
}

.kit-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    width: min(420px, calc(100vw - 2 * var(--kit-space-md)));
    max-height: min(70vh, 560px);
    overflow-y: auto;
    padding: var(--kit-space-md);
    background: var(--kit-surface);
    border: 1px solid var(--kit-border);
    border-radius: var(--kit-radius);
    box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
}

.kit-panel--wide {
    width: min(620px, calc(100vw - 2 * var(--kit-space-md)));
}


/* The chart controls are a filter bar built for a full-width card; inside a
   panel they get the width they have rather than the width they wanted. */
.kit-panel .kit-filter-bar {
    flex-wrap: wrap;
    gap: var(--kit-space-sm);
}

/* On a phone a panel is a sheet along the bottom of the screen. Fixed with
   no top, it used to open where the button would have been with the page
   unscrolled: off the screen, once anybody had scrolled to the button. */
@media (max-width: 640px) {
    .kit-panel,
    .kit-panel--wide {
        position: fixed;
        top: auto;
        bottom: var(--kit-space-md);
        right: var(--kit-space-md);
        left: var(--kit-space-md);
        width: auto;
        max-height: 70vh;
    }
}

/*
 * The controls on one follow-up. Three little forms that have to read as one
 * row rather than three stacked blocks, which is what they do left alone: a
 * form is a block, and a date input inside one is wide enough to push the
 * buttons onto lines of their own.
 */
.kit-followup-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kit-space-xs, 6px);
    margin-top: 6px;
}

.kit-followup-actions > form {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
}

/*
 * Edit, folded away. Closed it is a button sitting between the others; open,
 * the form takes a line of its own underneath them, so the row only grows
 * while somebody is editing it.
 *
 * The form stays in normal flow rather than floating over the page. Both
 * places this appears sit inside a container that clips (a table with its own
 * sideways scroller, a card), and a panel positioned out of the flow would be
 * cut off by one of them.
 */
.kit-followup-edit {
    margin: 0;
}

/*
 * The marker is the word Edit and the pencil beside it; a disclosure triangle
 * as well would be two affordances for one control.
 *
 * Note what is NOT set here: display. A summary given its own display value
 * stops the browser hiding the rest of the details, and the form then renders
 * open on a page nobody has touched. The button styling lives on a span
 * inside the summary for exactly that reason.
 */
.kit-followup-edit__toggle {
    list-style: none;
    cursor: pointer;
}

.kit-followup-edit__toggle::-webkit-details-marker {
    display: none;
}

.kit-followup-edit[open] {
    flex-basis: 100%;
}

.kit-followup-edit__form {
    margin: 8px 0 4px;
    padding: 12px;
    border: 1px solid var(--kit-border);
    border-radius: var(--kit-radius, 6px);
    background: var(--kit-surface-sunken, var(--kit-bg));
    width: 100%;
    max-width: 520px;
}

/*
 * In a table the cell is as wide as its contents, so asking for room here
 * widens the column and the table scrolls sideways in the container it
 * already has. Left to the cell's own width the form is about 270px, which
 * stacks every field into a row half a screen tall.
 *
 * The card on a lead is a fixed 300px sidebar column that cannot be widened,
 * so it is deliberately left out of this: there the fields stack, and two
 * lines in a narrow column is right.
 */
.kit-table .kit-followup-edit[open] {
    /* kit-field-row wants 220px a column, so two columns and the gap between
       them need this much before the title and the date stop stacking. */
    min-width: 480px;
}

/*
 * Room for the three controls to sit on one line. A table cell is as wide as
 * its contents and this one was coming out at 122px, so Mark done, Edit and
 * Cancel took a line each and every row on the list stood three deep.
 *
 * Asking for the width here widens the column and the table scrolls sideways
 * in the container it already has, which is the cheaper of the two costs on a
 * list that is read by scanning what is due.
 */
.kit-table .kit-followup-actions {
    /* Mark done, Edit and Delete come to 345px with the gaps between them,
       measured rather than guessed. Rounded up so a longer word in another
       language does not silently put the row back onto two lines. */
    min-width: 370px;
}

/*
 * The title of a follow-up with its pencil beside it, on the card on a lead.
 * The toggle belongs against the thing it edits: a card listing three
 * follow-ups with three identical Edit buttons underneath them says nothing
 * about which is which.
 */
/*
 * Ordinary inline flow rather than a flex row. As a flex row the title is one
 * item, so a title long enough to fill the line pushed the pencil onto a line
 * of its own; inline, it follows the last word wherever that falls.
 */
.kit-followup__line {
    display: block;
}

.kit-followup-edit--compact,
.kit-followup-delete--compact {
    display: inline-block;
    vertical-align: middle;
    margin-left: var(--kit-space-xs);
}

/* Opened, it goes back to a block so the form gets the width of the card
   rather than shrinking to fit beside the title. */
.kit-followup-edit--compact[open] {
    display: block;
    margin-left: 0;
}

/*
 * Pencil only. The word would be repeated down the card once per follow-up
 * while the title beside it is what actually differs, so the label moves to
 * the title attribute and the accessible name and the button shrinks to the
 * icon.
 */
.kit-followup-edit--compact .kit-button,
.kit-followup-delete--compact .kit-button {
    min-width: 0;
    height: auto;
    padding: 2px 4px;
    line-height: 1;
}

.kit-followup-edit--compact .material-icons,
.kit-followup-delete--compact .material-icons {
    font-size: 16px;
}

/* Removing something is not the same colour as changing it. */
.kit-followup-delete .kit-button:hover,
.kit-followup-delete .kit-button:focus-visible {
    color: var(--kit-error);
}

/*
 * Adding a follow-up, folded away behind its own button. Same disclosure as
 * the edit forms, and the same reason for keeping display off the summary:
 * giving one its own display value stops the browser hiding what follows it.
 */
.kit-followup-add {
    margin-top: var(--kit-space-sm);
    padding-top: var(--kit-space-sm);
    border-top: 1px solid var(--kit-border);
}

.kit-followup-add__toggle {
    list-style: none;
    cursor: pointer;
}

.kit-followup-add__toggle::-webkit-details-marker {
    display: none;
}

.kit-followup-add__form {
    margin-top: var(--kit-space-sm);
}

.kit-followup-edit__form .kit-field {
    margin-bottom: 8px;
}

.kit-followup-edit__form .kit-form-actions {
    margin: 0;
}

/*
 * An action sitting on a card's heading rather than under its contents, for
 * the one thing that card is for: editing what it shows.
 */
.kit-card__title-action {
    float: right;
    margin-top: -4px;
}

/*
 * A row of status tabs with an action at the far end.
 *
 * Deliberately not kit-filter-bar, which is a six-column grid built for the
 * leads list's filter row: borrowing it for three buttons made the page
 * itself scroll sideways to hold columns that were not there.
 */
.kit-tab-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kit-space-sm);
    margin-bottom: var(--kit-space-md);
}

.kit-tab-bar form {
    margin: 0 0 0 auto;
}

/*
 * Secondary text inside a cell: the count of other recipients, an opportunity
 * a note is not attached to. Used in two views already and never defined, so
 * it read exactly like the text it was meant to sit behind.
 */
.kit-muted {
    color: var(--kit-text-muted);
}

/*
 * Recipients in a table cell: every address, wrapped, rather than truncated
 * and put behind a hover.
 *
 * A title attribute was the first attempt. A native tooltip waits about a
 * second, vanishes when the pointer moves and does not exist on a touch
 * screen, so the addresses were on the page without being readable. A tooltip
 * of our own would have been clipped: the table scrolls sideways, and
 * overflow-x auto clips vertically too.
 */
/*
 * Something with more behind it than it shows. Dotted underline, because a
 * cell that reveals more on hover has to look different from one that does
 * not, and focusable so a keyboard reaches it too.
 */
.kit-hint {
    border-bottom: 1px dotted var(--kit-text-muted);
    cursor: help;
}

.kit-hint:focus-visible {
    outline: 0;
    border-radius: var(--kit-radius);
    box-shadow: 0 0 0 3px var(--kit-primary-light);
}

/*
 * The bubble itself, appended to the body rather than to the cell.
 *
 * Fixed, because the tables that need one scroll sideways and overflow-x auto
 * clips vertically too: inside the cell it would be cut off by the container
 * it sits in. Nothing here is positioned in the stylesheet; kit.js sets top
 * and left against the trigger.
 */
.kit-tooltip {
    position: fixed;
    z-index: 200;
    max-width: 420px;
    padding: var(--kit-space-sm) var(--kit-space-md);
    background: var(--kit-text);
    color: var(--kit-text-inverse);
    border-radius: var(--kit-radius);
    box-shadow: var(--kit-elevation-2);
    font-size: 13px;
    line-height: 1.5;
    /* The text carries its own line breaks, and an address has no spaces to
       break at. */
    white-space: pre-line;
    overflow-wrap: anywhere;
    pointer-events: none;
}

/*
 * A card that is telling you something before you go on: the companies a new
 * lead may already be. Warm rather than red, because nothing has gone wrong
 * yet and the answer may well be "carry on".
 */
.kit-card--warning {
    border-left: 3px solid var(--kit-accent);
}

.kit-card--warning .kit-card__title {
    color: var(--kit-accent);
}

/* Two or three buttons sharing one cell need less air around each than a
   button standing on its own, or the table outgrows its card.

   Laid out as a row, because each posted button is a form of its own and a
   form is a block: two of them in a cell stacked into a column, which read
   as one action above another rather than two beside each other. */
.kit-table__actions {
    white-space: nowrap;
    width: 1%;
}

.kit-table__actions > form {
    display: inline-block;
    vertical-align: middle;
}

.kit-table__actions .kit-button--text {
    padding: 0 6px;
}

/* The import's column mapping. The first two columns wrap, and the choice
   keeps a width its option labels can be read at: a bought list's
   description column left on one line made the table three times as wide
   as its card and put every Imports as box out of sight. */
.kit-import-map {
    table-layout: fixed;
}

.kit-import-map__column {
    width: 24%;
}

.kit-import-map__choice {
    width: 260px;
}

.kit-import-map td {
    vertical-align: top;
}

.kit-import-map td:nth-child(1),
.kit-import-map td:nth-child(2) {
    white-space: normal;
    overflow-wrap: anywhere;
}

.kit-import-map__samples {
    font-size: 13px;
    color: var(--kit-text-muted);
}

.kit-import-map__sample {
    display: block;
}

.kit-import-map__sample + .kit-import-map__sample {
    margin-top: 4px;
}

.kit-import-map .kit-field__select {
    width: 100%;
}

/* A count column is as wide as its number and no wider. */
.kit-table__count {
    width: 1%;
    white-space: nowrap;
}

/* A refusal rather than a caution: the save did not happen. */
.kit-card--danger {
    border-left: 3px solid var(--kit-error);
}

.kit-card--danger .kit-card__title {
    color: var(--kit-error);
}

/* -------------------------------------------------------------- dialogs */

/* A native <dialog>: the browser traps focus, closes it on Escape and keeps
   the page behind it inert, which is everything a popup form needs. */
.kit-dialog {
    width: min(560px, calc(100vw - 2 * var(--kit-space-md)));
    max-height: calc(100vh - 2 * var(--kit-space-md));
    padding: 0;
    color: var(--kit-text);
    background: var(--kit-surface);
    border: 0;
    border-radius: var(--kit-radius);
    box-shadow: var(--kit-elevation-3);
    overflow: hidden;
}


.kit-dialog::backdrop {
    background: rgba(15, 23, 42, 0.45);
}

/* The reader has nothing to submit, so its panel is a plain element rather
   than a form, and stands the same way. */
.kit-dialog__form,
.kit-dialog__panel {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 2 * var(--kit-space-md));
}

.kit-dialog__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--kit-space-md);
    padding: var(--kit-space-md) var(--kit-space-md) var(--kit-space-sm);
    border-bottom: 1px solid var(--kit-border);
}

.kit-dialog__title {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
}

.kit-dialog__subtitle {
    margin: 2px 0 0;
    color: var(--kit-text-muted);
    overflow-wrap: anywhere;
}

.kit-dialog__close {
    display: inline-flex;
    padding: 4px;
    color: var(--kit-text-muted);
    background: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.kit-dialog__close:hover {
    background: var(--kit-background);
}

.kit-dialog__body {
    padding: var(--kit-space-md);
    overflow-y: auto;
}

.kit-dialog__body .kit-field + .kit-field {
    margin-top: var(--kit-space-md);
}

/* The error sits in the dialog rather than floating over the page, so it is
   read next to the fields it is about. */
.kit-dialog__error {
    min-width: 0;
    max-width: none;
    margin-bottom: var(--kit-space-md);
    box-shadow: none;
}

.kit-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--kit-space-sm);
    padding: var(--kit-space-sm) var(--kit-space-md) var(--kit-space-md);
    border-top: 1px solid var(--kit-border);
}

/* Saving: a bar that runs along the top edge while the request is out. */
.kit-dialog__progress {
    position: relative;
    height: 3px;
    overflow: hidden;
    background: var(--kit-primary-light);
}

.kit-dialog__progress-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40%;
    background: var(--kit-primary);
    animation: kit-progress-slide 1.1s ease-in-out infinite;
}

@keyframes kit-progress-slide {
    from { left: -40%; }
    to   { left: 100%; }
}

.kit-dialog__form[aria-busy="true"] .kit-dialog__body {
    opacity: 0.6;
}

.kit-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: kit-spin 0.7s linear infinite;
}

@keyframes kit-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .kit-dialog__progress-bar,
    .kit-spinner {
        animation-duration: 3s;
    }
}

/* A row whose notes were just saved from the popup keeps a quiet sign of it. */
[data-quick-note].is-logged {
    color: var(--kit-success);
}

/* A row action on a list wider than its card stays at the right-hand edge
   rather than past it: the lead list shows as many columns as an admin
   switches on, and a button that has to be scrolled to is a button nobody
   finds. */
.kit-table__actions--pinned {
    position: sticky;
    right: 0;
    background: var(--kit-surface);
    box-shadow: inset 1px 0 0 var(--kit-border);
}

.kit-table tbody tr:hover .kit-table__actions--pinned {
    background: var(--kit-background);
}

/* ------------------------------------------------- day-first dates */

/* A dd/mm/yyyy box standing in for a date input, with its From or To
   beside it rather than above: a label on top would make a date line taller
   than the dropdowns next to it, and the row would stop lining up. */
.kit-date {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.kit-date__label {
    flex: none;
    min-width: 2.4em;
    font-size: 12px;
    color: var(--kit-text-muted);
}

/* Wide enough for a whole dd/mm/yyyy beside the calendar button: a grid
   cell squeezed any narrower cut the year off. */
.kit-date__control {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 9.5em;
}

.kit-date__control .kit-date__display {
    width: 100%;
    min-width: 0;
    padding-right: 34px;
}

/* Still rendered, because a picker can only be opened on a control that is,
   and sitting under the box so the calendar opens where the date is. */
.kit-date__native {
    position: absolute;
    inset: 0;
    width: 100%;
    opacity: 0;
    pointer-events: none;
}

.kit-date__picker {
    position: absolute;
    right: 4px;
    display: inline-flex;
    padding: 4px;
    color: var(--kit-text-muted);
    background: none;
    border: 0;
    border-radius: var(--kit-radius);
    cursor: pointer;
}

.kit-date__picker:hover {
    color: var(--kit-primary);
    background: var(--kit-background);
}

.kit-date__picker .material-icons {
    font-size: 18px;
}

.kit-date--invalid .kit-date__display {
    border-color: var(--kit-error);
    box-shadow: inset 0 0 0 1px var(--kit-error);
}

.kit-date--invalid .kit-date__label {
    color: var(--kit-error);
}

/* ---------------------------------------------- report charts, dashboard */

.kit-report-charts {
    margin-top: var(--kit-space-xl);
}

@media (max-width: 900px) {
    .kit-report-charts .kit-widget-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.kit-report-charts__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--kit-space-sm);
    margin-bottom: var(--kit-space-md);
}

.kit-report-charts__title {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
}

.kit-report-chart__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--kit-space-sm);
}

.kit-report-chart__heading {
    min-width: 0;
}

.kit-report-chart__title {
    margin-bottom: 2px;
    overflow-wrap: anywhere;
}

.kit-report-chart__title a {
    color: inherit;
    text-decoration: none;
}

.kit-report-chart__title a:hover {
    color: var(--kit-primary);
    text-decoration: underline;
}

.kit-report-chart__meta {
    margin: 0;
    font-size: 13px;
    color: var(--kit-text-muted);
}

/* Quiet until wanted: four controls on every card would otherwise be the
   loudest thing on a dashboard that is about the numbers. */
.kit-report-chart__controls {
    display: flex;
    flex: none;
    gap: 2px;
}

.kit-report-chart__controls form {
    margin: 0;
}

.kit-report-chart__control {
    display: inline-flex;
    padding: 4px;
    color: var(--kit-text-muted);
    background: none;
    border: 0;
    border-radius: var(--kit-radius);
    cursor: pointer;
}

.kit-report-chart__control .material-icons {
    font-size: 18px;
}

.kit-report-chart__control:hover:not(:disabled) {
    color: var(--kit-primary);
    background: var(--kit-background);
}

.kit-report-chart__control:disabled {
    opacity: 0.35;
    cursor: default;
}

/* A chart sizes itself to its card, and a grid item left at its default
   minimum sizes itself to its content: together they let a canvas push its
   card, and on a phone the page, wider than the screen. Zero lets the card
   decide. */
.kit-report-chart {
    min-width: 0;
}

.kit-report-chart .kit-chart {
    width: 100%;
    height: 260px;
}

.kit-report-chart .kit-widget__empty {
    margin-top: var(--kit-space-md);
}

/* The Reports page's dashboard column. */
.kit-report-pin.is-pinned {
    color: var(--kit-success);
}

.kit-report-pin.is-unavailable {
    display: inline-flex;
    padding: 0 6px;
    color: var(--kit-border);
    cursor: help;
}

/* One of these is a button in a form and another is a plain span saying why
   there is no button. They sit on one line, so they sit on one line. */
.kit-table__actions > .kit-report-pin {
    vertical-align: middle;
}

/* ------------------------------------------- done follow-ups, on the lead */

/* Kept on the lead under what is still to do, and plainly finished: a green
   tick, a Done chip, a green rule instead of the blue one, and the title
   stepped back so the pending ones above still read first. */
.kit-followup-done__heading {
    margin: var(--kit-space-md) 0 var(--kit-space-sm);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--kit-text-muted);
}

.kit-timeline li.kit-followup--done {
    border-left-color: var(--kit-success-surface);
}

.kit-followup--done .kit-followup__line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.kit-followup--done strong {
    font-weight: 500;
    color: var(--kit-text-muted);
}

.kit-followup--done .kit-followup__done-icon {
    font-size: 16px;
    color: var(--kit-success);
}

.kit-followup--done .kit-chip {
    font-size: 11px;
}

.kit-followup-done__more {
    margin-top: var(--kit-space-sm);
    font-size: 13px;
}

.kit-followup-done__more > summary {
    cursor: pointer;
    color: var(--kit-primary);
}

.kit-followup-done__more > .kit-timeline {
    margin-top: var(--kit-space-sm);
}

/* ------------------------------------------------------- dashboard tabs */

/* The overview and the starred dashboards, as tabs. Scrolls sideways rather
   than wrapping into a block: it is navigation, and it should not push the
   page's own content down a line every time somebody stars another one. */
.kit-dashboard-tabs {
    display: flex;
    align-items: center;
    gap: var(--kit-space-xs);
    margin-bottom: var(--kit-space-md);
    overflow-x: auto;
    border-bottom: 1px solid var(--kit-border);
}

.kit-dashboard-tabs__tab {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px var(--kit-space-md);
    font-size: 14px;
    color: var(--kit-text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.kit-dashboard-tabs__tab:hover {
    color: var(--kit-primary);
}

.kit-dashboard-tabs__tab.is-current {
    color: var(--kit-primary);
    border-bottom-color: var(--kit-primary);
}

.kit-dashboard-tabs__shared {
    font-size: 14px;
}

.kit-dashboard-tabs__all {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding: 8px var(--kit-space-sm);
    font-size: 13px;
    color: var(--kit-primary);
    text-decoration: none;
    white-space: nowrap;
}

/* ------------------------------------------------ one dashboard's header */

.kit-dashboard-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--kit-space-sm);
}

.kit-dashboard-head__meta {
    margin: 0;
    font-size: 13px;
    color: var(--kit-text-muted);
}

.kit-dashboard-head__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kit-space-xs);
}

.kit-dashboard-head__actions form {
    margin: 0;
}

/* Who a dashboard is shared with, one to a line with its own way out. */
.kit-share-list {
    list-style: none;
    margin: 0 0 var(--kit-space-md);
    padding: 0;
    display: grid;
    gap: 2px;
}

.kit-share-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kit-space-sm);
    padding: 4px 0;
    font-size: 14px;
    border-bottom: 1px solid var(--kit-border);
}

.kit-share-list form {
    margin: 0;
}

/* The dashboard picker on the Reports page: a select and its button on one
   line, inside a cell. */
.kit-report-add {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
}

.kit-report-add .kit-field__select {
    max-width: 160px;
    padding: 4px 6px;
    font-size: 13px;
}

/* A panel that opens in place, directly under the buttons that opened it,
   rather than floating over the page. The search panels float because they
   sit in a crowded results bar; a dashboard's have the width of the card to
   themselves, and on a phone a floating one landed at the foot of the
   screen, a long way from the button that asked for it. */
.kit-panel.kit-panel--inline {
    position: static;
    width: auto;
    max-height: none;
    margin-top: var(--kit-space-md);
    box-shadow: none;
    background: var(--kit-background);
}

@media (max-width: 640px) {
    .kit-panel.kit-panel--inline {
        position: static;
        width: auto;
    }
}


/* ---------------------------------------------------- urgent follow-ups */

.kit-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    cursor: pointer;
}

/* On the lead: a red edge in place of the blue one, and nothing else. */
.kit-timeline li.kit-followup--urgent {
    border-left-color: var(--kit-error);
}

/* On the follow-ups list: bold, and nothing louder, as asked. */
.kit-followup-row--urgent td {
    font-weight: 700;
}

/* Received or sent, on a call or meeting note in a lead's timeline. */
.kit-radio-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kit-space-md);
    padding: 6px 0;
}

.kit-direction {
    margin-left: 4px;
    font-size: 11px;
    font-weight: 500;
    vertical-align: middle;
}

.kit-direction--received {
    color: var(--kit-success);
    background: var(--kit-success-surface);
}

.kit-direction--sent {
    color: var(--kit-info);
    background: var(--kit-info-surface);
}

/* ---- A lead's contacts, one block each ----------------------------------
   Who on the first line, how to reach them on the second. The second line
   wraps, and a long address breaks inside itself, so nothing on the card
   ever needs a sideways scroll. */
.kit-contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.kit-contact {
    padding: var(--kit-space-sm) 0;
    border-top: 1px solid var(--kit-border);
}

.kit-contact:first-child {
    border-top: 0;
    padding-top: 0;
}

.kit-contact__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px var(--kit-space-sm);
}

.kit-contact__title {
    color: var(--kit-text-muted);
    font-size: 14px;
}

.kit-contact__reach {
    display: flex;
    flex-wrap: wrap;
    gap: 4px var(--kit-space-md);
    margin-top: 4px;
    font-size: 14px;
}

.kit-contact__item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.kit-contact__item > .material-icons {
    font-size: 16px;
    color: var(--kit-text-muted);
}

.kit-contact__none {
    color: var(--kit-text-muted);
}

/*
 * The report builder: the Fields panel beside the conditions. The panel
 * keeps its place while the conditions and preview scroll past it, and on
 * a narrow screen it sits above them instead.
 */
.kit-report-builder {
    display: grid;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    gap: var(--kit-space-md);
    align-items: start;
    margin-bottom: var(--kit-space-md);
}

/* The conditions stack by the room they have, not by the window: beside
   the Fields panel they have a good deal less than the window suggests. */
.kit-report-builder__main {
    min-width: 0;
    container-type: inline-size;
}

@container (max-width: 680px) {
    .kit-criterion {
        grid-template-columns: 1fr auto;
        align-items: start;
        row-gap: var(--kit-space-xs);
        padding-bottom: var(--kit-space-sm);
        border-bottom: 1px solid var(--kit-border);
    }

    .kit-criterion__logic {
        grid-column: 1;
        grid-row: 1;
    }

    .kit-criterion > .kit-field__select,
    .kit-criterion__value,
    .kit-criterion__compound {
        grid-column: 1 / -1;
    }

    .kit-criterion__remove {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }

    .kit-criterion__part,
    .kit-criterion__part-range {
        width: 100%;
    }
}

.kit-report-builder > .kit-card,
.kit-report-builder__main > .kit-card {
    margin-bottom: 0;
}

.kit-report-builder__main > .kit-card + .kit-card {
    margin-top: var(--kit-space-md);
}

.kit-field-panel {
    position: sticky;
    top: calc(var(--kit-topbar-height) + var(--kit-space-sm));
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--kit-topbar-height) - 2 * var(--kit-space-md));
    padding: var(--kit-space-md);
}

.kit-field-panel__title {
    margin-bottom: var(--kit-space-sm);
}

.kit-field-panel__search {
    position: relative;
    display: block;
}

.kit-field-panel__search .material-icons {
    position: absolute;
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--kit-text-muted);
    pointer-events: none;
}

.kit-field-panel__search .kit-field__input {
    width: 100%;
    padding-left: 32px;
}

.kit-field-panel__hint {
    margin: var(--kit-space-sm) 0;
    font-size: 12px;
    color: var(--kit-text-muted);
}

.kit-field-panel__hint .material-icons {
    font-size: 15px;
    vertical-align: -3px;
}

.kit-field-panel__list {
    flex: 1 1 auto;
    min-height: 120px;
    overflow-y: auto;
    margin: 0 calc(-1 * var(--kit-space-sm));
    padding: 0 var(--kit-space-sm);
}

.kit-field-panel__none {
    margin: var(--kit-space-sm) 0;
    font-size: 13px;
    color: var(--kit-text-muted);
}

.kit-field-group {
    border-top: 1px solid var(--kit-border);
}

.kit-field-group--pinned {
    border-top: 0;
    margin-bottom: var(--kit-space-sm);
}

.kit-field-group__heading {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: var(--kit-space-sm) 0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    list-style-position: inside;
}

.kit-field-group--pinned .kit-field-group__heading {
    padding-bottom: 2px;
    cursor: default;
    color: var(--kit-text-muted);
}

.kit-field-group__heading .material-icons {
    font-size: 16px;
}

.kit-field-group__count {
    margin-left: auto;
    font-weight: 400;
    font-size: 12px;
    color: var(--kit-text-muted);
}

.kit-field-item {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 0 2px var(--kit-space-sm);
    border-radius: var(--kit-radius);
}

.kit-field-item:hover {
    background: var(--kit-background);
}

.kit-field-item__label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.kit-field-item__type {
    display: block;
    font-size: 11px;
    color: var(--kit-text-muted);
}

.kit-field-item__action {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    color: var(--kit-text-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--kit-radius);
    cursor: pointer;
}

.kit-field-item__action .material-icons {
    font-size: 18px;
}

.kit-field-item__action:hover,
.kit-field-item__action:focus-visible {
    color: var(--kit-primary);
    border-color: var(--kit-border);
    background: var(--kit-surface);
}

.kit-field-item__action[aria-pressed="true"] {
    color: var(--kit-primary);
    background: var(--kit-primary-light);
}

.kit-field-item__favourite[aria-pressed="true"] {
    color: var(--kit-accent);
    background: transparent;
}

/* A line the Fields panel just added says so for a moment. */
.kit-criterion.is-new {
    animation: kit-criterion-new 1.6s ease-out;
}

@keyframes kit-criterion-new {
    from { background: var(--kit-primary-light); }
    to   { background: transparent; }
}

.kit-search-preview__title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--kit-space-sm);
}

.kit-search-preview__status {
    font-size: 13px;
    font-weight: 400;
    color: var(--kit-text-muted);
}

.kit-search-preview__empty {
    margin: 0;
    font-size: 13px;
    color: var(--kit-text-muted);
}

.kit-search-preview__table {
    overflow-x: auto;
}

/* The Columns panel on a search: what shows, a line, what does not. */
.kit-column-picker__divider {
    flex-basis: 100%;
    margin: var(--kit-space-xs) 0 0;
    padding-top: var(--kit-space-sm);
    font-size: 12px;
    color: var(--kit-text-muted);
    border-top: 1px solid var(--kit-border);
}

.kit-column-chip__remove {
    display: inline-flex;
    align-items: center;
    margin-left: 2px;
    padding: 0;
    color: var(--kit-text-muted);
    background: transparent;
    border: 0;
    cursor: pointer;
}

.kit-column-chip__remove .material-icons {
    font-size: 16px;
}

.kit-column-chip__remove:hover {
    color: var(--kit-error);
}

.kit-column-chip--unused .kit-column-chip__remove {
    display: none;
}

@media (max-width: 1100px) {
    .kit-report-builder {
        grid-template-columns: minmax(0, 1fr);
    }

    .kit-field-panel {
        position: static;
        max-height: 420px;
    }
}

/*
 * A report laid out as groups or a grid. Numbers line up on the right, a
 * subtotal reads heavier than the groups inside it, and the grand total
 * sits apart at the foot.
 */
.kit-report__scroll {
    overflow-x: auto;
}

/* A group's name is a row label, not a column heading. */
.kit-report__table tbody th,
.kit-report__table tfoot th {
    font-weight: 400;
    font-size: 14px;
    color: var(--kit-text);
    text-transform: none;
    letter-spacing: normal;
    text-align: left;
}

.kit-report__table thead th.kit-report__number {
    text-align: right;
}

.kit-report__number {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.kit-report__group--subtotal th[scope="row"],
.kit-report__group--subtotal td {
    font-weight: 600;
}

.kit-report__group--depth-0.kit-report__group--subtotal {
    background: var(--kit-background);
}

.kit-report__level {
    margin-right: 4px;
    text-transform: none;
    font-size: 12px;
    font-weight: 400;
    color: var(--kit-text-muted);
}

.kit-report__grand th,
.kit-report__grand td {
    font-weight: 700;
    border-top: 2px solid var(--kit-border);
}

.kit-report__matrix .kit-report__cell {
    vertical-align: top;
}

.kit-report__corner {
    font-size: 12px;
    color: var(--kit-text-muted);
}

.kit-report__sub {
    display: block;
    font-size: 12px;
    color: var(--kit-text-muted);
}

.kit-report__empty {
    color: var(--kit-text-muted);
}

.kit-report__total {
    font-weight: 600;
    background: var(--kit-background);
}

.kit-report__note {
    margin: var(--kit-space-sm) 0 0;
    font-size: 13px;
    color: var(--kit-text-muted);
}

.kit-report__grand-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kit-space-md) var(--kit-space-lg, 24px);
    margin: 0;
}

.kit-report__grand-list dt {
    font-size: 12px;
    color: var(--kit-text-muted);
}

.kit-report__grand-list dd {
    margin: 2px 0 0;
    font-size: 20px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* The Report panel's controls. */
.kit-report-controls {
    display: grid;
    gap: var(--kit-space-md);
}

.kit-report-controls__formats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--kit-space-sm);
    margin: 0;
    padding: 0;
    border: 0;
}

.kit-report-controls__formats legend {
    margin-bottom: var(--kit-space-xs);
}

.kit-report-controls__format {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    padding: var(--kit-space-sm);
    border: 1px solid var(--kit-border);
    border-radius: var(--kit-radius);
    cursor: pointer;
}

.kit-report-controls__format:has(input:checked) {
    border-color: var(--kit-primary);
    background: var(--kit-primary-light);
}

.kit-report-controls__format strong {
    display: block;
    font-size: 14px;
}

.kit-report-controls__format small {
    display: block;
    font-size: 12px;
    color: var(--kit-text-muted);
}

.kit-report-controls__groupings {
    display: grid;
    gap: var(--kit-space-sm);
}

.kit-report-controls__pair {
    display: flex;
    gap: var(--kit-space-sm);
}

.kit-report-controls__pair .kit-field__select {
    flex: 1 1 auto;
    min-width: 0;
}

.kit-report-controls__pair .kit-report-controls__per {
    flex: 0 0 auto;
    width: auto;
}

.kit-report-controls__note {
    margin: 0 0 var(--kit-space-xs);
    font-size: 12px;
    color: var(--kit-text-muted);
}

.kit-report-controls__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(4, auto);
    gap: 0;
    font-size: 13px;
}

.kit-report-controls__grid > span {
    padding: 4px 6px;
    border-bottom: 1px solid var(--kit-border);
}

.kit-report-controls__grid-head {
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.kit-report-controls__grid-cell {
    text-align: center;
}

@media (max-width: 640px) {
    .kit-report-controls__formats {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* What a drill-down narrowed the search to, above its conditions. */
.kit-drills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kit-space-xs);
    margin-bottom: var(--kit-space-md);
    padding: var(--kit-space-sm);
    background: var(--kit-info-surface);
    border-radius: var(--kit-radius);
}

.kit-drills__lead-in {
    font-size: 13px;
    color: var(--kit-text-muted);
    margin-right: 2px;
}

.kit-drill {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 4px 2px 10px;
    font-size: 13px;
    background: var(--kit-surface);
    border: 1px solid var(--kit-border);
    border-radius: 999px;
}

.kit-drill__remove {
    display: inline-flex;
    padding: 0;
    color: var(--kit-text-muted);
    background: transparent;
    border: 0;
    cursor: pointer;
}

.kit-drill__remove .material-icons {
    font-size: 16px;
}

.kit-drill__remove:hover {
    color: var(--kit-error);
}

/*
 * Reports: the folders down the side, the reports beside them. On a narrow
 * screen the folders sit above.
 */
.kit-reports {
    display: grid;
    grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
    gap: var(--kit-space-md);
    align-items: start;
}

.kit-reports__main {
    min-width: 0;
}

.kit-reports__folders {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--kit-space-sm);
}

.kit-reports__folder {
    display: flex;
    align-items: center;
    gap: var(--kit-space-sm);
    padding: 6px var(--kit-space-sm);
    font-size: 14px;
    color: var(--kit-text);
    text-decoration: none;
    border-radius: var(--kit-radius);
}

.kit-reports__folder:hover {
    background: var(--kit-background);
}

.kit-reports__folder.is-current {
    background: var(--kit-primary-light);
    color: var(--kit-primary-dark);
    font-weight: 600;
}

.kit-reports__folder .material-icons {
    font-size: 18px;
    color: var(--kit-text-muted);
}

.kit-reports__folder-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.kit-reports__count {
    font-size: 12px;
    color: var(--kit-text-muted);
}

.kit-reports .kit-reports__shared {
    font-size: 15px;
}

.kit-reports__heading {
    margin: var(--kit-space-sm) var(--kit-space-sm) 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--kit-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kit-reports__hint {
    margin: 0 var(--kit-space-sm) var(--kit-space-xs);
    font-size: 12px;
    color: var(--kit-text-muted);
}

.kit-reports__new-folder,
.kit-reports__rename {
    display: flex;
    align-items: center;
    gap: var(--kit-space-xs);
}

.kit-reports__new-folder {
    margin-top: var(--kit-space-sm);
    padding: 0 var(--kit-space-xs);
}

.kit-reports__new-folder .kit-field__input,
.kit-reports__rename .kit-field__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px var(--kit-space-sm);
    font-size: 14px;
}

.kit-reports__folder-card .kit-card__title .material-icons {
    vertical-align: -4px;
    color: var(--kit-text-muted);
}

.kit-reports__folder-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kit-space-md);
    margin-bottom: var(--kit-space-md);
}

.kit-reports__subheading {
    margin: 0 0 var(--kit-space-sm);
    font-size: 14px;
    font-weight: 600;
}

.kit-reports__move .kit-field__select {
    min-width: 140px;
    padding: 4px var(--kit-space-sm);
    font-size: 13px;
}

@media (max-width: 900px) {
    .kit-reports {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The number a condition goes by in filter logic. */
.kit-criterion__logic {
    display: flex;
    align-items: center;
    gap: 6px;
}

.kit-criterion__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--kit-text-muted);
    background: var(--kit-background);
    border: 1px solid var(--kit-border);
    border-radius: 999px;
}

.kit-filter-logic {
    margin-top: var(--kit-space-sm);
}

.kit-filter-logic__summary {
    font-size: 13px;
    font-weight: 600;
    color: var(--kit-primary);
    cursor: pointer;
}

.kit-filter-logic .kit-field {
    margin-top: var(--kit-space-sm);
}

.kit-filter-logic .kit-field__input {
    max-width: 420px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* A grouping's bucket: bands for a number, merged names for a pick list. */
.kit-report-controls__bucket {
    margin-top: var(--kit-space-xs);
}

.kit-report-controls__merge {
    display: grid;
    gap: 4px;
    max-height: 220px;
    overflow-y: auto;
}

.kit-report-controls__merge-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--kit-space-sm);
    font-size: 13px;
}

.kit-report-controls__merge-row .kit-field__input {
    padding: 4px var(--kit-space-sm);
    font-size: 13px;
}

/* A figure a report's colour rule picked out. */
.kit-highlight--red {
    background: var(--kit-error-surface);
    color: var(--kit-error);
    font-weight: 600;
}

.kit-highlight--amber {
    background: #fff4e0;
    color: #8a4b00;
    font-weight: 600;
}

.kit-highlight--green {
    background: var(--kit-success-surface);
    color: var(--kit-success);
    font-weight: 600;
}

.kit-highlight a {
    color: inherit;
}

.kit-report-controls__rule {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 4px;
    margin-bottom: 4px;
}

.kit-report-controls__rule .kit-field__select,
.kit-report-controls__rule .kit-field__input {
    padding: 4px 6px;
    font-size: 13px;
}

/* Who a scheduled report goes to. */
.kit-subscription__people {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 6px var(--kit-space-md);
    max-height: 280px;
    overflow-y: auto;
    margin: var(--kit-space-md) 0;
    padding: var(--kit-space-sm) 0 0;
    border: 0;
    border-top: 1px solid var(--kit-border);
}

.kit-subscription__person {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

.kit-reports__row-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
}

.kit-reports__row-actions .is-on {
    color: var(--kit-primary);
}

/* A dashboard's own period and rep, above its cards. */
.kit-dashboard-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--kit-space-md);
}

.kit-dashboard-filters .kit-field {
    min-width: 180px;
}

.kit-dashboard-filters__note,
.kit-report-chart__note {
    margin: 0;
    font-size: 12px;
    color: var(--kit-text-muted);
}

.kit-card-display {
    display: inline-flex;
    gap: 4px;
    margin-right: 4px;
}

.kit-card-display .kit-field__select,
.kit-card-display .kit-field__input {
    width: auto;
    max-width: 120px;
    padding: 2px 6px;
    font-size: 12px;
}

/* A card shown as one figure. */
.kit-card-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    text-align: center;
}

.kit-card-figure__value {
    font-size: 44px;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.kit-card-figure__label {
    margin-top: 6px;
    font-size: 13px;
    color: var(--kit-text-muted);
}

/* A card shown as a gauge against its target. */
.kit-card-gauge {
    max-width: 320px;
    margin: 0 auto;
    text-align: center;
}

.kit-card-gauge svg {
    width: 100%;
    height: auto;
}

.kit-card-gauge__percent {
    font-size: 28px;
    font-weight: 700;
    fill: var(--kit-text);
}

.kit-card-gauge__caption {
    margin: 0;
    font-size: 14px;
}

.kit-card-gauge__caption span {
    display: block;
    font-size: 12px;
    color: var(--kit-text-muted);
}

.kit-card-table td,
.kit-card-table th {
    padding: 6px 8px;
}

.kit-history__up {
    color: var(--kit-success);
}

.kit-history__down {
    color: var(--kit-error);
}

/* Ready-made reports on the Reports page. */
.kit-templates__summary {
    cursor: pointer;
    margin-bottom: 0;
}

.kit-templates[open] .kit-templates__summary {
    margin-bottom: var(--kit-space-md);
}

.kit-templates__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--kit-space-sm);
}

.kit-templates__item {
    display: flex;
    gap: var(--kit-space-sm);
    padding: var(--kit-space-sm) var(--kit-space-md);
    color: var(--kit-text);
    text-decoration: none;
    border: 1px solid var(--kit-border);
    border-radius: var(--kit-radius);
}

.kit-templates__item:hover {
    border-color: var(--kit-primary);
    background: var(--kit-primary-light);
}

.kit-templates__item .material-icons {
    color: var(--kit-primary);
}

.kit-templates__item strong {
    display: block;
    font-size: 14px;
}

.kit-templates__item small {
    display: block;
    font-size: 12px;
    color: var(--kit-text-muted);
}

.kit-templates__records {
    margin-top: 2px;
    font-weight: 600;
}

/* A field being dragged from the Fields panel, and where it can land. */
.kit-field-item[draggable="true"] {
    cursor: grab;
}

.kit-field-item.is-dragging {
    opacity: 0.5;
}

.is-dragging-field [data-field-drop],
.is-dragging-field [data-panel-toggle^="columns"] {
    outline: 2px dashed var(--kit-border);
    outline-offset: 2px;
}

.is-dragging-field .is-drop-target {
    outline-color: var(--kit-primary);
    background: var(--kit-primary-light);
}

/* The Dashboard's quarter, at the end of the tab row. */
.kit-dashboard-tabs__extra {
    flex: none;
    margin-left: var(--kit-space-sm);
    padding-bottom: 4px;
}

.kit-quarter-filter {
    display: flex;
    align-items: center;
    gap: 6px;
}

.kit-quarter-filter__label {
    font-size: 13px;
    color: var(--kit-text-muted);
}

.kit-quarter-filter .kit-field__select {
    width: auto;
    padding: 4px 28px 4px 8px;
    font-size: 13px;
}

.kit-quarter-filter__note {
    margin: calc(-1 * var(--kit-space-sm)) 0 var(--kit-space-md);
    font-size: 12px;
    color: var(--kit-text-muted);
}

/* A destructive action at the foot of a card, set apart from its details. */
.kit-detail__danger {
    margin-top: var(--kit-space-md);
    padding-top: var(--kit-space-sm);
    border-top: 1px solid var(--kit-border);
}