/*
 * Hixby site styles: my65's look (docs/ui-redo-plan.md). Every colour is a token below, set once for
 * dark (my65's palette, the default) and once for light. Bootstrap's own variables point at the
 * tokens, so stock Bootstrap classes come out in these colours and pages need no styles of their own.
 * The brand accent comes from the company settings, set per theme in _Head.
 */

:root,
[data-bs-theme="light"] {
    --hx-page: #F6F8FA;
    --hx-page-rgb: 246, 248, 250;
    --hx-surface: #FFFFFF;
    --hx-surface-rgb: 255, 255, 255;
    --hx-raised: #EEF1F4;
    --hx-raised-rgb: 238, 241, 244;
    --hx-border: #D0D7DE;
    --hx-border-strong: #AFB8C1;
    --hx-text: #1F2328;
    --hx-text-rgb: 31, 35, 40;
    --hx-text-strong: #0D1117;
    --hx-text-strong-rgb: 13, 17, 23;
    --hx-muted: #59636E;
    --hx-dim: #818B98;
    --hx-link: #0969DA;
    --hx-link-rgb: 9, 105, 218;
    --hx-link-hover: #0550AE;
    --hx-link-hover-rgb: 5, 80, 174;

    /* Status tones: bright text on a pale tint, with a line between. */
    --hx-green: #1A7F37;
    --hx-green-tint: #DAFBE1;
    --hx-green-line: #ACEEBB;
    --hx-amber: #9A6700;
    --hx-amber-tint: #FFF8C5;
    --hx-amber-line: #EAC54F;
    --hx-red: #D1242F;
    --hx-red-tint: #FFEBE9;
    --hx-red-line: #FFCECB;
    --hx-blue: #0969DA;
    --hx-blue-tint: #DDF4FF;
    --hx-blue-line: #B6E3FF;
    --hx-teal: #1B7C83;
    --hx-teal-tint: #D8F3F6;
    --hx-teal-line: #9FE0E6;
    --hx-grey: #59636E;
    --hx-grey-tint: #EFF2F5;
    --hx-grey-line: #D0D7DE;

    --hx-accent: #2F6FDE;
    --hx-accent-text: #FFFFFF;

    /* Report charts' series, in a fixed order (docs/reports-plan.md §3): a validated categorical set, checked for
       colour-blind separation against this theme's cards. One series always takes the first. */
    --hx-chart-1: #2A78D6;
    --hx-chart-2: #EB6834;
    --hx-chart-3: #1BAF7A;
    --hx-chart-4: #EDA100;
}

/* my65's palette, measured from the running app on 28 Oct 2026. */
[data-bs-theme="dark"] {
    --hx-page: #0D1117;
    --hx-page-rgb: 13, 17, 23;
    --hx-surface: #161B22;
    --hx-surface-rgb: 22, 27, 34;
    --hx-raised: #1C2128;
    --hx-raised-rgb: 28, 33, 40;
    --hx-border: #21262D;
    --hx-border-strong: #30363D;
    --hx-text: #C9D1D9;
    --hx-text-rgb: 201, 209, 217;
    --hx-text-strong: #E6EDF3;
    --hx-text-strong-rgb: 230, 237, 243;
    --hx-muted: #8B949E;
    --hx-dim: #6E7681;
    --hx-link: #58A6FF;
    --hx-link-rgb: 88, 166, 255;
    --hx-link-hover: #79C0FF;
    --hx-link-hover-rgb: 121, 192, 255;

    --hx-green: #3FB950;
    --hx-green-tint: #12261E;
    --hx-green-line: #196030;
    --hx-amber: #D29922;
    --hx-amber-tint: #272115;
    --hx-amber-line: #5A4600;
    --hx-red: #F85149;
    --hx-red-tint: #2A1216;
    --hx-red-line: #5A1F1F;
    --hx-blue: #58A6FF;
    --hx-blue-tint: #121D2F;
    --hx-blue-line: #1F3A5A;
    --hx-teal: #39C5CF;
    --hx-teal-tint: #0E3A3E;
    --hx-teal-line: #1B7C83;
    --hx-grey: #8B949E;
    --hx-grey-tint: #21262D;
    --hx-grey-line: #30363D;

    /* The same four hues, stepped for the dark cards. */
    --hx-chart-1: #3987E5;
    --hx-chart-2: #D95926;
    --hx-chart-3: #199E70;
    --hx-chart-4: #C98500;
}

/* Bootstrap's variables, pointed at the tokens. Declared on every themed element, so a dark navbar on a light page gets dark values. */
:root,
[data-bs-theme] {
    --bs-body-bg: var(--hx-page);
    --bs-body-bg-rgb: var(--hx-page-rgb);
    --bs-body-color: var(--hx-text);
    --bs-body-color-rgb: var(--hx-text-rgb);
    --bs-emphasis-color: var(--hx-text-strong);
    --bs-emphasis-color-rgb: var(--hx-text-strong-rgb);
    --bs-heading-color: var(--hx-text-strong);
    --bs-secondary-color: var(--hx-muted);
    --bs-tertiary-color: var(--hx-dim);
    --bs-secondary-bg: var(--hx-raised);
    --bs-secondary-bg-rgb: var(--hx-raised-rgb);
    --bs-tertiary-bg: var(--hx-surface);
    --bs-tertiary-bg-rgb: var(--hx-surface-rgb);
    --bs-border-color: var(--hx-border);
    --bs-border-color-translucent: var(--hx-border);
    --bs-link-color: var(--hx-link);
    --bs-link-color-rgb: var(--hx-link-rgb);
    --bs-link-hover-color: var(--hx-link-hover);
    --bs-link-hover-color-rgb: var(--hx-link-hover-rgb);
    --hx-accent-hover: color-mix(in srgb, var(--hx-accent) 85%, black);
}

.card {
    --bs-card-bg: var(--hx-surface);
    --bs-card-cap-bg: var(--hx-surface);
    --bs-card-border-color: var(--hx-border);
}

.list-group {
    --bs-list-group-bg: var(--hx-surface);
    --bs-list-group-color: var(--hx-text);
    --bs-list-group-border-color: var(--hx-border);
    --bs-list-group-action-color: var(--hx-text);
    --bs-list-group-action-hover-bg: var(--hx-raised);
    --bs-list-group-action-hover-color: var(--hx-text-strong);
}

.modal {
    --bs-modal-bg: var(--hx-surface);
    --bs-modal-border-color: var(--hx-border-strong);
    --bs-modal-header-border-color: var(--hx-border);
    --bs-modal-footer-border-color: var(--hx-border);
}

.dropdown-menu {
    --bs-dropdown-bg: var(--hx-surface);
    --bs-dropdown-border-color: var(--hx-border-strong);
    --bs-dropdown-link-color: var(--hx-text);
    --bs-dropdown-link-hover-color: var(--hx-text-strong);
    --bs-dropdown-link-hover-bg: var(--hx-raised);
    --bs-dropdown-divider-bg: var(--hx-border);
    --bs-dropdown-header-color: var(--hx-muted);
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--hx-text);
    --bs-table-border-color: var(--hx-border);
    --bs-table-hover-bg: var(--hx-raised);
    --bs-table-hover-color: var(--hx-text-strong);
}

.form-control,
.form-select {
    border-color: var(--hx-border-strong);
}

.btn-outline-secondary {
    --bs-btn-color: var(--hx-muted);
    --bs-btn-border-color: var(--hx-border-strong);
    --bs-btn-hover-color: var(--hx-text-strong);
    --bs-btn-hover-bg: var(--hx-border);
    --bs-btn-hover-border-color: var(--hx-border-strong);
    --bs-btn-active-color: var(--hx-text-strong);
    --bs-btn-active-bg: var(--hx-border);
    --bs-btn-active-border-color: var(--hx-border-strong);
    --bs-btn-disabled-color: var(--hx-dim);
    --bs-btn-disabled-border-color: var(--hx-border);
}

.btn-outline-primary {
    --bs-btn-color: var(--hx-link);
    --bs-btn-border-color: var(--hx-link);
    --bs-btn-hover-color: var(--hx-page);
    --bs-btn-hover-bg: var(--hx-link);
    --bs-btn-hover-border-color: var(--hx-link);
    --bs-btn-active-color: var(--hx-page);
    --bs-btn-active-bg: var(--hx-link);
    --bs-btn-active-border-color: var(--hx-link);
}

.btn-primary {
    --bs-btn-bg: var(--hx-accent);
    --bs-btn-border-color: var(--hx-accent);
    --bs-btn-color: var(--hx-accent-text);
    --bs-btn-hover-bg: var(--hx-accent-hover);
    --bs-btn-hover-border-color: var(--hx-accent-hover);
    --bs-btn-hover-color: var(--hx-accent-text);
    --bs-btn-active-bg: var(--hx-accent-hover);
    --bs-btn-active-border-color: var(--hx-accent-hover);
    --bs-btn-active-color: var(--hx-accent-text);
    --bs-btn-disabled-bg: var(--hx-accent);
    --bs-btn-disabled-border-color: var(--hx-accent);
}

/* my65's focus: a blue edge and a faint glow. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--hx-link);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--hx-link) 15%, transparent);
}

.dropdown-item.active,
.dropdown-item:active {
    background: var(--hx-accent);
    color: var(--hx-accent-text);
}

/* The top bar: my65's black bar, logo then the menus centred, the person's things on the right. Black in both themes. */

.hx-nav {
    background: linear-gradient(#141414F4, #000000EA);
    min-height: 74px;
    --bs-navbar-color: rgba(255, 255, 255, 0.55);
    --bs-navbar-hover-color: #FFFFFF;
    --bs-navbar-active-color: #FFFFFF;
}

.hx-nav .dropdown-menu {
    --bs-dropdown-bg: #343A40;
    --bs-dropdown-border-color: rgba(255, 255, 255, 0.15);
    --bs-dropdown-link-color: #DEE2E6;
    --bs-dropdown-link-hover-color: #FFFFFF;
    --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.08);
    --bs-dropdown-divider-bg: rgba(255, 255, 255, 0.15);
}

.hx-nav .dropdown-item .bi,
.hx-nav .dropdown-item-icon {
    display: inline-block;
    width: 1.25rem;
    margin-right: 0.5rem;
}

.hx-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* A client's logo is usually made for white paper, so on the black bar it sits on a white tile. */
.hx-logo-tile {
    display: inline-flex;
    align-items: center;
    background: #FFFFFF;
    border-radius: 0.5rem;
    padding: 0.25rem 0.5rem;
}

.hx-logo {
    height: 40px;
    width: auto;
    max-width: 12rem;
    object-fit: contain;
}

.hx-brand-name {
    color: #FFFFFF;
    font-weight: 600;
}

.hx-test-badge {
    background: var(--hx-amber);
    color: #0D1117;
    letter-spacing: 0.05em;
}

.hx-nav-end {
    align-items: center;
}

.hx-avatar-button {
    background: none;
    border: 0;
    padding: 0.25rem;
    border-radius: 50%;
}

.hx-avatar-button:focus-visible {
    outline: 2px solid #58A6FF;
    outline-offset: 2px;
}

/* my65's avatar: initials on a dark chrome disc with a silver rim. */
.hx-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: #E6EDF3;
    background: radial-gradient(circle at 30% 30%, #3A4048, #0D1117 70%);
    border: 2px solid #8B949E;
    box-shadow: 0 0 0 1px #000000;
}

.hx-user-menu {
    min-width: 16rem;
}

.hx-role-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.hx-role-pill {
    padding: 0.125rem 0.5rem;
    border: 1px solid var(--hx-blue-line);
    border-radius: 999px;
    background: var(--hx-blue-tint);
    color: var(--hx-blue);
    font-size: 0.75rem;
    text-decoration: none;
}

.hx-role-pill:hover,
.hx-role-pill.active {
    background: var(--hx-blue);
    border-color: var(--hx-blue);
    color: var(--hx-page);
}

/* Pages: lists and Planning use the full width, forms stop at my65's 1440px. */

.hx-main {
    padding: 1rem max(1rem, env(safe-area-inset-right, 0px)) 2rem max(1rem, env(safe-area-inset-left, 0px));
}

.hx-narrow {
    max-width: 1440px;
    margin-inline: auto;
}

.hx-crumbs {
    background: var(--hx-surface);
    border: 1px solid var(--hx-border);
    border-radius: 0.375rem;
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
    --bs-breadcrumb-divider-color: var(--hx-dim);
    --bs-breadcrumb-item-active-color: var(--hx-text-strong);
}

.hx-crumbs a {
    color: var(--hx-muted);
    text-decoration: none;
}

.hx-crumbs a:hover {
    color: var(--hx-text-strong);
}

.hx-crumbs .bi {
    margin-right: 0.375rem;
}

/* The shared confirm pop-up, toasts and the out-of-date nudge (ui.js). */

.hx-confirm .modal-content {
    border-color: var(--hx-amber-line);
}

.hx-confirm-icon {
    color: var(--hx-amber);
    font-size: 1.5rem;
    line-height: 1;
}

.hx-toasts {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right, 0px));
    bottom: max(1rem, env(safe-area-inset-bottom, 0px));
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hx-toast {
    --bs-toast-bg: var(--hx-surface);
    --bs-toast-color: var(--hx-text-strong);
    --bs-toast-border-color: var(--hx-border-strong);
    border-left: 4px solid var(--hx-green);
}

.hx-toast .bi {
    margin-right: 0.5rem;
    color: var(--hx-green);
}

.hx-toast[data-tone="danger"] {
    border-left-color: var(--hx-red);
}

.hx-toast[data-tone="danger"] .bi {
    color: var(--hx-red);
}

.hx-toast[data-tone="warning"] {
    border-left-color: var(--hx-amber);
}

.hx-toast[data-tone="warning"] .bi {
    color: var(--hx-amber);
}

.hx-toast[data-tone="info"] {
    border-left-color: var(--hx-blue);
}

.hx-toast[data-tone="info"] .bi {
    color: var(--hx-blue);
}

@media print {
    .hx-top,
    .hx-crumbs,
    .hx-toasts,
    .hx-no-print {
        display: none !important;
    }
}

/* Shared list and form pieces (docs/ui-redo-plan.md, step 2), sized as measured in my65. */

/* A button's icon sits a little before its words; an icon-only button stays square. */
.btn:has(> .bi) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
}

.btn-outline-success {
    --bs-btn-color: var(--hx-green);
    --bs-btn-border-color: var(--hx-green);
    --bs-btn-hover-color: var(--hx-page);
    --bs-btn-hover-bg: var(--hx-green);
    --bs-btn-hover-border-color: var(--hx-green);
    --bs-btn-active-color: var(--hx-page);
    --bs-btn-active-bg: var(--hx-green);
    --bs-btn-active-border-color: var(--hx-green);
    --bs-btn-disabled-color: var(--hx-green);
    --bs-btn-disabled-border-color: var(--hx-green);
}

.btn-outline-danger {
    --bs-btn-color: var(--hx-red);
    --bs-btn-border-color: var(--hx-red);
    --bs-btn-hover-color: var(--hx-page);
    --bs-btn-hover-bg: var(--hx-red);
    --bs-btn-hover-border-color: var(--hx-red);
    --bs-btn-active-color: var(--hx-page);
    --bs-btn-active-bg: var(--hx-red);
    --bs-btn-active-border-color: var(--hx-red);
    --bs-btn-disabled-color: var(--hx-red);
    --bs-btn-disabled-border-color: var(--hx-red);
}

/* Amber: a filter that hides something. Filled while it's on. */
.btn-outline-warning {
    --bs-btn-color: var(--hx-amber);
    --bs-btn-border-color: var(--hx-amber);
    --bs-btn-hover-color: var(--hx-page);
    --bs-btn-hover-bg: var(--hx-amber);
    --bs-btn-hover-border-color: var(--hx-amber);
    --bs-btn-active-color: var(--hx-page);
    --bs-btn-active-bg: var(--hx-amber);
    --bs-btn-active-border-color: var(--hx-amber);
    --bs-btn-disabled-color: var(--hx-amber);
    --bs-btn-disabled-border-color: var(--hx-amber);
}

/* Fields: my65's size, a little smaller than Bootstrap's; small ones as in card headers. */
.form-control,
.form-select {
    font-size: 0.875rem;
}

.form-control-sm,
.form-select-sm {
    font-size: 0.78rem;
    min-height: 29px;
}

.form-label {
    font-size: 0.875rem;
}

.hx-help {
    border: 0;
    background: none;
    padding: 0 0.125rem;
    color: var(--hx-muted);
    line-height: 1;
}

.hx-help:hover,
.hx-help:focus-visible {
    color: var(--hx-link);
}

/* A small uppercase label, like a table heading. */
.hx-label {
    min-width: 5rem;
    color: var(--hx-muted);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* The card (hx-card): icon, title and count pill on the left; the tools on the right. */
.hx-box-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    min-height: 48px;
    padding: 0.5rem 1rem;
}

.hx-box-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1rem;
}

.hx-box-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--hx-text-strong);
    font-size: 1rem;
    font-weight: 500;
}

.hx-box-note {
    color: var(--hx-muted);
    font-size: 0.8rem;
}

.hx-box-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.hx-box-foot {
    padding: 0.5rem 1rem;
}

/* my65's grey count pill. */
.hx-count {
    padding: 0.26rem 0.49rem;
    border-radius: 0.375rem;
    background: var(--hx-grey-tint);
    color: var(--hx-muted);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.hx-fresh {
    color: var(--hx-muted);
    font-size: 0.8rem;
    white-space: nowrap;
}

.hx-search-box .form-control {
    min-width: 14rem;
}

/* Tables: small grey uppercase headings, .78rem cells, rows about 28px. */
.hx-table {
    --bs-table-bg: var(--hx-page);
    --bs-table-hover-bg: var(--hx-raised);
    margin-bottom: 0;
    font-size: 0.78rem;
}

.hx-table > :not(caption) > * > * {
    padding: 0.25rem 0.5rem;
    white-space: nowrap;
}

.hx-table > thead > tr > th {
    background: var(--hx-surface);
    border-bottom-width: 0;
    box-shadow: inset 0 -2px 0 var(--hx-border);
    color: var(--hx-muted);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    vertical-align: bottom;
}

.hx-table a {
    text-decoration: none;
}

.hx-table a:hover {
    text-decoration: underline;
}

.hx-table .hx-chip {
    padding-block: 0;
    font-size: 0.7rem;
}

.hx-sort,
.hx-sort:hover {
    color: inherit;
}

.hx-sort-arrow {
    margin-left: 0.25rem;
    color: var(--hx-link);
    font-weight: 700;
}

.hx-col-off {
    display: none;
}

.hx-table tr[data-href] {
    cursor: pointer;
}

/* Inactive or cancelled: still listed, quieter. */
.hx-table > tbody > tr.hx-row-off > * {
    opacity: 0.55;
}

.hx-table .hx-wrap {
    white-space: normal;
}

/* Long text kept to one line and cut with "…", so its row stays one line high; the whole text is in its title. Inline,
   so an icon can sit in front of it. */
.hx-table .hx-clip {
    display: inline-block;
    vertical-align: bottom;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A card's scroll area: the headings stay in view. */
.hx-scroll {
    max-height: 70vh;
    overflow: auto;
}

.hx-scroll > .hx-table > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* my65's cell colours: a dark tint with bright text. */
.hx-cell-green {
    --bs-table-bg-type: var(--hx-green-tint);
    --bs-table-color-type: var(--hx-green);
    background-color: var(--hx-green-tint);
    color: var(--hx-green);
}

.hx-cell-amber {
    --bs-table-bg-type: var(--hx-amber-tint);
    --bs-table-color-type: var(--hx-amber);
    background-color: var(--hx-amber-tint);
    color: var(--hx-amber);
}

.hx-cell-red {
    --bs-table-bg-type: var(--hx-red-tint);
    --bs-table-color-type: var(--hx-red);
    background-color: var(--hx-red-tint);
    color: var(--hx-red);
}

.hx-cell-blue {
    --bs-table-bg-type: var(--hx-blue-tint);
    --bs-table-color-type: var(--hx-blue);
    background-color: var(--hx-blue-tint);
    color: var(--hx-blue);
}

.hx-cell-grey {
    --bs-table-bg-type: var(--hx-grey-tint);
    --bs-table-color-type: var(--hx-grey);
    background-color: var(--hx-grey-tint);
    color: var(--hx-grey);
}

/* Status chips (hx-chip): a dot, the label, an optional count. As filters they're links. */
.hx-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    border-bottom: 1px solid var(--hx-border);
}

.hx-chip {
    --hx-tone: var(--hx-grey);
    --hx-tone-tint: var(--hx-grey-tint);
    --hx-tone-line: var(--hx-grey-line);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.5rem;
    border: 1px solid var(--hx-tone-line);
    border-radius: 999px;
    background: var(--hx-tone-tint);
    color: var(--hx-tone);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
}

.hx-chip[data-tone="green"] {
    --hx-tone: var(--hx-green);
    --hx-tone-tint: var(--hx-green-tint);
    --hx-tone-line: var(--hx-green-line);
}

.hx-chip[data-tone="amber"] {
    --hx-tone: var(--hx-amber);
    --hx-tone-tint: var(--hx-amber-tint);
    --hx-tone-line: var(--hx-amber-line);
}

.hx-chip[data-tone="red"] {
    --hx-tone: var(--hx-red);
    --hx-tone-tint: var(--hx-red-tint);
    --hx-tone-line: var(--hx-red-line);
}

.hx-chip[data-tone="blue"] {
    --hx-tone: var(--hx-blue);
    --hx-tone-tint: var(--hx-blue-tint);
    --hx-tone-line: var(--hx-blue-line);
}

.hx-chip[data-tone="teal"] {
    --hx-tone: var(--hx-teal);
    --hx-tone-tint: var(--hx-teal-tint);
    --hx-tone-line: var(--hx-teal-line);
}

.hx-dot {
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
}

.hx-chip-count {
    padding: 0 0.375rem;
    border-radius: 999px;
    background: var(--hx-tone-line);
    color: var(--hx-text-strong);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

a.hx-chip:hover {
    border-color: var(--hx-tone);
    color: var(--hx-tone);
}

a.hx-chip.active {
    border-color: var(--hx-tone);
    box-shadow: inset 0 0 0 1px var(--hx-tone);
}

/* The one pager: "Show 25 per page" on the left, "‹ 1 of 13 ›" on the right. */
.hx-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    color: var(--hx-muted);
    font-size: 0.85rem;
}

.hx-pager-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.hx-pager-label .form-select {
    width: auto;
}

.hx-pager-range {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

.hx-pager-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hx-pager-at {
    color: var(--hx-text);
    font-variant-numeric: tabular-nums;
}

/* Tabs inside a card, such as one per lookup list. */
.hx-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    border-bottom: 1px solid var(--hx-border);
}

.hx-tab {
    padding: 0.375rem 0.75rem;
    border-bottom: 2px solid transparent;
    color: var(--hx-muted);
    font-size: 0.85rem;
    text-decoration: none;
}

.hx-tab:hover {
    color: var(--hx-text-strong);
}

.hx-tab.active {
    border-bottom-color: var(--hx-accent);
    color: var(--hx-text-strong);
}

/* Side tabs (Shared/_SideTabs.cshtml, ui.js): a record page's parts down the left, with its name and status on top,
   and one part at a time on the right. The left column stays in view; on a narrow screen it sits above, its tabs in a
   row that scrolls sideways. */
.hx-sidetabs {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.hx-sidetabs-nav {
    position: sticky;
    top: calc(74px + 1rem);
    background: var(--hx-surface);
    border: 1px solid var(--hx-border);
    border-radius: 0.375rem;
}

.hx-sidetabs-head {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--hx-border);
}

.hx-sidetabs-title {
    margin: 0;
    color: var(--hx-text-strong);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.hx-sidetabs-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    color: var(--hx-muted);
    font-size: 0.8rem;
}

.hx-sidetabs-list {
    /* Holds its tabs' hidden words too, so on a phone they scroll with the row instead of widening the page. */
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.5rem;
}

.hx-sidetab {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    color: var(--hx-muted);
    font-size: 0.9rem;
    text-decoration: none;
    white-space: nowrap;
}

.hx-sidetab .bi {
    width: 1rem;
    text-align: center;
}

.hx-sidetab:hover {
    background: var(--hx-raised);
    color: var(--hx-text-strong);
}

.hx-sidetab.active {
    background: color-mix(in srgb, var(--hx-accent) 15%, var(--hx-surface));
    box-shadow: inset 3px 0 0 var(--hx-accent);
    color: var(--hx-text-strong);
    font-weight: 600;
}

.hx-sidetab:focus-visible {
    outline: 2px solid var(--hx-link);
    outline-offset: -2px;
}

/* Something the record's setup is missing, as the roster's red names. */
.hx-sidetab-gap {
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    margin-left: auto;
    border-radius: 50%;
    background: var(--hx-red);
}

.hx-sidetabs-foot {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--hx-border);
}

/* A panel's cards keep their own spacing between them, but not above the first. */
.hx-sidetabs-panel > :first-child {
    margin-top: 0 !important;
}

.hx-sidetabs-panel .hx-form-card {
    max-width: none;
}

@media (max-width: 991.98px) {
    .hx-sidetabs {
        grid-template-columns: minmax(0, 1fr);
    }

    .hx-sidetabs-nav {
        position: static;
    }

    .hx-sidetabs-list {
        flex-direction: row;
        overflow-x: auto;
    }

    .hx-sidetab.active {
        box-shadow: inset 0 -3px 0 var(--hx-accent);
    }

    .hx-sidetab-gap {
        margin-left: 0;
    }
}

/* A card's filters, folded open under its header. */
.hx-filters {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--hx-border);
    background: var(--hx-raised);
}

/* A list with nothing to show. */
.hx-empty {
    margin: 0;
    padding: 1.5rem 1rem;
    color: var(--hx-muted);
}

/* Planning: my65's picked row, a cyan outline on a blue tint; a shorter scroll area so both cards fit. */
.hx-table > tbody > tr.hx-selected > * {
    --bs-table-bg-state: var(--hx-blue-tint);
}

.hx-table > tbody > tr.hx-selected {
    outline: 2px solid var(--hx-teal);
    outline-offset: -2px;
}

/* A cell with a colour of its own keeps it on a picked or hovered row, as my65's do: that's when it's being read. */
.hx-table > tbody > tr > :is(.hx-cell-green, .hx-cell-amber, .hx-cell-red, .hx-cell-blue, .hx-cell-grey) {
    --bs-table-bg-state: var(--bs-table-bg-type);
    --bs-table-color-state: var(--bs-table-color-type);
}

.hx-table tr[data-load],
.hx-table tr[data-truck] {
    cursor: pointer;
}

/* Planning's rows by status, in my65's colours (PlanningRows): a dark tint with bright text. Through the table's own
   variables, so a cell with its own colour (hx-cell-*), a hover and a pick all still win. */
.hx-row-green {
    --bs-table-bg-type: var(--hx-green-tint);
    --bs-table-color-type: var(--hx-green);
}

.hx-row-amber {
    --bs-table-bg-type: var(--hx-amber-tint);
    --bs-table-color-type: var(--hx-amber);
}

.hx-row-red {
    --bs-table-bg-type: var(--hx-red-tint);
    --bs-table-color-type: var(--hx-red);
}

/* my65's truck with nobody seated: an amber edge on a quiet tint, its text left plain. */
.hx-row-unseated {
    --bs-table-bg-type: var(--hx-amber-tint);
}

.hx-row-unseated > :first-child {
    border-left: 3px solid var(--hx-amber);
}

.hx-scroll-short {
    max-height: 40vh;
}

/* Planning's trucks: taller than a short list, so more of the fleet shows at once (my65's was 42rem). */
.hx-scroll.hx-scroll-trucks {
    max-height: 34rem;
}

.hx-ranked {
    margin: 0;
    padding: 0.375rem 1rem;
    border-bottom: 1px solid var(--hx-border);
    background: var(--hx-blue-tint);
    color: var(--hx-blue);
    font-size: 0.8rem;
}

.hx-ranked .bi {
    margin-right: 0.375rem;
}

/* Why the faded trucks can't take the picked load, in amber under the ranking line. */
.hx-ranked-off {
    background: var(--hx-amber-tint);
    color: var(--hx-amber);
}

/* my65's slim bar between the loads and the trucks: Assign, and what's picked. */
.hx-actionbar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.5rem 1rem;
}

.hx-selection {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    font-size: 0.875rem;
}

/* Best fit: the load, then each factor with its points coloured by how well it scores. */
.hx-fit-load {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
    font-size: 0.875rem;
}

.hx-fit-table td {
    vertical-align: top;
}

.hx-fit-max {
    color: var(--hx-dim);
    font-weight: 400;
    text-transform: none;
}

.hx-fit-points {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.hx-fit-points[data-level="good"] {
    color: var(--hx-green);
}

.hx-fit-points[data-level="fair"] {
    color: var(--hx-amber);
}

.hx-fit-points[data-level="poor"] {
    color: var(--hx-red);
}

/* Planning's side columns: the picked order's details beside the unassigned orders, and the picked truck's pre-plan and
   availability beside the trucks. A little narrower than five twelfths, so the main tables keep more columns in view.
   The pre-plan's is narrower still, as the trucks have the most columns, and one set width whether a truck is picked
   or not, so the trucks table never jumps. */
@media (min-width: 1200px) {
    .hx-board-main {
        flex: 1 1 0;
        min-width: 0;
    }

    .hx-board-side {
        flex: 0 0 max(35%, 26rem);
    }

    .hx-board-side.hx-board-plan {
        flex-basis: 30rem;
    }
}

/* The availability's Free from and Truck is at sit side by side while there's room for a date and time, then stack. */
.hx-unit-form {
    container-type: inline-size;
}

@container (max-width: 25rem) {
    .hx-unit-form .col-sm-6 {
        width: 100%;
    }
}

/* The column's cards rise a touch when another truck is picked or let go (planning.js). The column itself stays put.
   Transform and opacity only, so the browser never lays the trucks table out again mid-animation. */
@keyframes hx-side-switch {
    from {
        opacity: 0.35;
        transform: translateY(0.5rem);
    }
}

.hx-board-side.hx-switching > * {
    animation: hx-side-switch 0.22s ease-out backwards;
}

@media (prefers-reduced-motion: reduce) {
    .hx-board-side > * {
        animation: none !important;
    }
}

/* Planning's Order Details: the form fills the card, so its buttons sit at the foot whatever the height. */
.hx-details-form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.hx-details-form > .hx-scroll {
    flex: 1 1 auto;
}

.hx-details-body {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    font-size: 0.8rem;
}

.hx-details-note {
    margin: 0;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    background: var(--hx-grey-tint);
    color: var(--hx-muted);
}

.hx-details-note[data-tone="red"] {
    background: var(--hx-red-tint);
    color: var(--hx-red);
}

.hx-details-facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: 0.375rem 0.75rem;
    margin: 0;
}

.hx-details-wide {
    grid-column: 1 / -1;
}

.hx-details-facts dt {
    color: var(--hx-muted);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.hx-details-facts dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.hx-details-stops {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hx-details-stops > li {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--hx-border);
    border-radius: 0.375rem;
}

.hx-details-stop-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
}

.hx-details-when {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

.hx-details-when > select {
    flex: 0 0 8rem;
    width: 8rem;
}

.hx-details-when > input {
    flex: 1 1 10.5rem;
    width: auto;
    min-width: 0;
}

.hx-details-load {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.5rem;
}

.hx-details-types legend {
    margin-bottom: 0.125rem;
}

.hx-details-comment {
    margin: 0.125rem 0 0;
}

.hx-details-foot {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Planning's pre-plan card stands out from the cards around it: a blue top edge and a tinted header. */
.hx-preplan {
    border-top: 3px solid var(--hx-blue);
}

.hx-preplan > .hx-box-head {
    border-bottom-color: var(--hx-blue-line);
    background: var(--hx-blue-tint);
}

.hx-preplan > .hx-box-head .hx-box-title > .bi {
    color: var(--hx-blue);
}

/* A truck's plan: its trips as cards, the empty moves between them as quiet lines. */
.hx-plan {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.hx-plan-trip {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--hx-border-strong);
    border-left: 4px solid var(--hx-blue);
    border-radius: 0.375rem;
    background: var(--hx-page);
    cursor: pointer;
}

.hx-plan-trip.hx-selected {
    outline: 2px solid var(--hx-teal);
    outline-offset: -2px;
}

/* A trip's status, as the tables' rows show theirs; its text stays plain, as a card has more to read. */
.hx-plan-trip.hx-row-green {
    border-left-color: var(--hx-green);
    background: var(--hx-green-tint);
}

.hx-plan-trip.hx-row-amber {
    border-left-color: var(--hx-amber);
    background: var(--hx-amber-tint);
}

.hx-plan-trip.hx-row-red {
    border-left-color: var(--hx-red);
    background: var(--hx-red-tint);
}

.hx-plan-trip.hx-dragging {
    opacity: 0.5;
}

.hx-plan-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

.hx-plan-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

.hx-plan-empty {
    padding: 0 0.75rem;
    color: var(--hx-muted);
    font-size: 0.8rem;
}

.hx-plan-empty .bi {
    margin-right: 0.25rem;
}

/* The Columns menu. */
.hx-columns-menu {
    min-width: 14rem;
    font-size: 0.875rem;
}

.hx-columns-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.hx-columns-count {
    color: var(--hx-dim);
    font-size: 0.75rem;
}

.hx-badge {
    background: color-mix(in srgb, var(--hx-accent) 15%, var(--hx-surface));
    color: color-mix(in srgb, var(--hx-accent) 70%, var(--hx-text-strong));
    font-weight: 600;
}

/* The Import page's file form. */
.hx-narrow-form {
    max-width: 40rem;
}

.hx-reference {
    font-family: var(--bs-font-monospace);
}

/* Plain pages: sign-in, errors before signing in */

.hx-plain {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.5rem 1rem;
}

.hx-sign {
    width: 100%;
    max-width: 24rem;
    background: var(--hx-surface);
    border: 1px solid var(--hx-border);
    border-radius: 0.75rem;
    padding: 2rem 1.75rem;
}

.hx-sign-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.hx-sign-logo {
    max-height: 64px;
    max-width: 100%;
}

/* Edit forms read best at a comfortable width: a card, not the whole page. */
.hx-form-card {
    max-width: 48rem;
}

/* The location form's map. */
.hx-map {
    height: 20rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

/* Where trucks are (fleet-map.js): Driver Management's fleet map, and the small one on a GPS card. */
.hx-map-fleet {
    height: 32rem;
    border: 0;
    border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
}

.hx-map-small {
    height: 14rem;
}

/* A truck's pin, coloured by how recently it reported, as the status chips are; a trailer's is a small square. */
.hx-pin {
    --hx-tone: var(--hx-grey);
    width: 0.875rem;
    height: 0.875rem;
    border: 2px solid var(--hx-surface);
    border-radius: 50%;
    background: var(--hx-tone);
    box-shadow: 0 0 0 1px var(--hx-border-strong);
    cursor: pointer;
}

.hx-pin[data-tone="green"] {
    --hx-tone: var(--hx-green);
}

.hx-pin[data-tone="amber"] {
    --hx-tone: var(--hx-amber);
}

.hx-pin[data-tone="teal"] {
    --hx-tone: var(--hx-teal);
}

.hx-pin-trailer {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 2px;
}

/* The map's key, in the card's header. */
.hx-legend {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    color: var(--hx-muted);
    font-size: 0.75rem;
}

.hx-legend .hx-pin {
    display: inline-block;
    margin-right: 0.25rem;
    vertical-align: -0.125rem;
    cursor: default;
}

/* A pin's popup. */
.hx-map-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 14rem;
    max-width: 20rem;
    padding: 0.75rem 2rem 0.75rem 0.875rem;
    color: var(--hx-text);
    font-size: 0.875rem;
}

/* Hours left on a GPS card. */
.hx-hours {
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: start;
    gap: 0 1.5rem;
}

.hx-hours dt {
    grid-row: 1;
    color: var(--hx-muted);
    font-size: 0.75rem;
    font-weight: 500;
}

.hx-hours dd {
    grid-row: 2;
    margin: 0;
    font-variant-numeric: tabular-nums;
}

/* The Provider sync card's sections. */
.hx-sync-section + .hx-sync-section {
    border-top: 1px solid var(--hx-border);
}

/* Numbers that line up. */
.hx-figure {
    font-variant-numeric: tabular-nums;
}

/* The order page: sections in cards, the summary beside them on wide screens. */
.hx-subtitle {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.hx-order-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 1rem;
}

.hx-order-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* The header's right side: my65's created and edited stamps, then the buttons. */
.hx-order-side {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

.hx-order-stamps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    color: var(--hx-muted);
    font-size: 0.78rem;
}

.hx-order-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.hx-order-actions .dropdown-item .bi {
    margin-right: 0.5rem;
}

/* On hold or cancelled: the reason, with the way back at the banner's end. */
.hx-order-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

/* my65's empty card: "No equipment", in small grey italics. */
.hx-empty {
    margin: 0;
    color: var(--hx-muted);
    font-size: 0.8rem;
    font-style: italic;
}

/* my65's label-in-the-box fields: the label sits inside the field's border, on its left. */
.hx-boxed > .input-group-text {
    min-width: 6.5rem;
    background: var(--hx-raised);
    border-color: var(--hx-border-strong);
    color: var(--hx-text);
    font-size: 0.78rem;
}

.hx-boxed > .input-group-text:not(:first-child) {
    min-width: 0;
    color: var(--hx-muted);
}

/* A picker in a boxed field fills the rest of the line and joins the label. */
.hx-boxed > .hx-boxed-picker {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

.hx-boxed > .hx-boxed-picker > .form-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -1px;
}

.hx-fuel-type,
.hx-rate-basis {
    flex: 0 1 9rem;
}

/* A figure worked out for you, such as the grand total per ton: it doesn't look like somewhere to type. */
.hx-boxed > .form-control[readonly] {
    background: var(--hx-raised);
    color: var(--hx-muted);
}

/* A reefer's temperature on its trailer type's line: wide enough for -10.5. */
.hx-boxed > .hx-temperature {
    flex: 0 0 5rem;
    width: 5rem;
}

/* The BOL # dialog: one box a line for each order to create. */
.hx-bol-rows {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A fieldset is as wide as its widest child unless told otherwise. */
.hx-order-fields {
    min-width: 0;
}

.hx-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
}

.hx-checks .form-check {
    margin: 0;
}

/* Stops, in driving order. The edge colour says what happens there. */
.hx-stops {
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    container-type: inline-size;
}

.hx-stop.hx-dragging {
    opacity: 0.5;
}

/* my65's stop card: a lighter band at the top, the edge coloured by what happens there. */
.hx-stop-card {
    border: 1px solid var(--hx-border-strong);
    border-left: 4px solid var(--hx-grey);
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--hx-text-strong) 7%, var(--hx-surface)), var(--hx-surface) 3rem);
}

.hx-stop[data-kind="Pickup"] > .hx-stop-card {
    border-left-color: var(--hx-green);
}

.hx-stop[data-kind="Delivery"] > .hx-stop-card {
    border-left-color: var(--hx-blue);
}

.hx-stop[data-kind="SplitDrop"] > .hx-stop-card,
.hx-stop[data-kind="SplitPickup"] > .hx-stop-card {
    border-left-color: var(--hx-amber);
}

.hx-stop-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hx-stop-grip {
    flex: none;
    width: 0.75rem;
    height: 1.5rem;
    cursor: grab;
    background-image: radial-gradient(circle, var(--hx-dim) 1.5px, transparent 1.6px);
    background-size: 6px 6px;
}

.hx-stop-number {
    flex: none;
    min-width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: var(--hx-border);
    font-size: 0.8125rem;
    font-weight: 600;
    display: inline-grid;
    place-items: center;
    font-variant-numeric: tabular-nums;
}

span.hx-stop-kind {
    font-size: 0.875rem;
    font-weight: 600;
}

.hx-stop-head .hx-picker,
.hx-stop-place {
    flex: 1 1 auto;
    min-width: 0;
}

.hx-stop-place {
    font-size: 0.875rem;
}

.hx-stop-tools {
    display: flex;
    gap: 0.25rem;
}

/* my65's three zones in two lines: where, with the address under it; when, with the driver's note; and what happens
   there, with the truck and Split after. The when and what zones keep one width, so the stops line up. */
.hx-stop-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 21.5rem 15.5rem auto;
    gap: 0.375rem 0.75rem;
    align-items: start;
}

.hx-stop-where,
.hx-stop-when,
.hx-stop-what {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

/* One grey line under the picker, lined up with it (past the grip and the number). */
.hx-stop-address {
    margin: 0 0 0 3.25rem;
    overflow: hidden;
    color: var(--hx-muted);
    font-size: 0.75rem;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hx-when-line,
.hx-what-line {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
}

/* A window's close lines up under its open: "to" takes the place of the kind of time, and room is kept for the zone. */
.hx-time-kind,
.hx-when-to {
    flex: 0 0 7.875rem;
}

.hx-when-to {
    padding-right: 0.25rem;
    color: var(--hx-muted);
    font-size: 0.75rem;
    text-align: right;
}

.hx-when-line > .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

.hx-when-line > .hx-zone {
    flex: 0 0 2rem;
}

.hx-when-line[data-time-end] {
    padding-right: 2.375rem;
}

.hx-what-line > .form-select {
    flex: 1 1 auto;
    min-width: 0;
}

.hx-what-line > .hx-stop-kind {
    flex: 0 0 6.75rem;
}

/* Note for the driver and Split after: small grey links until they're wanted. */
.hx-stop-link {
    --bs-btn-color: var(--hx-muted);
    --bs-btn-hover-color: var(--hx-link);
    --bs-btn-active-color: var(--hx-link);
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    --bs-btn-font-size: 0.75rem;
    align-self: flex-start;
    text-decoration: none;
}

.hx-order-fields:disabled .hx-stop-link {
    display: none;
}

/* What a stop needs, under its two lines (docs/stop-documents-plan.md, decision 2). */
.hx-stop-docs {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.375rem;
    padding-top: 0.375rem;
    border-top: 1px solid var(--hx-border);
}

.hx-stop-doc-rows {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.hx-stop-doc {
    display: grid;
    grid-template-columns: 0.75rem minmax(8rem, 11rem) minmax(7rem, 8rem) auto auto minmax(12rem, 1fr) auto;
    gap: 0.5rem;
    align-items: center;
}

.hx-stop-doc [data-doc-emails] {
    grid-column: 6;
}

.hx-stop-doc [data-remove-document] {
    grid-column: 7;
}

.hx-doc-tick {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    font-size: 0.75rem;
}

.hx-doc-tick .form-check-input {
    margin: 0;
}

.hx-doc-note {
    grid-column: 2 / -1;
    font-size: 0.75rem;
}

.hx-order-fields:disabled .hx-stop-doc [data-remove-document],
.hx-order-fields:disabled .hx-stop-doc [data-doc-grip],
.hx-order-fields:disabled .hx-emails-input,
.hx-order-fields:disabled .hx-email-remove {
    display: none;
}

@media (max-width: 767.98px) {
    .hx-stop-doc {
        grid-template-columns: 0.75rem 1fr 1fr auto auto auto;
    }

    .hx-stop-doc [data-doc-emails] {
        grid-column: 2 / -1;
        grid-row: 2;
    }

    .hx-stop-doc [data-remove-document] {
        grid-column: 6;
        grid-row: 1;
    }
}

/* A customer's Required documents: what it needs, and who's emailed each. */
.hx-customer-doc {
    display: grid;
    grid-template-columns: minmax(9rem, 13rem) 5rem minmax(12rem, 1fr);
    gap: 0.5rem;
    align-items: center;
}

/* Several addresses in one field, as chips (Pages/Shared/_EmailChips.cshtml). */
.hx-emails {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    min-height: calc(1.5em + 0.5rem + 2px);
    padding: 0.125rem 0.375rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
    background: var(--bs-body-bg);
    cursor: text;
}

.hx-emails:focus-within {
    border-color: var(--hx-link);
}

.hx-emails-input {
    flex: 1 1 8rem;
    min-width: 6rem;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font-size: 0.8125rem;
}

.hx-email {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0 0.25rem 0 0.5rem;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--hx-blue) 18%, transparent);
    color: var(--hx-text-strong);
    font-size: 0.75rem;
}

.hx-email.is-bad {
    background: color-mix(in srgb, var(--hx-red) 22%, transparent);
}

.hx-email-remove {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    line-height: 1;
}

/* The driver's arrival and departure (stage 7), read-only. */
.hx-stop-done {
    color: var(--hx-muted);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

/* The truck and driver, once there are; nothing before. */
.hx-stop-truck {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    font-size: 0.8rem;
}

.hx-stop-truck:not(:has(*)) {
    display: none;
}

.hx-stop-truck .bi {
    margin-right: 0.375rem;
    color: var(--hx-muted);
}

/* Narrow: where across the top, then when and what side by side, then one under the other. */
@container (max-width: 860px) {
    .hx-stop-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    }

    .hx-stop-where {
        grid-column: 1 / 3;
    }

    .hx-stop-tools {
        grid-column: 3;
        grid-row: 1;
    }

    .hx-stop-when {
        grid-column: 1 / 2;
    }

    .hx-stop-what {
        grid-column: 2 / 4;
    }
}

@container (max-width: 480px) {
    .hx-stop-when,
    .hx-stop-what {
        grid-column: 1 / -1;
    }

    .hx-stop-address {
        margin-left: 0;
    }
}

.hx-line-amount[hidden] {
    display: none !important;
}

.hx-field-miles {
    margin: 0;
}

.hx-field-miles input {
    width: 6rem;
}

/* The leg into a stop, between its card and the one before: my65's grey miles badge with a pencil; amber when typed
   by hand. Where the miles came from is the badge's tooltip. */
.hx-leg {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    padding: 0 0 0.25rem 1.125rem;
    color: var(--hx-muted);
    font-size: 0.8rem;
}

.hx-miles {
    padding: 0.125rem 0.5rem;
    border: 1px solid var(--hx-border-strong);
    border-radius: 0.375rem;
    background: var(--hx-grey-tint);
    color: var(--hx-text-strong);
    font-size: 0.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.hx-miles.typed {
    border-color: var(--hx-amber-line);
    background: var(--hx-amber-tint);
    color: var(--hx-amber);
}

.hx-pencil {
    border: 0;
    background: none;
    padding: 0 0.125rem;
    color: var(--hx-muted);
}

.hx-pencil:hover,
.hx-pencil:focus-visible {
    color: var(--hx-link);
}

.hx-zone {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

.hx-stop-note > .input-group-text {
    background: var(--hx-raised);
    color: var(--hx-muted);
}

/* Pickers: search, then pick. record-picker.js places the list against the screen, wider than most boxes. */
.hx-picker {
    position: relative;
}

.hx-picker-menu {
    position: fixed;
    margin: 0;
    padding: 0.25rem 0.25rem 0;
    overflow-y: auto;
    scroll-padding-bottom: 2rem;
    border-color: var(--hx-border-strong);
    box-shadow: var(--bs-box-shadow-lg);
}

.hx-picker-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 1.5rem;
    margin-bottom: 0.125rem;
    padding: 0.375rem 0.625rem;
    border-radius: var(--bs-border-radius-sm);
    white-space: normal;
}

/* A soft row with an edge, not a block of colour: what's in it stays readable. */
.hx-picker-menu .hx-picker-item.active,
.hx-picker-menu .hx-picker-item:active,
.hx-picker-menu .hx-picker-item:hover {
    background: color-mix(in srgb, var(--hx-link) 16%, transparent);
    color: var(--hx-text);
    box-shadow: inset 3px 0 0 var(--hx-link);
}

.hx-picker-name,
.hx-picker-detail,
.hx-picker-place,
.hx-picker-note {
    display: block;
}

.hx-picker-name {
    color: var(--hx-text-strong);
    font-size: 0.875rem;
    font-weight: 600;
}

.hx-picker-detail,
.hx-picker-note {
    color: var(--hx-muted);
    font-size: 0.75rem;
}

.hx-picker-side {
    text-align: right;
    white-space: nowrap;
}

.hx-picker-place {
    color: var(--hx-text);
    font-size: 0.8125rem;
    font-weight: 500;
}

.hx-picker-match {
    padding: 0;
    background: none;
    color: var(--hx-link);
    font-weight: 700;
}

.hx-picker-add {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.25rem;
    border-radius: var(--bs-border-radius-sm);
}

.hx-picker-hint {
    position: sticky;
    bottom: 0;
    margin: 0 -0.25rem;
    padding: 0.375rem 0.875rem;
    border-top: 1px solid var(--hx-border);
    background: var(--bs-dropdown-bg);
    color: var(--hx-muted);
    font-size: 0.75rem;
}

/* A phone has no room for two columns: where it is goes under the name. */
@media (max-width: 575.98px) {
    .hx-picker-item {
        display: block;
    }

    .hx-picker-side {
        display: block;
        text-align: left;
        white-space: normal;
    }

    .hx-picker-place,
    .hx-picker-note {
        display: inline;
    }

    .hx-picker-note::before {
        content: " \00B7  ";
    }
}

/* Rows: references, equipment and line items. */
.hx-row-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* A row stays on one line in a half-width card on a laptop: the dropdown gives way before anything wraps. */
.hx-reference select {
    flex: 0 1 10rem;
    min-width: 0;
}

.hx-reference-value {
    flex: 1 1 8rem;
    width: auto;
    min-width: 0;
}

.hx-equipment select {
    flex: 1 1 12rem;
    width: auto;
    min-width: 0;
}

.hx-quantity {
    flex: none;
    width: 5rem;
}

.hx-line {
    display: grid;
    grid-template-columns: minmax(9rem, 1.3fr) minmax(8rem, 1fr) minmax(11rem, auto) minmax(8rem, 1fr) minmax(5.5rem, auto) auto;
}

.hx-line-description {
    grid-column: 1 / -2;
}

.hx-line-amount {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.hx-money {
    width: 7rem;
}

.hx-percent {
    width: 6rem;
}

.hx-line-total {
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 767.98px) {
    .hx-line {
        grid-template-columns: 1fr 1fr;
    }

    .hx-line-description {
        grid-column: 1 / -1;
    }
}

/* Adding to a list from its dropdown. */
.hx-add-box {
    margin-top: 0.5rem;
    padding: 0.5rem;
    border: 1px dashed var(--bs-border-color);
    border-radius: 0.375rem;
    background: var(--hx-page);
}

.hx-add-box input {
    max-width: 18rem;
}

/* The order's side stays in view beside a long order: the summary and Save pinned at its top, then who covers it, its
   comments and documents, which scroll by themselves when there's more than fits, so Save never leaves view. */
@media (min-width: 1200px) and (min-height: 640px) {
    .hx-side {
        position: sticky;
        top: calc(74px + 1rem);
        max-height: calc(100vh - 74px - 2rem);
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .hx-side > .hx-summary {
        flex: none;
    }

    .hx-side-more {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }
}

/* Invoicing's ticked loads, above the list: how many, their total, Clear and Send ticked. */
.hx-ticked-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid var(--hx-border);
}

/* A list's tick-box column (Invoicing's bulk send). */
.hx-col-tick {
    width: 2rem;
}

/* Invoicing's rows that open in place (docs/invoice-docs-plan.md, decision 1). The page scrolls rather than the list, so a
   load's details and documents fit on the screen under its row. The arrow turns as it opens. */
.hx-scroll.hx-scroll-rows {
    max-height: none;
}

.hx-col-open {
    width: 2rem;
}

.hx-row-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: 0.25rem;
    background: none;
    color: var(--hx-muted);
}

.hx-row-open:hover,
.hx-row-open:focus-visible {
    color: var(--hx-link);
}

.hx-row-open .bi {
    transition: transform 0.12s ease;
}

.is-open > td > .hx-row-open .bi {
    transform: rotate(90deg);
}

.hx-table tr[data-invoice-row] {
    cursor: pointer;
}

/* The Revisions table: a save's row opens to its changes under it. */
.hx-table tr[data-revision-row="opens"] {
    cursor: pointer;
}

.hx-revision-what {
    min-width: 16rem;
    color: var(--hx-muted);
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

.hx-revision-only {
    margin-left: 0.25rem;
    color: var(--hx-dim);
    font-size: 0.75rem;
}

.hx-revision-only:hover {
    color: var(--hx-link);
}

.hx-revision-details > td {
    padding: 0.5rem 0.75rem 0.75rem 2.25rem;
    background: var(--hx-raised);
}

.hx-revision-changes {
    --bs-table-bg: transparent;
    font-size: 0.8125rem;
}

.hx-revision-changes td {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.hx-table > tbody > tr.is-open > * {
    background: var(--hx-raised);
}

.hx-table > tbody > tr.hx-row-details > td {
    padding: 0;
    background: var(--hx-surface);
    white-space: normal;
}

.hx-row-pane-wait {
    display: flex;
    justify-content: center;
    padding: 2rem;
}

/* The load on the left and its documents on the right, each scrolling on its own, so the file stays in view while the
   details move, as my65's Ratecon scanner keeps the PDF beside the fields. */
.hx-row-pane {
    --hx-pane-height: min(82vh, 60rem);
    display: flex;
    align-items: stretch;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 2px solid var(--hx-border-strong);
}

.hx-row-pane-main {
    flex: 1 1 0;
    min-width: 0;
    max-height: var(--hx-pane-height);
    overflow: auto;
}

.hx-row-pane-actions {
    position: sticky;
    bottom: 0;
    padding-top: 0.5rem;
    background: var(--hx-surface);
}

.hx-wrap-cells .hx-table > :not(caption) > * > * {
    white-space: normal;
}

.hx-docpanel {
    display: flex;
    flex: 0 0 46%;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    height: var(--hx-pane-height);
    padding-left: 1rem;
    border-left: 1px solid var(--hx-border);
}

.hx-docpanel-required,
.hx-docpanel-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

.hx-docpanel-tab {
    padding: 0.125rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    background: none;
}

.hx-docpanel-tab[aria-selected="true"] {
    border-color: var(--hx-accent);
}

.hx-docpanel-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.hx-docpanel-info[hidden] {
    display: none;
}

.hx-docpanel-stage {
    display: flex;
    flex: 1 1 0;
    min-height: 0;
    overflow: auto;
    border: 1px solid var(--hx-border);
    border-radius: 0.375rem;
    background: var(--hx-raised);
}

/* flex: none and margin: auto, as the lightbox's stage: it sits in the middle until it's bigger than the panel. */
.hx-docpanel-stage > * {
    flex: none;
    margin: auto;
}

@media (max-width: 1199.98px) {
    .hx-row-pane {
        flex-direction: column;
    }

    .hx-row-pane-main {
        max-height: none;
    }

    .hx-docpanel {
        flex: none;
        padding-left: 0;
        border-left: 0;
    }
}

/* The Document Designer (docs/invoice-docs-plan.md, decision 9): the rows on the left, the email as it will look on the
   right. Its look inside the frame is the email's own, not the site's. */
.hx-design {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

@media (max-width: 1199.98px) {
    .hx-design {
        grid-template-columns: minmax(0, 1fr);
    }
}

.hx-design-rows {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hx-design-row {
    border: 1px solid var(--hx-border);
    border-radius: 0.375rem;
    background: var(--hx-surface);
}

.hx-design-row.is-dragging {
    opacity: 0.5;
}

.hx-design-row.is-over {
    border-color: var(--hx-accent);
}

.hx-design-row-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid var(--hx-border);
    background: var(--hx-raised);
}

.hx-design-grip {
    color: var(--hx-dim);
    cursor: grab;
}

.hx-design-cells {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 0.5rem;
    padding: 0.5rem;
}

.hx-design-cell {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.hx-design-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.125rem 0.75rem;
    max-height: 10rem;
    overflow: auto;
}

.hx-design-preview {
    position: sticky;
    top: 4.5rem;
}

.hx-design-order {
    width: 7rem;
}

.hx-design-frame {
    display: block;
    width: 100%;
    height: calc(100vh - 13rem);
    min-height: 24rem;
    border: 1px solid var(--hx-border);
    border-radius: 0.375rem;
    background: var(--hx-raised);
}

/* A long message kept to two lines in a list; its title holds the rest. */
.hx-clamp-2 {
    display: -webkit-box;
    max-width: 22rem;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* A driver's photo on Invoicing's preview, small enough to scan a load's paperwork at a glance. */
.hx-thumb {
    display: block;
    width: 8rem;
    height: 6rem;
    object-fit: cover;
    border: 1px solid var(--hx-border);
    border-radius: 0.375rem;
    background: var(--hx-raised);
}

/* An order's documents in the side: a short list rather than a table. */
.hx-docs {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0 0 1rem;
}

.hx-doc {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--hx-border);
}

.hx-doc-name {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* my65's drop box: drop files on it, or click it to choose. */
.hx-drop {
    position: relative;
    display: block;
    margin: 0;
    padding: 0.75rem;
    border: 1px dashed var(--hx-border-strong);
    border-radius: 0.375rem;
    color: var(--hx-muted);
    font-size: 0.8rem;
    text-align: center;
    cursor: pointer;
}

.hx-drop:hover,
.hx-drop:focus-within,
.hx-drop-over {
    border-color: var(--hx-link);
    color: var(--hx-text);
}

.hx-drop-full {
    border-style: solid;
    color: var(--hx-text-strong);
    overflow-wrap: anywhere;
}

.hx-drop-text .bi {
    margin-right: 0.375rem;
}

.hx-drop-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.hx-totals {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.25rem 1rem;
    margin-bottom: 1rem;
}

.hx-totals dt {
    font-weight: 400;
    color: var(--bs-secondary-color);
}

.hx-totals dd {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.hx-totals .hx-grand {
    border-bottom: 1px solid var(--bs-border-color);
    padding-bottom: 0.375rem;
    margin-bottom: 0.125rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--bs-body-color);
}

/* An items line shows only when it holds something; its two cells stay in the totals' grid. */
.hx-totals-row {
    display: contents;
}

.hx-totals-miles {
    margin: 0 0 1rem;
    color: var(--hx-muted);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.6;
}

.hx-uncovered {
    margin: 0.75rem 0 0;
    color: var(--hx-muted);
    font-size: 0.8rem;
}

.hx-uncovered .bi {
    margin-right: 0.375rem;
}

/* A comment box shows its kind and Add button once something's typed in it or it has the focus; a drop box shows its
   kind and Add button once it holds files. */
.hx-compose-more,
.hx-upload-more {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.hx-upload-more > .form-select {
    flex: 1 1 10rem;
    width: auto;
}

.hx-compose:not(:focus-within):has(textarea:placeholder-shown) .hx-compose-more,
.hx-upload:not(:has(.hx-drop-full)) .hx-upload-more {
    display: none;
}

.hx-compose textarea:focus,
.hx-compose textarea:not(:placeholder-shown) {
    min-height: 4.5rem;
}

.hx-comment-text {
    white-space: pre-line;
}

/* What a leg's miles need: typing, or another try at routing. */
.hx-leg-note {
    font-size: 0.75rem;
    color: var(--bs-warning-text-emphasis);
}

.hx-legs-needed {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    color: var(--bs-warning-text-emphasis);
}


/* The order list's search box. */
.hx-search {
    width: 16rem;
}

/* The navbar's search icon, before the avatar (the navbar is always dark). */
.hx-nav-icon {
    background: none;
    border: 0;
    padding: 0.375rem 0.5rem;
    margin-right: 0.5rem;
    border-radius: 6px;
    color: #C9D1D9;
    font-size: 1.25rem;
    line-height: 1;
}

.hx-nav-icon:hover {
    color: #FFFFFF;
}

.hx-nav-icon:focus-visible {
    outline: 2px solid #58A6FF;
    outline-offset: 2px;
}

/* The "/" box (_QuickSearch, quick-search.js): my65's panel at the top over the blurred page. */
.hx-qs {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 4rem 1rem 1rem;
    background: rgba(var(--hx-page-rgb), 0.55);
    backdrop-filter: blur(4px);
}

body.hx-qs-open {
    overflow: hidden;
}

.hx-qs-panel {
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - 6rem);
    display: flex;
    flex-direction: column;
    background: var(--hx-surface);
    border: 1px solid var(--hx-border-strong);
    border-radius: 8px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.hx-qs-head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--hx-border);
    color: var(--hx-muted);
}

.hx-qs-input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--hx-text-strong);
    font-size: 1rem;
}

.hx-qs-input::-webkit-search-cancel-button {
    display: none;
}

.hx-qs-hint {
    margin: 0;
    padding: 0.5rem 1rem;
    color: var(--hx-muted);
    font-size: 0.8125rem;
    border-bottom: 1px solid var(--hx-border);
}

.hx-qs-results {
    overflow-y: auto;
}

.hx-qs-results:empty {
    display: none;
}

.hx-qs-group {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 1rem;
    background: var(--hx-raised);
    color: var(--hx-muted);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.hx-qs-hit {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    color: var(--hx-link);
    text-decoration: none;
    border-top: 1px solid var(--hx-border);
}

.hx-qs-hit.active,
.hx-qs-hit:hover {
    background: rgba(var(--hx-link-rgb), 0.12);
}

.hx-qs-title {
    font-weight: 600;
    white-space: nowrap;
}

.hx-qs-detail {
    color: var(--hx-muted);
    font-size: 0.8125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hx-qs-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--hx-border);
    font-size: 0.8125rem;
}

.hx-qs-foot a {
    text-decoration: none;
}

.hx-qs-keys {
    color: var(--hx-muted);
}

.hx-qs-keys kbd {
    margin: 0 0.125rem;
    padding: 0.0625rem 0.3125rem;
    background: var(--hx-raised);
    color: var(--hx-text);
    border: 1px solid var(--hx-border);
    font-size: 0.6875rem;
}

/* Figures at a glance (_Tiles), as my65's home: label, figure, what it counts. Colour only while not zero. */
.hx-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.75rem;
}

.hx-tile {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    background: var(--hx-raised);
    border: 1px solid var(--hx-border);
    border-radius: 6px;
    color: var(--hx-text);
    text-decoration: none;
}

.hx-tile:hover,
.hx-tile:focus-visible {
    border-color: var(--hx-link);
}

.hx-tile-label {
    color: var(--hx-muted);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.hx-tile-figure {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--hx-dim);
}

.hx-tile[data-tone="amber"] .hx-tile-figure { color: var(--hx-amber); }
.hx-tile[data-tone="red"] .hx-tile-figure { color: var(--hx-red); }
.hx-tile[data-tone="blue"] .hx-tile-figure { color: var(--hx-blue); }
.hx-tile[data-tone="green"] .hx-tile-figure { color: var(--hx-green); }
.hx-tile[data-tone="teal"] .hx-tile-figure { color: var(--hx-teal); }
.hx-tile[data-tone="grey"] .hx-tile-figure { color: var(--hx-text-strong); }

.hx-tile-note {
    color: var(--hx-muted);
    font-size: 0.75rem;
}

/* A home page's head: its title and summary, then when its figures were read and its main buttons. */
.hx-home-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.hx-home-title {
    margin: 0;
    color: var(--hx-text-strong);
    font-size: 1.375rem;
    font-weight: 600;
}

.hx-home-summary {
    margin: 0;
    color: var(--hx-muted);
    font-size: 0.875rem;
}

/* A home page's cards across the top (_FleetCards): a figure, then a thin bar and legend, or its days. */
.hx-fleet {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
}

.hx-fleet-card:hover,
.hx-fleet-card:focus-within {
    border-color: var(--hx-link);
}

.hx-fleet-card .card-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hx-fleet-total {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    color: var(--hx-text-strong);
    text-decoration: none;
}

.hx-fleet-total:hover {
    color: var(--hx-text-strong);
}

.hx-fleet-figure {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
}

.hx-fleet-note {
    color: var(--hx-muted);
    font-size: 0.8125rem;
}

.hx-fleet-card [data-tone="green"] { --hx-tone: var(--hx-green); }
.hx-fleet-card [data-tone="blue"] { --hx-tone: var(--hx-blue); }
.hx-fleet-card [data-tone="amber"] { --hx-tone: var(--hx-amber); }
.hx-fleet-card [data-tone="red"] { --hx-tone: var(--hx-red); }
.hx-fleet-card [data-tone="grey"] { --hx-tone: var(--hx-grey); }
.hx-fleet-card [data-tone="none"] { --hx-tone: var(--hx-border-strong); }

/* Above the card's link, so hovering a part or a day names it. */
.hx-fleet-bar,
.hx-fleet-days {
    position: relative;
    z-index: 2;
}

.hx-fleet-bar {
    display: block;
}

.hx-fleet-track {
    fill: var(--hx-border);
}

/* The stroke in the card's own colour is the 2px gap between parts, and leaves the bar 8px tall. */
.hx-fleet-segment {
    fill: var(--hx-tone);
    stroke: var(--hx-surface);
    stroke-width: 2px;
}

.hx-fleet-parts {
    display: grid;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
}

.hx-fleet-parts li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hx-fleet-parts .hx-dot {
    color: var(--hx-tone);
}

.hx-fleet-part {
    color: var(--hx-muted);
}

.hx-fleet-count {
    margin-left: auto;
    color: var(--hx-text-strong);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.hx-fleet-parts li[data-tone="none"] .hx-fleet-count {
    color: var(--hx-dim);
    font-weight: 400;
}

/* The days: one series, so one colour. */
.hx-fleet-days {
    display: block;
    width: 100%;
    max-width: 22rem;
    margin-top: auto;
}

.hx-fleet-axis {
    stroke: var(--hx-border-strong);
    stroke-width: 1;
}

.hx-fleet-column {
    fill: var(--hx-chart-1);
}

.hx-fleet-value,
.hx-fleet-label {
    text-anchor: middle;
    font-size: 11px;
}

.hx-fleet-value {
    fill: var(--hx-text);
    font-weight: 600;
}

.hx-fleet-label {
    fill: var(--hx-muted);
}

/* A home page's links: wide, in as many columns as fit, each with its menu item's icon. */
.hx-home-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 0.5rem;
    align-content: start;
}

.hx-home-link {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    background: var(--hx-raised);
    border: 1px solid var(--hx-border);
    border-radius: 6px;
    color: var(--hx-text);
    text-decoration: none;
}

.hx-home-link:hover,
.hx-home-link:focus-visible {
    border-color: var(--hx-link);
    color: var(--hx-text);
}

.hx-home-link > .bi {
    color: var(--hx-link);
    font-size: 1.125rem;
    line-height: 1.3;
}

.hx-home-link-name {
    display: block;
    color: var(--hx-text-strong);
    font-size: 0.875rem;
    font-weight: 600;
}

.hx-home-link-summary {
    display: block;
    color: var(--hx-muted);
    font-size: 0.75rem;
    line-height: 1.35;
}

/* Maintenance's Fleet Board: a card per unit, with a red edge while it's down. */
.hx-unit-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.75rem;
}

.hx-unit-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 6.5rem;
    padding: 0.75rem 1rem;
    background: var(--hx-raised);
    border: 1px solid var(--hx-border);
    border-radius: 6px;
}

.hx-unit-card[data-down] {
    border-left: 3px solid var(--hx-red);
}

.hx-unit-card-number {
    font-family: var(--bs-font-monospace);
    font-weight: 700;
    color: var(--hx-text-strong);
}

.hx-qs-foot a i {
    margin-right: 0.375rem;
}

/* The home page's recently viewed orders: the number, then whose. */
[data-recent-orders] a {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

/* A button saving (ui.js): its spinner before its words. */
.hx-busy-spin {
    margin-right: 0.375rem;
    vertical-align: -0.125em;
}

/* The driver portal (Pages/My, _DriverLayout), dark only, as my65's driver dashboard (docs/driver-portal-look-plan.md):
   a black ground, raised cards with depth, a colour for each kind of step, big type read at arm's length, and the tabs
   along the bottom. Its tokens sit on the page's root, so Bootstrap's follow them; /dev/ui shows the pieces in a
   .hx-portal-sample. */
html.hx-portal-root,
.hx-portal-sample {
    --hx-page: #000000;
    --hx-page-rgb: 0, 0, 0;
    --hx-drv-card: #161B22;
    --hx-drv-card-line: #30363D;
    --hx-drv-inset: #0F1418;
    --hx-drv-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
    --hx-drv-label: #8B949E;
    --hx-drv-next: #38BDF8;
    --hx-drv-here: #F59E0B;
    --hx-drv-done: #22C55E;
    --hx-drv-money: #3FB950;
    --hx-drv-warn: #F0B429;
    --hx-drv-stop: #F85149;
    --hx-drv-go: #238636;
    --hx-drv-go-hover: #2EA043;
    --hx-drv-act: #1F6FEB;
    --hx-drv-act-hover: #388BFD;
    --hx-drv-on-accent: #FFFFFF;
    --hx-drv-on-amber: #111111;
    --hx-drv-on-rank: #0E0F11;
    --hx-drv-glow: rgba(34, 197, 94, 0.25);
    /* my65's Active Orders table, taken from it: light rows under a dark head, the dark Order Details row, its solid
       pills and its step buttons, each in my65's own colour. */
    --hx-drv-thead: #212529;
    --hx-drv-thead-line: #4D5154;
    --hx-drv-trow: #F8F9FA;
    --hx-drv-trow-line: #C6C7C8;
    --hx-drv-trow-text: #000000;
    --hx-drv-trow-muted: #646464;
    --hx-drv-trow-link: #0B5ED7;
    --hx-drv-trow-done: rgba(40, 167, 69, 0.15);
    --hx-drv-trow-done-line: #28A745;
    --hx-drv-trow-here: #E7E7E7;
    --hx-drv-trow-here-line: #373737;
    --hx-drv-trow-chev: rgba(0, 0, 0, 0.07);
    --hx-drv-trow-chev-hover: rgba(0, 0, 0, 0.16);
    --hx-drv-trow-chev-open: rgba(13, 110, 253, 0.18);
    --hx-drv-detail: #212529;
    --hx-drv-detail-line: #373737;
    --hx-drv-softline: #E9E2C7;
    --hx-drv-pill-grey: #6C757D;
    --hx-drv-pill-green: #198754;
    --hx-drv-pill-blue: #0D6EFD;
    --hx-drv-pill-teal: #20C997;
    --hx-drv-pill-amber: #FD7E14;
    --hx-drv-pill-red: #DC3545;
    --hx-drv-step-accept: #0D6EFD;
    --hx-drv-step-start: #28A745;
    --hx-drv-step-start-line: #1E7E34;
    --hx-drv-step-first: #17A2B8;
    --hx-drv-step-first-line: #117A8B;
    --hx-drv-step-arrive: #FD7E14;
    --hx-drv-step-arrive-line: #C66110;
    /* A route map: the leg being driven in blue, the ones driven grey. */
    --hx-drv-route: #388BFD;
    --hx-drv-route-done: #6E7681;
    /* The Weekly Pay bars: a step deeper than the money green so they hold on the card; checked for colour blindness. */
    --hx-drv-bar: #2EA043;
    --hx-drv-bar-more: #388BFD;

    /* my65's ranks, Rookie to Legend (the profile card). */
    --hx-rank-1: #CCCCCC;
    --hx-rank-2: #337AB7;
    --hx-rank-3: #5CB85C;
    --hx-rank-4: #F0AD4E;
    --hx-rank-5: #D9534F;
    --hx-rank-6: #6F42C1;
    --hx-rank-7: #FFCC00;
}

/* The pieces on /dev/ui, on the portal's own ground. */
.hx-portal-sample {
    border-radius: 0.75rem;
    background: var(--hx-page);
}

.hx-portal {
    min-height: 100vh;
    padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
    background: var(--hx-page);
}

.hx-portal-top {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 3rem;
    padding: calc(0.375rem + env(safe-area-inset-top, 0px)) 0.75rem 0.375rem;
    border-bottom: 1px solid var(--hx-drv-card-line);
    background: rgba(var(--hx-page-rgb), 0.92);
    backdrop-filter: blur(8px);
}

.hx-portal-top strong {
    color: var(--hx-text-strong);
    font-size: 0.95rem;
}

.hx-portal-logo {
    max-height: 26px;
}

/* Live: green while the phone hears changes as they happen, grey while it catches up. */
.hx-live {
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--hx-dim);
}

.hx-live.on {
    background: var(--hx-drv-done);
    box-shadow: 0 0 0 3px var(--hx-drv-glow);
}

.hx-portal-main {
    max-width: 40rem;
    margin: 0 auto;
    padding: 0.75rem;
}

/* Loads takes a tablet's width, as my65's does, for its Active Orders table. */
.hx-portal-main.is-wide {
    max-width: 64rem;
}

.hx-portal-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    border: 1px solid var(--hx-drv-card-line);
    border-radius: 0.75rem;
    background: var(--hx-drv-card);
    box-shadow: var(--hx-drv-shadow);
}

/* One focus ring for the keyboard across the portal, clear on the dark ground; a hidden input lends it to its label. */
.hx-portal :is(a, button, summary, [tabindex]):focus-visible,
.hx-portal-sample :is(a, button, summary, [tabindex]):focus-visible,
.hx-drv-pick:focus-visible + .hx-drv-tile,
input:focus-visible + :is(.hx-drv-photos, .hx-drv-iconbtn) {
    outline: 2px solid var(--hx-drv-act-hover);
    outline-offset: 2px;
}

.hx-drv-label {
    color: var(--hx-accent, var(--hx-drv-label));
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* A section's heading, as my65's "Active Orders" and "My Completed Orders": centred, its icon in amber. Pages stack their
   parts with gap-3; a heading takes a little more room above it, to start a section. */
.hx-drv-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.5rem 0 0;
    color: var(--hx-text-strong);
    font-size: 1.15rem;
    font-weight: 700;
}

.hx-drv-heading .bi {
    color: var(--hx-drv-warn);
}

.hx-drv-money {
    color: var(--hx-drv-money);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* The one big action, read at arm's length and pressed with a glove on. */
.hx-drv-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 3.5rem;
    padding: 0.5rem 1rem;
    border: 0;
    border-radius: 0.65rem;
    color: var(--hx-drv-on-accent);
    font-size: 1.2rem;
    font-weight: 700;
    text-decoration: none;
}

.hx-drv-btn-act {
    background: var(--hx-drv-act);
}

.hx-drv-btn-act:hover,
.hx-drv-btn-act:focus-visible {
    background: var(--hx-drv-act-hover);
    color: var(--hx-drv-on-accent);
}

/* Every other main button a finger's height. */
.hx-portal .btn:not(.btn-sm) {
    min-height: 3rem;
}

/* Pills read as my65's: small capitals on a tint. */
.hx-portal .hx-chip,
.hx-portal-sample .hx-chip {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hx-portal-tabs {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    display: flex;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-top: 1px solid var(--hx-drv-card-line);
    background: rgba(var(--hx-page-rgb), 0.95);
    backdrop-filter: blur(8px);
}

.hx-portal-tabs a {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    min-height: 3.5rem;
    color: var(--hx-drv-label);
    font-size: 0.72rem;
    font-weight: 600;
    text-decoration: none;
}

.hx-portal-tabs a i {
    font-size: 1.35rem;
}

.hx-portal-tabs a.active {
    color: var(--hx-drv-next);
}

.hx-portal-tabs a.active::before {
    position: absolute;
    top: 0;
    right: 25%;
    left: 25%;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--hx-drv-next);
    content: "";
}

/* A stop's note, and a quiet link (driver portal look plan, step 2). */
.hx-drv-note {
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background: var(--hx-drv-inset);
    color: var(--hx-text);
    overflow-wrap: anywhere;
}

.hx-drv-routemap {
    height: 13rem;
    overflow: hidden;
    border-color: var(--hx-drv-card-line);
    border-radius: 0.625rem;
}

/* In Order Details, under the summary (Active Orders plan). */
.hx-drv-detailbox .hx-drv-routemap {
    margin-top: 0.75rem;
}

/* A stop on the route: its number on its state's colour. */
.hx-routepin {
    --hx-pin-tone: var(--hx-drv-act);
    --hx-pin-text: var(--hx-drv-on-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border: 2px solid var(--hx-drv-on-accent);
    border-radius: 50%;
    background: var(--hx-pin-tone);
    box-shadow: var(--hx-drv-shadow);
    color: var(--hx-pin-text);
    font-size: 0.8rem;
    font-weight: 800;
}

.hx-routepin[data-state="done"] {
    --hx-pin-tone: var(--hx-drv-route-done);
}

.hx-routepin[data-state="here"] {
    --hx-pin-tone: var(--hx-drv-here);
    --hx-pin-text: var(--hx-drv-on-rank);
}

.hx-routepin[data-state="next"] {
    --hx-pin-tone: var(--hx-drv-next);
    --hx-pin-text: var(--hx-drv-on-rank);
}

/* The profile card (my65's _DriverProfile): the rank's colour on the border, the avatar's ring, the badge and the dial. */
.rank-1 {
    --hx-rank: var(--hx-rank-1);
}

/* Pro and Master take white on their badge: the dark text is too faint on them. */
.rank-2 {
    --hx-rank: var(--hx-rank-2);
    --hx-rank-on: var(--hx-drv-on-accent);
}

.rank-3 {
    --hx-rank: var(--hx-rank-3);
}

.rank-4 {
    --hx-rank: var(--hx-rank-4);
}

.rank-5 {
    --hx-rank: var(--hx-rank-5);
}

.rank-6 {
    --hx-rank: var(--hx-rank-6);
    --hx-rank-on: var(--hx-drv-on-accent);
}

.rank-7 {
    --hx-rank: var(--hx-rank-7);
}

.hx-drv-profile {
    gap: 0.75rem;
    border: 2px solid var(--hx-rank);
    border-radius: 0.875rem;
}

.hx-drv-avatar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border: 3px solid var(--hx-rank);
    border-radius: 50%;
    background: var(--hx-drv-inset);
    color: var(--hx-text-strong);
    font-size: 1.4rem;
    font-weight: 700;
}

.hx-drv-name {
    color: var(--hx-text-strong);
    font-size: 1.15rem;
}

.hx-drv-rank {
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--hx-rank);
    color: var(--hx-rank-on, var(--hx-drv-on-rank));
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hx-drv-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--hx-drv-card-line);
    border-radius: 0.625rem;
    background: var(--hx-drv-inset);
    color: var(--hx-text);
    font-size: 0.85rem;
}

.hx-drv-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--hx-rank);
}

.hx-drv-gauge {
    flex-shrink: 0;
    width: 5.5rem;
}

.hx-drv-gauge path {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
}

.hx-drv-gauge .track {
    stroke: var(--hx-drv-card-line);
}

.hx-drv-gauge .fill {
    stroke: var(--hx-rank);
}

.hx-drv-gauge .needle {
    stroke: var(--hx-text-strong);
    stroke-width: 2.5;
    stroke-linecap: round;
}

.hx-drv-gauge .hub {
    fill: var(--hx-text-strong);
}

.hx-drv-payline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.375rem 1rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--hx-drv-card-line);
    border-radius: 0.625rem;
    background: var(--hx-drv-inset);
    font-size: 0.875rem;
}

.hx-drv-payline .bi {
    margin-right: 0.375rem;
    color: var(--hx-drv-money);
}

.hx-drv-payline .bi-trophy-fill {
    color: var(--hx-drv-warn);
}

.hx-drv-payline .hx-drv-label {
    margin-right: 0.375rem;
    font-size: 0.7rem;
}

/* Active Orders, as my65's (_DriversActiveOrdersTable): one tight row a load under a dark head, its status cell opening the
   dark Order Details row beneath. The row's colours are variables, so a phone's card swaps them for the dark ones. */
.hx-drv-tabletitle {
    margin: 0.25rem 0 0;
    color: var(--hx-text-strong);
    font-size: 1.25rem;
    font-weight: 500;
    text-align: center;
}

.hx-drv-table {
    --hx-tr-bg: var(--hx-drv-trow);
    --hx-tr-text: var(--hx-drv-trow-text);
    --hx-tr-muted: var(--hx-drv-trow-muted);
    --hx-tr-line: var(--hx-drv-trow-line);
    --hx-tr-link: var(--hx-drv-trow-link);
    --hx-tr-done: var(--hx-drv-trow-done);
    --hx-tr-here: var(--hx-drv-trow-here);
    --hx-tr-chev: var(--hx-drv-trow-chev);
    width: 100%;
    border-collapse: collapse;
    color: var(--hx-tr-text);
    box-shadow: var(--hx-drv-shadow);
}

.hx-drv-table th {
    padding: 0.5rem;
    border: 1px solid var(--hx-drv-thead-line);
    background: var(--hx-drv-thead);
    color: var(--hx-drv-on-accent);
    font-weight: 700;
    text-align: left;
}

.hx-drv-table td {
    padding: 0.5rem;
    border: 1px solid var(--hx-tr-line);
    background: var(--hx-tr-bg);
    vertical-align: middle;
}

.hx-drv-table .hx-drv-cell-status {
    width: 7rem;
    text-align: center;
}

.hx-drv-table .hx-drv-cell-action {
    width: 30%;
    text-align: center;
}

/* The head reads left to right, as my65's. */
.hx-drv-table th.hx-drv-cell-status,
.hx-drv-table th.hx-drv-cell-action {
    text-align: left;
}

.hx-drv-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.hx-drv-table .hx-drv-orderno {
    color: var(--hx-tr-link);
    font-weight: 700;
}

.hx-drv-order-word {
    display: none;
}

.hx-drv-splitside {
    color: var(--hx-tr-muted);
    font-size: 0.75rem;
}

.hx-drv-chevbox {
    display: inline-flex;
    margin-top: 0.25rem;
    padding: 0.35rem 0.55rem;
    border-radius: 0.375rem;
    background: var(--hx-tr-chev);
    line-height: 1;
    transition: background-color 0.15s ease;
}

.hx-drv-chevbox .bi {
    font-size: 1.15rem;
    transition: transform 0.15s ease;
}

.hx-drv-toggle:hover .hx-drv-chevbox {
    background: var(--hx-drv-trow-chev-hover);
}

.hx-drv-toggle[aria-expanded="true"] .hx-drv-chevbox {
    background: var(--hx-drv-trow-chev-open);
}

.hx-drv-toggle[aria-expanded="true"] .bi-chevron-right {
    transform: rotate(90deg);
}

/* The progress pill, solid as my65's badge, in its colours. */
.hx-portal .hx-drv-table .hx-chip,
.hx-portal-sample .hx-drv-table .hx-chip {
    padding: 0.25rem 0.5rem;
    border: 0;
    border-radius: 0.375rem;
    background: var(--hx-pill, var(--hx-drv-pill-grey));
    color: var(--hx-drv-on-accent);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.hx-drv-table .hx-chip .hx-dot {
    display: none;
}

.hx-drv-table .hx-chip[data-tone="green"] {
    --hx-pill: var(--hx-drv-pill-green);
}

.hx-drv-table .hx-chip[data-tone="blue"] {
    --hx-pill: var(--hx-drv-pill-blue);
}

.hx-drv-table .hx-chip[data-tone="teal"] {
    --hx-pill: var(--hx-drv-pill-teal);
}

.hx-drv-table .hx-chip[data-tone="amber"] {
    --hx-pill: var(--hx-drv-pill-amber);
}

.hx-drv-table .hx-chip[data-tone="red"] {
    --hx-pill: var(--hx-drv-pill-red);
}

/* Stops in small type: the ones left edged green, the one the driver's at edged dark on grey; each window on the right. */
.hx-drv-tstops {
    margin: 0;
    padding: 0;
    font-size: 0.8rem;
    list-style: none;
}

.hx-drv-tstops li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.125rem 0.25rem;
    border-left: 3px solid transparent;
}

.hx-drv-tstops li + li {
    margin-top: 0.25rem;
}

.hx-drv-tstops li.done {
    border-left-color: var(--hx-drv-trow-done-line);
    background: var(--hx-tr-done);
}

.hx-drv-tstops li.here {
    border-left-color: var(--hx-drv-trow-here-line);
    border-radius: 0.25rem;
    background: var(--hx-tr-here);
}

.hx-drv-tstop-main {
    min-width: 0;
}

.hx-drv-tstop-place {
    display: block;
    margin-left: 1.25em;
    font-size: 0.9em;
}

.hx-drv-tstop-when {
    flex-shrink: 0;
    color: var(--hx-tr-muted, var(--hx-text));
    font-size: 0.85em;
    line-height: 1.35;
    text-align: right;
    white-space: nowrap;
}

.hx-drv-tstop-when .bi {
    margin-right: 0.25rem;
}

.hx-drv-needs {
    margin-left: 0.25rem;
    color: var(--hx-drv-step-arrive);
    font-size: 0.85em;
}

.hx-drv-needs.is-met {
    color: var(--hx-drv-trow-done-line);
}

/* The next tap, row-sized, in my65's colour for the step; the dashed edge is leaving a stop. */
.hx-drv-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.375rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--hx-step-line, var(--hx-step));
    border-radius: 0.375rem;
    background: var(--hx-step);
    color: var(--hx-drv-on-accent);
    font-size: 1rem;
    line-height: 1.5;
    cursor: pointer;
}

.hx-drv-step:disabled {
    opacity: 0.65;
}

.hx-drv-step.is-accept {
    --hx-step: var(--hx-drv-step-accept);
}

.hx-drv-step.is-start,
.hx-drv-step.is-depart {
    --hx-step: var(--hx-drv-step-start);
    --hx-step-line: var(--hx-drv-step-start-line);
}

.hx-drv-step.is-depart {
    border-style: dashed;
}

.hx-drv-step.is-arrive-first {
    --hx-step: var(--hx-drv-step-first);
    --hx-step-line: var(--hx-drv-step-first-line);
}

.hx-drv-step.is-arrive {
    --hx-step: var(--hx-drv-step-arrive);
    --hx-step-line: var(--hx-drv-step-arrive-line);
}

.hx-drv-step.is-fix {
    --hx-step: var(--hx-drv-pill-red);
}

/* Stop Requirements stands in for the status while a stop has documents due (user, 1 Nov 2026, as my65's Required Items). */
.hx-drv-step.is-requirements {
    --hx-step: var(--hx-amber);
    gap: 0.25rem;
    color: var(--hx-drv-on-amber);
}

.hx-drv-step[hidden],
.hx-drv-btn[hidden] {
    display: none;
}

/* A row of Stop Requirements: done in green, the one to do in blue, one sent back in amber, and the rest waiting their turn. */
.hx-drv-req {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--hx-border-strong);
    border-radius: 0.375rem;
}

.hx-drv-req.is-active {
    border: 2px solid var(--hx-blue);
}

.hx-drv-req.is-done {
    border-color: var(--hx-green);
    background: color-mix(in srgb, var(--hx-green) 10%, transparent);
}

.hx-drv-req.is-flagged {
    border: 2px solid var(--hx-amber);
}

.hx-drv-req.is-locked {
    opacity: 0.45;
}

.hx-drv-req.is-locked [data-req-pick] {
    pointer-events: none;
}

.hx-drv-req-lock {
    display: none;
}

.hx-drv-req.is-locked .hx-drv-req-lock {
    display: inline;
}

.hx-drv-req-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hx-drv-req-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background: var(--hx-raised);
    font-size: 0.75rem;
    font-weight: 600;
}

.hx-drv-req-flag {
    padding: 0.375rem 0.5rem;
    border-radius: 0.25rem;
    background: color-mix(in srgb, var(--hx-amber) 16%, transparent);
}

.hx-drv-req-picked {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

.hx-drv-req-picked img {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.25rem;
    object-fit: cover;
}

/* A dialog's stops: the one the next tap is about marked, and those already left quieter. */
.hx-drv-stoplist {
    padding-left: 0;
    list-style: none;
}

.hx-drv-stoplist li.is-current {
    padding-left: 0.5rem;
    border-left: 3px solid var(--hx-amber);
}

.hx-drv-stoplist li.is-done {
    opacity: 0.6;
}

.hx-drv-rowaction {
    align-items: center;
}

.hx-drv-rowaction details {
    align-self: stretch;
    color: var(--hx-tr-muted);
    text-align: left;
}

/* Start waits while another of the driver's loads is under way: one load at a time (user, 1 Nov 2026). */
.hx-drv-waits {
    color: var(--hx-drv-label);
    text-align: center;
}

/* Accept / Reject (user, 1 Nov 2026, as my65's): the load on the left, its route on the right; stacked on a phone. */
.hx-drv-accept .hx-drv-routemap {
    height: 24rem;
}

.hx-drv-accept .hx-drv-orderno {
    font-size: 1.1rem;
    font-weight: 700;
}

.hx-drv-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.125rem 0.6rem;
    border: 1px solid var(--hx-drv-card-line);
    border-radius: 999px;
}

@media (max-width: 991.98px) {
    .hx-drv-accept .hx-drv-routemap {
        height: 16rem;
    }
}

/* Order Details: my65's dark row under its load. */
.hx-drv-table .hx-drv-details > td {
    border-color: var(--hx-drv-thead-line);
    background: var(--hx-drv-detail);
    color: var(--hx-text);
}

.hx-drv-detailbox {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--hx-drv-detail-line);
    border-radius: 0.5rem;
    font-size: 0.9rem;
    text-align: left;
}

.hx-drv-detailhead {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.hx-drv-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem 0.75rem;
}

.hx-drv-summary-item {
    display: flex;
    gap: 0.5rem;
    line-height: 1.2;
}

.hx-drv-summary-label,
.hx-drv-dmuted {
    color: var(--hx-drv-label);
}

.hx-drv-summary-value {
    font-weight: 500;
    overflow-wrap: anywhere;
}

.hx-drv-softhr {
    margin: 0.25rem 0;
    border: 0;
    border-top: 1px dashed var(--hx-drv-softline);
    opacity: 0.5;
}

.hx-drv-detailtitle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.25rem;
    color: var(--hx-text-strong);
    font-size: 1rem;
    font-weight: 500;
}

.hx-drv-dlist {
    margin: 0;
    padding-left: 1.25rem;
}

.hx-drv-dlist li + li {
    margin-top: 0.25rem;
}

.hx-drv-details .hx-drv-tstop-when {
    color: var(--hx-text);
}

.hx-drv-docstop {
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--hx-drv-card-line);
    border-radius: 0.5rem;
}

/* Phones: each row stacks into my65's dark card, its tap the card's width. */
@media (max-width: 575.98px) {
    .hx-drv-table {
        --hx-tr-bg: var(--hx-drv-card);
        --hx-tr-text: var(--hx-text);
        --hx-tr-muted: var(--hx-drv-label);
        --hx-tr-line: var(--hx-drv-card-line);
        --hx-tr-link: var(--hx-text-strong);
        --hx-tr-here: var(--hx-drv-inset);
        --hx-tr-chev: transparent;
        box-shadow: none;
    }

    .hx-drv-table,
    .hx-drv-table tbody,
    .hx-drv-table tr,
    .hx-drv-table td {
        display: block;
        width: 100%;
    }

    .hx-drv-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .hx-drv-table tr.hx-drv-load {
        margin-top: 0.75rem;
        padding: 0.75rem;
        border: 1px solid var(--hx-tr-line);
        border-radius: 0.75rem;
        background: var(--hx-tr-bg);
        box-shadow: var(--hx-drv-shadow);
    }

    .hx-drv-table tr.hx-drv-load:first-child {
        margin-top: 0;
    }

    .hx-drv-table tr.hx-drv-details {
        margin-top: 0.25rem;
        overflow: hidden;
        border-radius: 0.75rem;
    }

    .hx-drv-table td {
        padding: 0;
        border: 0;
        background: transparent;
    }

    .hx-drv-table .hx-drv-cell-status,
    .hx-drv-table .hx-drv-cell-action {
        width: 100%;
        text-align: left;
    }

    .hx-drv-toggle {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        column-gap: 0.5rem;
    }

    .hx-drv-order-word {
        display: inline;
    }

    .hx-drv-chevbox {
        margin: 0 0 0 auto;
        color: var(--hx-drv-act-hover);
    }

    .hx-drv-chevbox .bi {
        font-size: 1.6rem;
    }

    .hx-drv-cell-stops {
        margin-top: 0.5rem;
    }

    .hx-drv-cell-action {
        margin-top: 0.75rem;
    }

    .hx-drv-rowaction {
        align-items: stretch;
    }

    .hx-drv-cell-action .hx-drv-step {
        width: 100%;
    }

    .hx-drv-summary {
        grid-template-columns: 1fr;
    }
}

/* The Pay tab (driver portal look plan, step 3): my65's Weekly Pay chart, and My Completed Orders as a card a week. */
.hx-drv-linkcard {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    color: inherit;
    text-decoration: none;
}

.hx-drv-linkcard > .bi:first-child {
    color: var(--hx-drv-warn);
    font-size: 1.35rem;
}

.hx-drv-linkcard:hover {
    border-color: var(--hx-drv-act);
    color: inherit;
}

.hx-drv-cardhead {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--hx-text-strong);
    font-size: 1rem;
    font-weight: 700;
}

.hx-drv-cardhead .bi {
    color: var(--hx-drv-warn);
}

.hx-drv-chart {
    display: block;
    width: 100%;
    max-width: 30rem;
    height: auto;
    margin: 0 auto;
}

.hx-drv-chart .axis {
    stroke: var(--hx-drv-card-line);
    stroke-width: 1;
}

.hx-drv-chart .hit {
    fill: transparent;
}

.hx-drv-chart g:hover .hit {
    fill: var(--hx-drv-inset);
}

.hx-drv-chart .paid {
    fill: var(--hx-drv-bar);
}

.hx-drv-chart .more {
    fill: var(--hx-drv-bar-more);
}

.hx-drv-chart text {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    text-anchor: middle;
}

.hx-drv-chart .value {
    fill: var(--hx-text);
    font-weight: 600;
}

.hx-drv-chart .day {
    fill: var(--hx-drv-label);
}

.hx-drv-chart .now .day {
    fill: var(--hx-text-strong);
    font-weight: 700;
}

.hx-drv-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 1rem;
}

.hx-drv-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.hx-drv-legend i {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 2px;
}

.hx-drv-legend .paid {
    background: var(--hx-drv-bar);
}

.hx-drv-legend .more {
    background: var(--hx-drv-bar-more);
}


/* The months, newest first, in a row that scrolls sideways on a phone. */
.hx-drv-months {
    display: flex;
    gap: 0.5rem;
    padding-bottom: 0.25rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.hx-drv-months a {
    flex: none;
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--hx-drv-card-line);
    border-radius: 999px;
    background: var(--hx-drv-card);
    color: var(--hx-text);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.hx-drv-months a.active {
    border-color: var(--hx-drv-act);
    background: var(--hx-drv-act);
    color: var(--hx-drv-on-accent);
}

/* A week: its head opens it (a native details, so the keyboard and screen readers work without script). */
.hx-drv-week {
    overflow: hidden;
    border: 1px solid var(--hx-drv-card-line);
    border-radius: 0.75rem;
    background: var(--hx-drv-card);
    box-shadow: var(--hx-drv-shadow);
}

.hx-drv-row {
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: var(--hx-text);
    list-style: none;
    cursor: pointer;
}

.hx-drv-row::-webkit-details-marker {
    display: none;
}

/* A week clips its corners, so its rows' focus ring goes inside. */
.hx-portal .hx-drv-row:focus-visible,
.hx-portal .hx-drv-payload:focus-visible {
    outline-offset: -2px;
}

.hx-drv-chev {
    color: var(--hx-drv-label);
    transition: transform 0.15s ease;
}

.hx-drv-week[open] > summary .hx-drv-chev {
    transform: rotate(90deg);
    color: var(--hx-text-strong);
}

.hx-drv-main {
    min-width: 0;
}

.hx-drv-rowtitle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    color: var(--hx-text-strong);
    font-weight: 700;
}

.hx-drv-weekicon {
    margin-right: 0.375rem;
    color: var(--hx-drv-warn);
}

.hx-drv-sub {
    display: block;
    margin-top: 0.125rem;
    color: var(--hx-drv-label);
    font-size: 0.8rem;
}

.hx-drv-figs {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.3;
    text-align: right;
    white-space: nowrap;
}

.hx-drv-paid {
    color: var(--hx-drv-money);
    font-size: 1.1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.hx-drv-paidmeta {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--hx-drv-label);
    font-size: 0.75rem;
}

.hx-drv-projected {
    color: var(--hx-drv-here);
    font-size: 0.85rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.hx-drv-weekbody {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem 1rem 0.25rem;
    border-top: 1px solid var(--hx-drv-card-line);
}

/* A week's pay, both ways: only the week picks a side, so only its card is green and outlines that side. */
.hx-drv-paycard {
    padding: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--hx-drv-money) 35%, transparent);
    border-radius: 0.625rem;
    background: color-mix(in srgb, var(--hx-drv-money) 7%, var(--hx-drv-card));
    font-size: 0.85rem;
}

.hx-drv-payhead {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    color: var(--hx-text-strong);
    font-weight: 700;
}

.hx-drv-payhead .bi,
.hx-drv-sidetitle .bi {
    color: var(--hx-drv-money);
}

.hx-drv-sides {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.5rem;
}

.hx-drv-side {
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--hx-drv-card-line);
    border-radius: 0.5rem;
    background: var(--hx-drv-inset);
}

.hx-drv-side.won {
    border-color: var(--hx-drv-money);
}

.hx-drv-sidetitle {
    margin-bottom: 0.25rem;
    color: var(--hx-drv-label);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hx-drv-side.won .hx-drv-sidetitle {
    color: var(--hx-drv-money);
}

.hx-drv-sideline {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

.hx-drv-sideline > span {
    color: var(--hx-drv-label);
}

.hx-drv-sideline > strong {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.hx-drv-sideline.total {
    margin-top: 0.25rem;
    padding-top: 0.25rem;
    border-top: 1px solid var(--hx-drv-card-line);
}

.hx-drv-payfoot {
    margin-top: 0.5rem;
    color: var(--hx-drv-label);
}

.hx-drv-paytable {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.hx-drv-paytable th,
.hx-drv-paytable td {
    padding: 0.3rem 0.4rem;
    border-bottom: 1px solid var(--hx-drv-card-line);
    text-align: right;
    white-space: nowrap;
}

.hx-drv-paytable th[scope="row"] {
    font-weight: 600;
    text-align: left;
    white-space: normal;
}

.hx-drv-paytable th[scope="row"] span {
    display: block;
    color: var(--hx-drv-label);
    font-size: 0.72rem;
    font-weight: 400;
}

.hx-drv-paytable thead th {
    color: var(--hx-drv-label);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hx-drv-paytable tr.total > * {
    border-bottom: 0;
    font-weight: 700;
}

/* A week's loads: each opens its page. Empty moves have none. */
.hx-drv-payloads {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hx-drv-payload {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 1rem;
    align-items: center;
    width: 100%;
    column-gap: 0.75rem;
    padding: 0.625rem 0;
    border: 0;
    border-top: 1px solid var(--hx-drv-card-line);
    background: transparent;
    color: var(--hx-text);
    text-align: left;
}

button.hx-drv-payload:hover .hx-drv-chev {
    color: var(--hx-drv-act-hover);
}

button.hx-drv-payload[aria-expanded="true"] .hx-drv-chev {
    transform: rotate(90deg);
    color: var(--hx-text-strong);
}

.hx-drv-paydetails {
    margin-bottom: 0.625rem;
    border-radius: 0.5rem;
    background: var(--hx-drv-detail);
}

.hx-drv-orderno {
    color: var(--hx-drv-act-hover);
}

.hx-drv-route {
    display: block;
    overflow: hidden;
    color: var(--hx-drv-label);
    font-size: 0.8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hx-drv-fig {
    display: block;
    color: var(--hx-drv-label);
    font-size: 0.78rem;
    text-align: right;
    white-space: nowrap;
}

.hx-drv-fig > b {
    color: var(--hx-text-strong);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

@media (hover: hover) {
    .hx-drv-row:hover {
        background: var(--hx-drv-inset);
    }
}

/* Requests, Reimbursements and Chat (driver portal look plan, step 4). Each request kind has its own colour: its tile,
   its form's edge, and its icon on the list. */
.hx-kind-late {
    --hx-kind: var(--hx-drv-here);
}

.hx-kind-breakdown {
    --hx-kind: var(--hx-drv-stop);
}

.hx-kind-home {
    --hx-kind: var(--hx-drv-done);
}

.hx-kind-other {
    --hx-kind: var(--hx-drv-next);
}

/* my65's big tiles: radios, so the keyboard and screen readers pick one as a list; the pick shows its form. */
.hx-drv-tiles {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.hx-drv-pick {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.hx-drv-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 6.5rem;
    margin: 0;
    padding: 0.875rem 0.5rem;
    border: 1px solid var(--hx-drv-card-line);
    border-radius: 0.875rem;
    background: var(--hx-drv-card);
    box-shadow: var(--hx-drv-shadow);
    color: var(--hx-text-strong);
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.1s ease;
}

.hx-drv-tile .bi,
.hx-drv-kindicon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--hx-kind) 16%, transparent);
    color: var(--hx-kind);
    font-size: 1.35rem;
}

.hx-drv-tile:active {
    transform: scale(0.98);
}

.hx-drv-pick:checked + .hx-drv-tile {
    border-color: var(--hx-kind);
    background: color-mix(in srgb, var(--hx-kind) 10%, var(--hx-drv-card));
}

/* A form: big fields for a thumb, labels above them. */
.hx-drv-form {
    gap: 0.875rem;
}

.hx-drv-form .form-label {
    margin-bottom: 0.25rem;
    color: var(--hx-drv-label);
    font-size: 0.85rem;
    font-weight: 600;
}

.hx-drv-form .form-control,
.hx-drv-form .form-select,
.hx-drv-form .input-group-text {
    min-height: 2.75rem;
}

.hx-drv-ask {
    border-left: 6px solid var(--hx-kind);
}

.hx-drv-asktitle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--hx-text-strong);
    font-size: 1.1rem;
    font-weight: 700;
}

.hx-drv-asktitle .bi {
    color: var(--hx-kind);
}

/* Where :has works, only the picked kind's form shows; elsewhere all four do, one under another. */
@supports selector(:has(*)) {
    .hx-drv-ask {
        display: none;
    }

    .hx-drv-asks:has(#ask-late:checked) .hx-drv-ask[data-ask="late"],
    .hx-drv-asks:has(#ask-breakdown:checked) .hx-drv-ask[data-ask="breakdown"],
    .hx-drv-asks:has(#ask-home:checked) .hx-drv-ask[data-ask="home"],
    .hx-drv-asks:has(#ask-other:checked) .hx-drv-ask[data-ask="other"] {
        display: flex;
    }
}

.hx-drv-photos {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
    padding: 0.75rem 0.875rem;
    border: 1px dashed var(--hx-drv-card-line);
    border-radius: 0.75rem;
    background: var(--hx-drv-inset);
    cursor: pointer;
}

.hx-drv-photos > .bi {
    color: var(--hx-kind, var(--hx-drv-next));
    font-size: 1.25rem;
}

/* A request or a reimbursement on its list: its icon, then what it is and how it was answered. */
.hx-drv-request {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.875rem;
}

.hx-drv-kindicon {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.15rem;
}

.hx-drv-receipt {
    --hx-kind: var(--hx-drv-money);
}

.hx-drv-answer {
    padding: 0.5rem 0.625rem;
    border-left: 3px solid var(--hx-drv-act);
    border-radius: 0.375rem;
    background: var(--hx-drv-inset);
    font-size: 0.875rem;
}

.hx-drv-answer .bi {
    margin-right: 0.375rem;
    color: var(--hx-drv-act-hover);
}

.hx-drv-back {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    align-self: flex-start;
    color: var(--hx-drv-next);
    font-weight: 600;
    text-decoration: none;
}

.hx-drv-thumbs summary {
    color: var(--hx-drv-next);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.hx-drv-thumbs img {
    width: 5rem;
    height: 5rem;
    border: 1px solid var(--hx-drv-card-line);
    border-radius: 0.375rem;
    object-fit: cover;
}

.hx-drv-file {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    max-width: 100%;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--hx-drv-card-line);
    border-radius: 999px;
    background: var(--hx-drv-inset);
    color: var(--hx-text);
    font-size: 0.8rem;
    text-decoration: none;
}

.hx-drv-file span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The portal's chat: theirs dark on the left, ours in blue on the right, a request edged in amber; the thread fills the
   screen above a one-line composer. */
html.hx-portal-root .hx-chat {
    min-height: 12rem;
    max-height: calc(100dvh - 15rem);
}

html.hx-portal-root .hx-chat-bubble,
.hx-portal-sample .hx-chat-bubble {
    border-color: var(--hx-drv-card-line);
    border-radius: 1rem 1rem 1rem 0.25rem;
    background: var(--hx-drv-inset);
    color: var(--hx-text);
}

html.hx-portal-root .hx-chat-line.ours .hx-chat-bubble,
.hx-portal-sample .hx-chat-line.ours .hx-chat-bubble {
    border-color: var(--hx-drv-act);
    border-radius: 1rem 1rem 0.25rem 1rem;
    background: var(--hx-drv-act);
    color: var(--hx-drv-on-accent);
}

html.hx-portal-root .hx-chat-line.ours .hx-chat-bubble a,
.hx-portal-sample .hx-chat-line.ours .hx-chat-bubble a {
    color: var(--hx-drv-on-accent);
}

html.hx-portal-root .hx-chat-line .hx-chat-bubble.request,
.hx-portal-sample .hx-chat-line .hx-chat-bubble.request {
    border-color: var(--hx-drv-card-line);
    border-left: 4px solid var(--hx-drv-here);
    background: var(--hx-drv-card);
    color: var(--hx-text);
}

html.hx-portal-root .hx-chat-kind,
.hx-portal-sample .hx-chat-kind {
    color: var(--hx-drv-here);
}

.hx-drv-composer {
    gap: 0.25rem;
    padding: 0.5rem;
}

.hx-drv-composer [data-chat-file-name]:empty {
    display: none;
}

.hx-drv-composer textarea {
    min-height: 2.75rem;
    padding: 0.6rem 1rem;
    border-radius: 1.375rem;
    resize: none;
}

.hx-drv-iconbtn {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: var(--hx-drv-inset);
    color: var(--hx-text);
    font-size: 1.2rem;
    cursor: pointer;
}

.hx-drv-send {
    background: var(--hx-drv-act);
    color: var(--hx-drv-on-accent);
}

.hx-drv-send:hover {
    background: var(--hx-drv-act-hover);
}

/* Live updates (driver portal look plan, step 5): what changed while the driver was busy waits under this. */
.hx-drv-updated {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--hx-drv-warn) 45%, transparent);
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--hx-drv-warn) 12%, var(--hx-drv-card));
    color: var(--hx-text-strong);
    font-size: 0.9rem;
}

.hx-drv-updated > .bi {
    color: var(--hx-drv-warn);
}

/* Chat (stage 7 plan, decision 4): one thread per driver. Ours on the right, theirs on the left. */
.hx-chat {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 60vh;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.hx-chat-line {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.hx-chat-line.ours {
    align-items: flex-end;
}

.hx-chat-bubble {
    max-width: 85%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--hx-border);
    border-radius: var(--bs-border-radius-lg);
    background: var(--hx-raised);
    overflow-wrap: anywhere;
}

.hx-chat-line.ours .hx-chat-bubble {
    border-color: var(--hx-blue-line);
    background: var(--hx-blue-tint);
}

.hx-chat-bubble.request {
    border-color: var(--hx-amber-line);
    background: var(--hx-amber-tint);
}

.hx-chat-text {
    white-space: pre-wrap;
}

.hx-chat-meta {
    margin-top: 0.125rem;
    color: var(--hx-muted);
    font-size: 0.75rem;
}

.hx-chat-kind {
    color: var(--hx-amber);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* A photo shows itself in the thread, a request's included; it opens full size, in the lightbox. */
.hx-chat-photo {
    display: block;
}

.hx-chat-photo img {
    display: block;
    width: 14rem;
    max-width: 100%;
    max-height: 16rem;
    border-radius: 0.5rem;
    object-fit: cover;
}

/* Driver Management, my65's board (docs/driver-management-plan.md): team tabs, then one compact row per driver. */
.hx-board-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1.25rem;
    padding: 0.25rem 1rem 0;
    border-bottom: 1px solid var(--hx-border);
}

.hx-board-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.125rem;
    border-bottom: 2px solid transparent;
    color: var(--hx-muted);
    font-size: 0.85rem;
    text-decoration: none;
}

.hx-board-tab:hover,
.hx-board-tab:focus-visible {
    color: var(--hx-text-strong);
}

.hx-board-tab.active {
    border-bottom-color: var(--hx-link);
    color: var(--hx-text-strong);
    font-weight: 600;
}

.hx-board-tab.active .hx-count {
    background: var(--hx-link);
    color: var(--hx-page);
}

.hx-board-managers {
    margin: 0;
    padding: 0.375rem 1rem 0;
    color: var(--hx-muted);
    font-size: 0.78rem;
}

.hx-board-managers .bi {
    margin-right: 0.375rem;
}

.hx-board td {
    white-space: nowrap;
}

.hx-board-last {
    font-weight: 600;
}

/* my65's red name: the driver's setup isn't finished; the tooltip says what's missing. */
.hx-unfinished,
.hx-unfinished a {
    color: var(--hx-red);
}

/* my65's count badges: P.P. and Equip. Blue for planned work, red when a load was rejected. */
.hx-badge {
    display: inline-block;
    min-width: 1.6rem;
    padding: 0.05rem 0.4rem;
    border: 1px solid var(--hx-border-strong);
    border-radius: 0.3rem;
    background: var(--hx-grey-tint);
    color: var(--hx-text);
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.hx-badge-blue {
    border-color: var(--hx-blue-line);
    background: var(--hx-blue-tint);
    color: var(--hx-blue);
}

.hx-badge-red {
    border-color: var(--hx-red-line);
    background: var(--hx-red-tint);
    color: var(--hx-red);
}

/* Msgs: "unread from them / unread by them / requests not answered". Not .hx-msgs: that's the whole Messages page. */
.hx-board-msgs {
    color: var(--hx-dim);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.hx-board-msgs-unread {
    color: var(--hx-red);
    font-weight: 700;
}

.hx-board-msgs-unseen {
    color: var(--hx-amber);
    font-weight: 700;
}

.hx-board-msgs-requests {
    color: var(--hx-blue);
    font-weight: 700;
}

/* A row picks its driver (user, 1 Nov 2026, as my65's): the map shows only their truck, their details beside it. */
.hx-board tr[data-driver] {
    cursor: pointer;
}

/* The map's chip while a driver is picked: their name, and a click shows every truck again. */
.hx-map-scope {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.625rem;
    border: 1px solid var(--hx-blue-line);
    border-radius: 999px;
    background: var(--hx-blue-tint);
    color: var(--hx-blue);
    font-size: 0.8rem;
    font-weight: 600;
}

.hx-map-scope[hidden] {
    display: none;
}

.hx-driver-facts {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.375rem 1rem;
}

.hx-driver-facts dt {
    color: var(--hx-muted);
    font-weight: 500;
}

.hx-driver-facts dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* The P.P. dialog: the pre-plan's orders, each with its stops, dragged into a new order (as my65's Pre-assigned Orders). */
.hx-pp-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hx-pp-trip {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--hx-border-strong);
    border-left: 4px solid var(--hx-blue);
    border-radius: 0.375rem;
    background: var(--hx-page);
}

.hx-pp-trip[draggable="true"] {
    cursor: grab;
}

.hx-pp-trip.hx-dragging {
    opacity: 0.5;
}

.hx-pp-trip.is-underway {
    border-left-color: var(--hx-border-strong);
    opacity: 0.7;
}

.hx-pp-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

.hx-pp-seq {
    min-width: 2.25rem;
    padding: 0 0.375rem;
    border: 1px solid var(--hx-blue-line);
    border-radius: 0.375rem;
    background: var(--hx-blue-tint);
    color: var(--hx-blue);
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.is-underway .hx-pp-seq {
    border-style: dashed;
    border-color: var(--hx-border-strong);
    background: transparent;
    color: var(--hx-muted);
}

.hx-pp-stops {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0.25rem 0 0;
    padding: 0;
    list-style: none;
}

.hx-pp-stops > li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.25rem;
    border-top: 1px dashed var(--hx-border);
}

.hx-pp-stop {
    min-width: 0;
}

.hx-pp-when {
    flex: none;
    color: var(--hx-muted);
    text-align: right;
    white-space: nowrap;
}

.hx-gps {
    color: var(--hx-muted);
}

.hx-gps .bi {
    margin-right: 0.25rem;
}

.hx-gps-dark {
    color: var(--hx-amber);
}

.hx-missing {
    color: var(--hx-red);
    text-decoration: none;
}

/* The comment, set in place: my65's italic callout, with "Add" on the row someone's pointing at. */
.hx-board-note {
    max-width: 16rem;
}

.hx-note {
    display: block;
    width: 100%;
    min-height: 1.25rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--hx-text);
    font-style: italic;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hx-note:empty::after {
    content: "Add";
    color: var(--hx-dim);
    font-style: normal;
    opacity: 0;
}

tr:hover .hx-note:empty::after,
.hx-note:focus-visible:empty::after {
    opacity: 1;
}

.hx-note-input {
    min-width: 14rem;
}

.hx-hide {
    padding: 0;
    color: var(--hx-dim);
}

.hx-hide:hover,
.hx-hide:focus-visible {
    color: var(--hx-text-strong);
}

/* A shorter scrolling list inside a card, such as QuickBooks' first-sync preview: its button stays in reach. */
.hx-scroll.hx-scroll-short {
    max-height: 22rem;
}

/* The lightbox (lightbox.js): a file over the page, never a new tab. Always dark, as my65's, so photos and pages stand
   out; the dialog carries data-bs-theme="dark", so the tokens inside it are the dark ones. */
html.hx-lightbox-open {
    overflow: hidden;
}

.hx-lightbox {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--hx-text);
    background: rgba(var(--hx-page-rgb), 0.97);
}

.hx-lightbox[open] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.hx-lightbox::backdrop {
    background: transparent;
}

.hx-lightbox-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: max(0.5rem, env(safe-area-inset-top)) 0.75rem 0.5rem;
    background: var(--hx-surface);
    border-bottom: 1px solid var(--hx-border);
}

.hx-lightbox-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--hx-text-strong);
}

/* The bar's buttons all one size, and a thumb's on a touch screen. */
.hx-lightbox-bar .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    min-height: 2.25rem;
}

@media (pointer: coarse) {
    .hx-lightbox-bar .btn {
        min-width: 2.75rem;
        min-height: 2.75rem;
    }
}

/* On a phone the name has its own row, and the counts and buttons share the next, the buttons to the right. */
.hx-lightbox-bar .btn-group {
    margin-left: auto;
}

@media (max-width: 575.98px) {
    .hx-lightbox-bar {
        flex-wrap: wrap;
        row-gap: 0.25rem;
    }

    .hx-lightbox-name {
        flex-basis: 100%;
    }
}

.hx-lightbox-meta {
    font-size: 0.8125rem;
    color: var(--hx-muted);
    white-space: nowrap;
}

/* The browser scrolls a zoomed file; pinching is lightbox.js's. Whatever's inside sits in the middle until it's bigger
   than the screen (margin: auto, which never cuts off the top or left the way centring would). */
.hx-lightbox-stage {
    display: flex;
    overflow: auto;
    overscroll-behavior: contain;
    touch-action: pan-x pan-y;
}

/* flex: none, or a zoomed photo would shrink back to its own size (a flex item's smallest). */
.hx-lightbox-stage > * {
    flex: none;
    margin: auto;
}

.hx-lightbox-img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.hx-lightbox-img.is-zoomed {
    max-width: none;
    max-height: none;
}

.hx-lightbox-pages {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
}

.hx-lightbox-page {
    flex: none;
    background: var(--hx-raised);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}

.hx-lightbox-page canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.hx-lightbox-problem {
    max-width: 26rem;
    padding: 2rem 1rem;
    text-align: center;
}

.hx-lightbox-problem > .bi {
    font-size: 3rem;
    color: var(--hx-dim);
}

/* Previous and Next, over the file's edges, big enough for a thumb. */
.hx-lightbox-step {
    position: absolute;
    top: 50%;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--hx-text-strong);
    background: rgba(var(--hx-surface-rgb), 0.8);
    border: 1px solid var(--hx-border-strong);
    border-radius: 50%;
}

.hx-lightbox-step:hover,
.hx-lightbox-step:focus-visible {
    border-color: var(--hx-link);
}

.hx-lightbox-prev {
    left: 0.75rem;
}

.hx-lightbox-next {
    right: 0.75rem;
}

/* Messages (docs/messages-redo-plan.md): the column of chats, drivers and teams, and the open one beside it, each
   scrolling on its own inside the window. messages.js measures where the page starts (--hx-msgs-top). */
.hx-msgs {
    display: grid;
    grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr);
    height: calc(100dvh - var(--hx-msgs-top, 9.5rem) - 1rem);
    min-height: 26rem;
    border: 1px solid var(--hx-border);
    border-radius: var(--bs-border-radius-lg);
    background: var(--hx-surface);
    overflow: hidden;
}

.hx-msgs[aria-busy="true"] {
    cursor: progress;
}

.hx-msgs-list {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid var(--hx-border);
}

.hx-msgs-listhead {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem 0.625rem;
    border-bottom: 1px solid var(--hx-border);
}

.hx-msgs-tabs {
    display: flex;
    gap: 0.25rem;
}

.hx-msgs-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.375rem 0.5rem;
    border-radius: var(--bs-border-radius);
    color: var(--hx-muted);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

.hx-msgs-tab:hover,
.hx-msgs-tab.active {
    color: var(--hx-text-strong);
    background: var(--hx-raised);
}

.hx-msgs-tab.active {
    box-shadow: inset 0 -2px 0 var(--hx-accent);
}

.hx-msgs-search {
    position: relative;
}

.hx-msgs-search > .bi {
    position: absolute;
    top: 50%;
    left: 0.625rem;
    transform: translateY(-50%);
    color: var(--hx-dim);
    pointer-events: none;
}

.hx-msgs-search .form-control {
    padding-left: 2rem;
}

.hx-chips.hx-msgs-filters {
    border-bottom: 0;
}

.hx-msgs-rows {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* A row: initials, the name and truck, the time; under them the latest message, a request waiting, the unread count.
   Unread rows are bold; the open one has a quiet tint and a coloured edge. */
.hx-msgs-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--hx-border);
    border-left: 3px solid transparent;
    color: var(--hx-text);
    text-decoration: none;
}

.hx-msgs-row:hover {
    background: var(--hx-raised);
    color: var(--hx-text);
}

.hx-msgs-row.active {
    background: rgba(var(--hx-link-rgb), 0.12);
    border-left-color: var(--hx-link);
}

.hx-msgs-row.muted {
    opacity: 0.6;
}

.hx-msgs-row-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.hx-msgs-row-top,
.hx-msgs-row-bottom {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
}

.hx-msgs-row-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--hx-text-strong);
    font-weight: 600;
}

.hx-msgs-row-unit {
    color: var(--hx-dim);
    font-size: 0.75rem;
    white-space: nowrap;
}

.hx-msgs-row-time {
    margin-left: auto;
    color: var(--hx-muted);
    font-size: 0.75rem;
    white-space: nowrap;
}

.hx-msgs-row-preview {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--hx-muted);
    font-size: 0.8125rem;
}

.hx-msgs-row-preview .bi {
    margin-right: 0.25rem;
}

.hx-msgs-row-who {
    margin-right: 0.25rem;
    color: var(--hx-dim);
}

.hx-msgs-row.unread .hx-msgs-row-name,
.hx-msgs-row.unread .hx-msgs-row-preview {
    color: var(--hx-text-strong);
    font-weight: 700;
}

.hx-msgs-row.unread .hx-msgs-row-time {
    color: var(--hx-link);
    font-weight: 700;
}

.hx-msgs-badge {
    flex: none;
    min-width: 1.25rem;
    padding: 0 0.375rem;
    border-radius: 999px;
    background: var(--hx-accent);
    color: var(--hx-accent-text);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.25rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Drivers by team: each team's name stays at the top while its drivers scroll under it. */
.hx-msgs-section {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-bottom: 1px solid var(--hx-border);
    background: var(--hx-raised);
    color: var(--hx-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* A driver's initials, in the same tone wherever they show. */
.hx-initials {
    --hx-tone: var(--hx-grey);
    --hx-tone-tint: var(--hx-grey-tint);
    --hx-tone-line: var(--hx-grey-line);
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--hx-tone-line);
    border-radius: 50%;
    background: var(--hx-tone-tint);
    color: var(--hx-tone);
    font-size: 0.875rem;
    font-weight: 700;
}

.hx-initials-lg {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1rem;
}

.hx-initials[data-tone="green"] {
    --hx-tone: var(--hx-green);
    --hx-tone-tint: var(--hx-green-tint);
    --hx-tone-line: var(--hx-green-line);
}

.hx-initials[data-tone="amber"] {
    --hx-tone: var(--hx-amber);
    --hx-tone-tint: var(--hx-amber-tint);
    --hx-tone-line: var(--hx-amber-line);
}

.hx-initials[data-tone="red"] {
    --hx-tone: var(--hx-red);
    --hx-tone-tint: var(--hx-red-tint);
    --hx-tone-line: var(--hx-red-line);
}

.hx-initials[data-tone="blue"] {
    --hx-tone: var(--hx-blue);
    --hx-tone-tint: var(--hx-blue-tint);
    --hx-tone-line: var(--hx-blue-line);
}

.hx-initials[data-tone="teal"] {
    --hx-tone: var(--hx-teal);
    --hx-tone-tint: var(--hx-teal-tint);
    --hx-tone-line: var(--hx-teal-line);
}

/* The open thread or team: who it is, the messages filling the rest, and the box at the bottom. */
.hx-msgs-pane,
.hx-msgs-panebody {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.hx-msgs-panebody {
    flex: 1;
}

.hx-msgs-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--hx-border);
}

.hx-msgs-who {
    flex: 1;
    min-width: 0;
}

.hx-msgs-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--hx-text-strong);
    font-size: 1.0625rem;
    font-weight: 700;
}

.hx-msgs-name a {
    color: inherit;
    text-decoration: none;
}

.hx-msgs-name a:hover {
    text-decoration: underline;
}

.hx-msgs-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.125rem 0.875rem;
    color: var(--hx-muted);
    font-size: 0.8125rem;
}

.hx-msgs-facts a {
    color: var(--hx-link);
    text-decoration: none;
}

.hx-msgs-facts a:hover {
    text-decoration: underline;
}

.hx-msgs-back {
    display: none;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    color: var(--hx-text);
    text-decoration: none;
}

.hx-msgs-back:hover {
    background: var(--hx-raised);
}

.hx-msgs-lines {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0 1rem;
}

.hx-msgs-lines > .hx-chat {
    flex: 1;
    max-height: none;
    padding: 1rem 0;
}

.hx-msgs-none {
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--hx-muted);
}

.hx-msgs-none > .bi {
    color: var(--hx-dim);
    font-size: 2.5rem;
}

/* A thread's day dividers, Load older, and a request card's Decline. */
.hx-chat-day {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--hx-dim);
    font-size: 0.75rem;
    font-weight: 600;
}

.hx-chat-day::before,
.hx-chat-day::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--hx-border);
}

.hx-chat-older {
    align-self: center;
}

.hx-chat-decline > summary {
    list-style: none;
}

.hx-chat-decline > summary::-webkit-details-marker {
    display: none;
}

/* The office's message box (_ChatCompose): a paperclip, a box that grows, Send; the picked file as a chip above. */
.hx-compose {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.hx-msgs-pane .hx-compose {
    padding: 0.625rem 1rem 0.75rem;
    border-top: 1px solid var(--hx-border);
}

.hx-compose-row {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

.hx-compose-row textarea {
    flex: 1;
    min-height: 2.375rem;
    max-height: 10rem;
    resize: none;
}

.hx-compose-attach,
.hx-compose-send {
    flex: none;
}

.hx-compose input[type="file"]:focus-visible + .hx-compose-attach {
    box-shadow: 0 0 0 0.25rem rgba(var(--hx-link-rgb), 0.25);
}

.hx-compose-file:not([hidden]) {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    align-self: flex-start;
    max-width: 100%;
    padding: 0.25rem 0.5rem 0.25rem 0.625rem;
    border: 1px solid var(--hx-border-strong);
    border-radius: 999px;
    background: var(--hx-raised);
    font-size: 0.8125rem;
}

.hx-compose-file .btn-close {
    flex: none;
    font-size: 0.5rem;
}

.hx-compose-hint {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--hx-dim);
    font-size: 0.75rem;
}

/* A phone or a narrow window: the list or the open one, with a back arrow between them. */
@media (max-width: 991.98px) {
    .hx-msgs {
        grid-template-columns: minmax(0, 1fr);
    }

    .hx-msgs-list {
        border-right: 0;
    }

    .hx-msgs.has-pane .hx-msgs-list,
    .hx-msgs:not(.has-pane) .hx-msgs-pane {
        display: none;
    }

    .hx-msgs-back {
        display: inline-flex;
    }
}

/* A phone: the name opens the driver's page, so its button goes. */
@media (max-width: 575.98px) {
    .hx-msgs-driverpage {
        display: none;
    }

    .hx-msgs-head {
        align-items: flex-start;
    }
}

/* --- Meters ------------------------------------------------------------------------------------------
   A <progress> in Hixby's colours, for the GPS provider page's first sync (docs/gps-first-sync-plan.md). Blue while it
   goes, green or red once done; one with no value is a list whose length isn't known yet, and shows a moving stripe. */
.hx-meter {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 100%;
    height: .375rem;
    border: 0;
    border-radius: 999px;
    background: var(--hx-raised);
    color: var(--hx-blue);
    overflow: hidden;
}

.hx-meter-lg {
    height: .625rem;
}

.hx-meter::-webkit-progress-bar {
    background: var(--hx-raised);
    border-radius: 999px;
}

.hx-meter::-webkit-progress-value {
    background: var(--hx-blue);
    border-radius: 999px;
    transition: width .4s ease;
}

.hx-meter::-moz-progress-bar {
    background: var(--hx-blue);
    border-radius: 999px;
}

.hx-meter[data-tone="green"]::-webkit-progress-value {
    background: var(--hx-green);
}

.hx-meter[data-tone="green"]::-moz-progress-bar {
    background: var(--hx-green);
}

.hx-meter[data-tone="red"]::-webkit-progress-value {
    background: var(--hx-red);
}

.hx-meter[data-tone="red"]::-moz-progress-bar {
    background: var(--hx-red);
}

.hx-meter:indeterminate {
    background: linear-gradient(90deg, var(--hx-raised) 0%, var(--hx-blue) 50%, var(--hx-raised) 100%) 0 0 / 50% 100% repeat-x var(--hx-raised);
    animation: hx-meter-move 1.2s linear infinite;
}

.hx-meter:indeterminate::-webkit-progress-bar {
    background: transparent;
}

.hx-meter:indeterminate::-moz-progress-bar {
    background: transparent;
}

@keyframes hx-meter-move {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 200% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hx-meter:indeterminate {
        animation: none;
    }
}

/* Reports (docs/reports-plan.md): the library's tiles, a report's head, filter row and figures, and its charts. */
.hx-library > * + * {
    margin-top: 1rem;
}

.hx-library-find {
    position: relative;
    max-width: 22rem;
}

.hx-library-find > .bi {
    position: absolute;
    top: 50%;
    left: 0.6rem;
    transform: translateY(-50%);
    color: var(--hx-muted);
    font-size: 0.8rem;
}

.hx-library-find > .form-control {
    padding-left: 1.8rem;
}

.hx-report-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 0.75rem;
}

.hx-report-tile {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.75rem 1rem;
    background: var(--hx-raised);
    border: 1px solid var(--hx-border);
    border-radius: 6px;
    color: var(--hx-text);
    text-decoration: none;
}

.hx-report-tile:hover,
.hx-report-tile:focus-visible {
    border-color: var(--hx-link);
    color: var(--hx-text);
}

.hx-report-tile-name {
    color: var(--hx-text-strong);
    font-weight: 600;
}

/* A favourite's star (B2). */
.hx-report-star {
    margin-left: 0.3rem;
    color: var(--hx-amber);
    font-size: 0.8em;
}

.hx-report-tile-figure {
    color: var(--hx-text-strong);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
}

.hx-report-tile-label,
.hx-report-tile-about {
    color: var(--hx-muted);
    font-size: 0.75rem;
}

.hx-report-tile-label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

/* A figure's change: an arrow and its size, green the good way, red the bad, grey when neither is better. */
.hx-change {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    color: var(--hx-muted);
    font-weight: 600;
    white-space: nowrap;
}

.hx-change[data-verdict="good"] {
    color: var(--hx-green);
}

.hx-change[data-verdict="bad"] {
    color: var(--hx-red);
}

.hx-report-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
}

.hx-report-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--hx-text-strong);
    font-size: 1.25rem;
    font-weight: 600;
}

.hx-report-about {
    margin: 0.15rem 0 0;
    color: var(--hx-muted);
    font-size: 0.85rem;
}

.hx-report-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-left: auto;
}

/* The one filter row, above everything it scopes: dates first. */
.hx-report-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-bottom: 1rem;
    padding: 0.6rem 1rem;
    background: var(--hx-surface);
    border: 1px solid var(--hx-border);
    border-radius: 6px;
}

.hx-report-filter,
.hx-report-custom {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.hx-report-filter .form-select,
.hx-report-custom .form-control {
    width: auto;
}

.hx-report-body > * + * {
    margin-top: 1rem;
}

/* While a choice reads, the body stays as it was, dimmed: no blank and no jump. */
.hx-report-body.is-loading {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.15s;
}

.hx-report-when {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.85rem;
}

.hx-figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.75rem;
}

/* A report's figure, as a tile. Not .hx-figure: that's the table cells' lined-up numbers. */
.hx-figure-tile {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    background: var(--hx-surface);
    border: 1px solid var(--hx-border);
    border-radius: 6px;
}

.hx-figure-label {
    color: var(--hx-muted);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.hx-figure-value {
    color: var(--hx-text-strong);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
}

.hx-figure-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    min-height: 1.2em;
    color: var(--hx-muted);
    font-size: 0.75rem;
}

.hx-num {
    font-variant-numeric: tabular-nums;
}

/* Charts: marks in the series tokens, thin, round only at the data end; hairline grid and muted axis text. */
.hx-s1 {
    --hx-series: var(--hx-chart-1);
}

.hx-s2 {
    --hx-series: var(--hx-chart-2);
}

.hx-s3 {
    --hx-series: var(--hx-chart-3);
}

.hx-s4 {
    --hx-series: var(--hx-chart-4);
}

/* Other: everything past the top ones, in the de-emphasis grey, because it isn't one thing. */
.hx-rest {
    --hx-series: var(--hx-dim);
}

.hx-chart {
    min-height: 4rem;
}

.hx-chart-svg {
    display: block;
    max-width: 100%;
    height: auto;
    overflow: visible;
}

.hx-chart-svg .hx-grid {
    stroke: var(--hx-border);
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.hx-chart-svg .hx-tick {
    fill: var(--hx-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.hx-chart-svg .hit {
    fill: transparent;
}

.hx-chart-svg .hit:focus-visible {
    outline: none;
    stroke: var(--hx-link);
    stroke-width: 1;
}

.hx-col path {
    fill: var(--hx-series);
    transition: filter 0.15s, opacity 0.15s;
}

.hx-col.is-link {
    cursor: pointer;
}

.hx-col:hover path,
.hx-col:focus-visible path {
    filter: brightness(1.18);
}

.hx-col:focus-visible {
    outline: none;
}

.hx-col:focus-visible .hit {
    stroke: var(--hx-link);
}

.hx-chart-svg.has-selected .hx-col:not(.is-selected) path {
    opacity: 0.35;
}

.hx-line {
    fill: none;
    stroke: var(--hx-series);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.hx-area {
    fill: var(--hx-series);
    opacity: 0.1;
}

.hx-dot {
    fill: var(--hx-series);
    stroke: var(--hx-surface);
    stroke-width: 2;
}

.hx-cross {
    stroke: var(--hx-border-strong);
    stroke-width: 1;
}

.hx-hbars {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hx-hbar {
    display: grid;
    grid-template-columns: minmax(6rem, 14rem) minmax(0, 1fr) minmax(4.5rem, auto);
    align-items: center;
    gap: 0.75rem;
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    color: var(--hx-text);
    font-size: 0.8rem;
    text-decoration: none;
}

a.hx-hbar:hover,
.hx-hbar:focus-visible {
    background: var(--hx-raised);
    color: var(--hx-text-strong);
}

.hx-hbar-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hx-hbar-track {
    display: block;
    height: 14px;
}

.hx-hbar-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 0 4px 4px 0;
    background: var(--hx-series);
    transition: width 0.65s cubic-bezier(0.22, 0.7, 0.2, 1), opacity 0.15s;
}

.hx-hbar:hover .hx-hbar-fill,
.hx-hbar:focus-visible .hx-hbar-fill {
    filter: brightness(1.18);
}

.hx-hbars.has-selected .hx-hbar:not(.is-selected) .hx-hbar-fill {
    opacity: 0.35;
}

.hx-hbar-value {
    color: var(--hx-text-strong);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.hx-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    margin-bottom: 0.5rem;
    color: var(--hx-muted);
    font-size: 0.75rem;
}

.hx-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.hx-legend-box {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--hx-series);
}

.hx-legend-line {
    width: 14px;
    height: 2px;
    border-radius: 1px;
    background: var(--hx-series);
}

.hx-chart-note {
    margin: 0.5rem 0 0;
    color: var(--hx-muted);
    font-size: 0.75rem;
}

.hx-chart-tip {
    position: fixed;
    z-index: 1080;
    min-width: 6rem;
    padding: 0.4rem 0.6rem;
    background: var(--hx-surface);
    border: 1px solid var(--hx-border-strong);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(var(--hx-page-rgb), 0.45);
    color: var(--hx-text);
    font-size: 0.78rem;
    pointer-events: none;
}

.hx-tip-label {
    margin-bottom: 0.15rem;
    color: var(--hx-muted);
}

.hx-tip-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.hx-tip-row strong {
    color: var(--hx-text-strong);
    font-variant-numeric: tabular-nums;
}

.hx-tip-name {
    color: var(--hx-muted);
}

.hx-tip-key {
    width: 12px;
    height: 2px;
    background: var(--hx-series);
}

@media (prefers-reduced-motion: reduce) {
    .hx-hbar-fill,
    .hx-report-body.is-loading {
        transition: none;
    }
}

/* A printed report: what it covers, its figures, chart and table, without the buttons. */
@media print {
    .hx-report-tools,
    .hx-report-body .hx-columns,
    .hx-report-body .hx-pager-size,
    .hx-report-body .hx-pager-nav {
        display: none !important;
    }
}

/* Import from Ratecon (docs/ratecon-import-plan.md): the fields beside the PDF, each scrolling on its own, as my65's; the PDF only
   where there's room for both. A field the import couldn't fill stays amber until someone does. */
.hx-ratecon-dialog {
    max-width: min(1700px, 96vw);
}

.hx-ratecon-dialog .modal-content {
    height: 100%;
}

.hx-ratecon-body {
    display: flex;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

.hx-ratecon-main {
    flex: 1 1 0;
    min-width: 0;
    padding: 1rem;
    overflow-y: auto;
}

.hx-ratecon-pdf {
    display: none;
    flex: 1 1 0;
    min-width: 0;
    overflow: auto;
    border-left: 1px solid var(--hx-border);
    background: var(--hx-page);
}

@media (min-width: 1200px) {
    .hx-ratecon-pdf {
        display: block;
    }
}

.hx-ratecon-part + .hx-ratecon-part {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--hx-border);
}

.hx-ratecon-read {
    margin-top: 0.25rem;
    color: var(--hx-muted);
    font-size: 0.8125rem;
    white-space: pre-line;
}

.hx-ratecon-read .hx-chip {
    margin-right: 0.375rem;
}

.hx-ratecon-read:empty,
.hx-ratecon-others:empty {
    display: none;
}

.hx-ratecon-others {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    margin-top: 0.25rem;
    color: var(--hx-muted);
    font-size: 0.8125rem;
}

.hx-ratecon-stops,
.hx-ratecon-references {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hx-ratecon-stop {
    padding: 0.75rem;
    border: 1px solid var(--hx-border);
    border-radius: 0.5rem;
}

.hx-ratecon-stop-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hx-ratecon-reference {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto auto;
    align-items: center;
    gap: 0.5rem;
}

.hx-ratecon-reference .hx-ratecon-read {
    grid-column: 1 / -1;
    margin-top: 0;
}

.hx-ratecon-also {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.125rem 0.75rem;
    margin: 0;
    font-size: 0.8125rem;
}

.hx-ratecon-also dt {
    font-weight: 600;
}

.hx-ratecon-also dd {
    margin: 0;
}

.hx-fill-in,
.hx-fill-in:focus {
    border-color: var(--hx-amber);
    box-shadow: 0 0 0 1px var(--hx-amber);
}