/*
 * 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;
}

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;
}

/* --------------------------------------------------------------- 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);
}

.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);
}

.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;
    grid-template-columns: 2fr 1fr;
    gap: var(--kit-space-lg);
    align-items: start;
}

@media (max-width: 900px) {
    .kit-detail-grid { grid-template-columns: 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;
}

/* 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 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;
}

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

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

/* ---------------------------------------------------- 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;
}

.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)));
}

.kit-panel[hidden] {
    display: none;
}

/* 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);
}

@media (max-width: 640px) {
    .kit-panel,
    .kit-panel--wide {
        position: fixed;
        top: auto;
        right: var(--kit-space-md);
        left: var(--kit-space-md);
        width: auto;
    }
}

/*
 * 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. */
.kit-table__actions {
    white-space: nowrap;
    width: 1%;
}

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

/* 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);
}