/* Customer pages migrated from the legacy site (CustomerLayout only), in the new TAILORBLEND look: white navbar, dark
   footer, white page, tables in a white 8px card. Values come from the designs and the TAILORBLEND Design System, whose
   tokens are in design-tokens.css. The cart pop-up is still styled by the legacy stylesheets in css/legacy. */

:root {
    /* Teal fills that carry text: buttons, selected chips and tabs, count badges. Kirsten's #5BBFB3 with white text, as
       her designs decided (Glen, 6 November 2026), though white on it is only 2.2:1; the accessible teal,
       --tb-teal-accessible, gives 5.2:1. To change every one of them, change these two lines. */
    --tb-teal-fill: var(--tb-teal-ui);
    --tb-teal-fill-text: #FFFFFF;

    /* This site's older names for design system values. */
    --tb-teal-ink: var(--tb-teal-accessible);
    --tb-ink: var(--slate-900);
    --tb-ink-soft: var(--slate-700);
    --tb-ink-muted: var(--slate-600);
    --tb-ink-faint: var(--slate-500);
    --tb-line: var(--slate-200);
    --tb-line-soft: var(--slate-100);
    --tb-line-strong: var(--slate-300);
    --tb-page: var(--tb-bg-muted);
    /* The small uppercase labels above headings and footer links. */
    --tb-eyebrow-size: 9.5px;
    --tb-eyebrow-tracking: 0.22em;
    /* The Delete button: white text is 5:1 on this, where the design's --tb-danger is 4:1. */
    --tb-danger-fill: #C93C3C;
    --tb-danger-fill-hover: #A82E2E;
}

body {
    background: #fff;
    color: var(--tb-ink) !important;
    font-family: Montserrat, system-ui, sans-serif;
}

/* The page focuses its heading when it opens, for screen readers; it is not a control, so it shows no outline. */
h1:focus {
    outline: none;
}

/* ---------- Navbar ---------- */

.tb-nav {
    position: relative;
    z-index: 40;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 40px;
    background: #fff;
    border-bottom: 1px solid var(--tb-line-soft);
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
}

.tb-nav a,
.tb-nav-mobile-menu a {
    color: var(--tb-ink-muted);
    font-weight: 500;
    text-decoration: none;
}

.tb-nav a:hover,
.tb-nav a.active,
.tb-nav-mobile-menu a.active {
    color: var(--tb-ink);
}

.tb-nav a.active {
    font-weight: 700;
}

.tb-nav-mobile-menu a.active {
    color: var(--tb-teal-ink);
}

/* Logo and account area share the spare width, so the links sit in the true centre. */
.tb-nav-logo {
    flex: 1;
    min-width: 0;
}

.tb-nav-logo img {
    display: block;
    height: 32px;
    width: auto;
}

.tb-nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
}

.tb-nav-links a {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tb-nav-account {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
}

.tb-nav a.tb-nav-login {
    color: var(--tb-ink);
    font-weight: 600;
}

/* The teal button: Start here, Create a blend or Reorder my blend. */
.tb-nav-button,
.tb-nav a.tb-nav-button,
.tb-nav-mobile-menu a.tb-nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 20px;
    border: 0;
    border-radius: 8px;
    background: var(--tb-teal-fill);
    color: var(--tb-teal-fill-text);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.tb-nav a.tb-nav-button:hover,
.tb-nav-mobile-menu a.tb-nav-button:hover {
    color: var(--tb-teal-fill-text);
    transform: var(--tb-lift);
}

.tb-nav-user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--tb-ink);
    font-size: 12.5px;
    font-weight: 600;
}

.tb-nav-initials {
    width: 32px;
    height: 32px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--tb-teal-tint);
    color: var(--tb-teal-ink);
    font-size: 11px;
    font-weight: 700;
}

.tb-nav-dropdown.dropdown-menu {
    width: 240px;
    margin-top: 8px !important;
    padding: 8px;
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-radius-menu);
    box-shadow: var(--tb-shadow-menu);
    font-size: 13px;
}

.tb-nav .tb-nav-dropdown .dropdown-item {
    padding: 10px 12px;
    border-radius: 4px;
    color: var(--tb-ink);
    font-weight: 600;
}

.tb-nav .tb-nav-dropdown .dropdown-item:hover,
.tb-nav .tb-nav-dropdown .dropdown-item:focus {
    background: var(--tb-page);
    color: var(--tb-ink);
}

.tb-nav .tb-nav-dropdown .dropdown-item.tb-nav-muted {
    color: var(--tb-ink-faint);
    font-weight: 500;
}

.tb-nav-dropdown-note {
    display: block;
    color: var(--tb-ink-faint);
    font-size: 11.5px;
}

.tb-nav-dropdown .tb-nav-dropdown-note {
    margin-bottom: 4px;
    padding: 8px 12px 10px;
    border-bottom: 1px solid var(--tb-line-soft);
}

.tb-nav-dropdown-user {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 4px;
    padding: 10px 12px 12px;
    border-bottom: 1px solid var(--tb-line-soft);
    font-weight: 600;
    white-space: normal;
    overflow-wrap: anywhere;
}

.tb-nav-dropdown-user span + span {
    color: var(--tb-ink-faint);
    font-size: 11.5px;
    font-weight: 500;
}

.tb-nav-dropdown-line {
    height: 1px;
    margin: 4px 0;
    background: var(--tb-line-soft);
}

/* Cart: a plain icon with a teal count badge. */
.tb-cart-button {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--tb-ink);
    cursor: pointer;
}

.tb-cart-count {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--tb-teal-fill);
    color: var(--tb-teal-fill-text);
    font-size: var(--tb-eyebrow-size);
    font-weight: 700;
}

.tb-nav-mobile {
    display: none;
    align-items: center;
    gap: 4px;
}

.tb-nav-menu-button {
    position: relative;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--tb-ink);
}

.tb-nav-menu-button .tb-icon-open,
.tb-nav-menu-button.collapsed .tb-icon-close {
    display: none;
}

.tb-nav-menu-button.collapsed .tb-icon-open {
    display: block;
}

/* New blends in a practitioner's inbox, shown while the menu holding the count is closed. */
.tb-nav-dot {
    display: none;
    position: absolute;
    top: 10px;
    right: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tb-teal-ui);
}

.tb-nav-menu-button.collapsed .tb-nav-dot {
    display: block;
}

.tb-nav-mobile-menu {
    background: #fff;
    border-bottom: 1px solid var(--tb-line);
}

.tb-nav-mobile-links {
    display: flex;
    flex-direction: column;
    padding: 4px 20px 0;
}

.tb-nav-mobile-links > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--tb-line-soft);
    color: var(--tb-ink);
    font-size: 16px;
    font-weight: 600;
}

.tb-nav-mobile-section {
    display: flex;
    flex-direction: column;
    padding: 0 20px;
}

.tb-nav-mobile-section > a {
    padding: 10px 0;
    color: var(--tb-ink-soft);
    font-size: 14px;
}

.tb-nav-mobile-label {
    padding-top: 20px;
    color: var(--tb-ink-faint);
    font-size: var(--tb-eyebrow-size);
    font-weight: 700;
    letter-spacing: var(--tb-eyebrow-tracking);
    text-transform: uppercase;
}

.tb-nav-mobile-section .tb-nav-dropdown-note {
    padding-bottom: 4px;
}

.tb-nav-mobile-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 20px 6px;
    color: var(--tb-ink);
    font-size: 13px;
    font-weight: 600;
}

.tb-nav-mobile-user .tb-nav-initials {
    width: 28px;
    height: 28px;
    font-size: 10px;
}

.tb-nav-mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 20px 22px;
}

.tb-nav-mobile-menu a.tb-nav-button {
    padding: 14px;
    font-size: 12.5px;
}

.tb-nav-mobile-menu a.tb-nav-mobile-outline {
    padding: 13px;
    border: 1px solid var(--tb-line-strong);
    border-radius: 8px;
    color: var(--tb-ink-soft);
    font-size: 12.5px;
    font-weight: 600;
    text-align: center;
}

/* The mobile menu only exists below the desktop navbar's breakpoint. */
@media (min-width: 992px) {
    .tb-nav-mobile-menu {
        display: none !important;
    }
}

/* Four or five links, a name, the cart and a button stop fitting below this, and the logo gives way first. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .tb-nav {
        padding: 0 20px;
    }

    .tb-nav-links {
        gap: 18px;
    }

    .tb-nav-logo img {
        height: 24px;
    }

    .tb-nav-account {
        gap: 10px;
    }
}

@media (max-width: 991.98px) {
    .tb-nav {
        height: 56px;
        gap: 4px;
        padding: 0 8px 0 18px;
    }

    .tb-nav-logo img {
        height: 28px;
    }

    .tb-nav-links,
    .tb-nav-account {
        display: none;
    }

    .tb-nav-mobile {
        display: flex;
    }

    .tb-nav-mobile .tb-nav-button {
        padding: 8px 14px;
        font-size: 11px;
    }

    .tb-nav-mobile .tb-cart-button {
        width: 44px;
        height: 44px;
    }

    .tb-nav-mobile .tb-cart-count {
        top: 6px;
        right: 4px;
    }
}

/* ---------- Footer ---------- */

.tb-footer {
    background: var(--tb-ink);
    color: #fff;
}

.tb-footer-inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 64px 40px 36px;
}

.tb-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: 32px 24px;
}

.tb-footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

.tb-footer-brand img {
    display: block;
    height: 29px;
    width: auto;
}

.tb-footer a.tb-footer-button {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 22px;
    border-radius: 8px;
    background: #fff;
    color: var(--tb-ink);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.tb-footer-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tb-footer-column > span {
    color: var(--tb-teal-ui);
    font-size: var(--tb-eyebrow-size);
    font-weight: 700;
    letter-spacing: var(--tb-eyebrow-tracking);
    text-transform: uppercase;
}

.tb-footer-column > a,
.tb-footer-contact a {
    align-self: flex-start;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    text-decoration: none;
}

.tb-footer-column > a:hover,
.tb-footer-contact a:hover {
    color: #fff;
}

.tb-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.tb-footer-small {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tb-footer-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 0 6px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
}

.tb-footer-contact a {
    font-size: 12px;
}

.tb-footer-copyright {
    color: rgba(255, 255, 255, 0.6);
    font-size: 11.5px;
    line-height: 1.6;
}

.tb-footer-copyright a {
    color: inherit;
}

.tb-footer-social {
    display: flex;
    gap: 8px;
}

.tb-footer-social a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
}

/* Legacy's stylesheet colours every icon inside a link dark, which would vanish on this background. */
.tb-footer-social a i {
    color: inherit;
}

@media (max-width: 767.98px) {
    .tb-footer-inner {
        gap: 32px;
        padding: 48px 20px 32px;
    }

    .tb-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 20px;
    }

    .tb-footer-brand {
        grid-column: 1 / -1;
    }

    .tb-footer-brand img {
        height: 36px;
        align-self: center;
    }

    .tb-footer a.tb-footer-button {
        align-self: stretch;
        justify-content: center;
    }

    .tb-footer-bottom {
        flex-direction: column-reverse;
        align-items: flex-start;
    }
}

/* ---------- Grey page and tab switcher (My clients) ---------- */

.tb-customer-main {
    background: var(--tb-bg-portal);
}

/* The design's portal pages are flat white. */
.tb-customer-main:has(.tb-myblends) {
    background: #fff;
}

.tb-tabs {
    display: flex;
    gap: 2px;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--tb-line);
    border-radius: 999px;
}

.tb-tab {
    height: 32px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    border-radius: 999px;
    color: var(--tb-ink) !important;
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.tb-tab.active {
    background: var(--tb-teal-fill);
    font-weight: 600;
    color: var(--tb-teal-fill-text) !important;
}

.tb-tab-count {
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--tb-teal-tint);
    color: var(--tb-teal-ink);
    font-size: 10.5px;
    font-weight: 700;
}

@media (max-width: 991.98px) {
    .tb-tabs {
        gap: 6px;
        padding: 0;
        background: none;
        border: 0;
    }

    .tb-tab {
        flex: none;
        padding: 0 13px;
        background: #fff;
        border: 1px solid var(--tb-line);
        font-size: 12px;
    }

    .tb-tab.active {
        border-color: var(--tb-teal-fill);
    }
}

/* ---------- My Blends ---------- */

.tb-myblends {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 32px 48px 56px;
}

.tb-myblends-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
}

.tb-myblends-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

/* The small capitals above a heading, and every label inside the detail panel. */
.tb-page-eyebrow {
    color: var(--tb-ink-faint);
    font-size: var(--tb-eyebrow-size);
    font-weight: 700;
    letter-spacing: var(--tb-eyebrow-tracking);
    line-height: 1.3;
    text-transform: uppercase;
}

.tb-page-title {
    margin: 0;
    color: var(--tb-ink);
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.05;
    text-transform: uppercase;
}

/* Legacy's base styles underline a heading's span. */
.tb-page-title-accent {
    color: var(--tb-teal-ink);
    font-weight: 300;
    text-decoration: none;
}

.tb-back-link {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    margin-bottom: -14px;
    color: var(--tb-teal-ink) !important;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.tb-back-link:hover {
    text-decoration: underline;
}

/* Blazor's router focuses the page h1 after navigation (FocusOnNavigate); the design shows no focus ring there. */
.tb-page-title:focus {
    outline: none;
}

.tb-muted {
    color: var(--tb-ink-faint);
    font-size: 12.5px;
}

.tb-search {
    flex: 0 1 340px;
    width: 340px;
    min-width: 200px;
    height: 44px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0 16px;
    background: #fff;
    border: 1px solid var(--tb-line);
    border-radius: 8px;
    color: var(--tb-ink-faint);
}

.tb-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: none;
    color: var(--tb-ink);
    font: inherit;
    font-size: 13px;
}

/* The table: an outlined card, 44px header row in small capitals, 52px rows with hairline dividers. */
.tb-myblends .tb-blends-card {
    background: #fff;
    border: 1px solid var(--tb-line);
    border-radius: 8px;
    box-shadow: none;
}

.tb-myblends .mud-table-container {
    border-radius: 8px 8px 0 0;
}

.tb-myblends .mud-table-head .mud-table-cell {
    height: 44px;
    padding: 0 12px;
    border-bottom: 1px solid var(--tb-line-soft);
    background: transparent;
    color: var(--tb-ink-faint);
    font-size: var(--tb-eyebrow-size);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.tb-myblends .mud-table-head .mud-table-cell * {
    font-size: var(--tb-eyebrow-size);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.tb-myblends .mud-table-head .mud-table-cell .mud-icon-root {
    font-size: 15px;
}

/* Sort arrow straight after the column name, as in the design (MudBlazor pushes it to the cell's far edge). */
.tb-myblends .mud-table-head .column-header {
    justify-content: flex-start;
}

.tb-myblends .mud-table-head .column-header .sortable-column-header {
    width: auto;
}

.tb-myblends .mud-table-body .mud-table-cell {
    height: 52px;
    padding: 0 12px;
    border-bottom: 0;
    border-top: 1px solid var(--tb-line-soft);
    color: var(--tb-ink-soft);
    font-size: 13px;
}

.tb-myblends .mud-table-head .mud-table-cell:first-child,
.tb-myblends .mud-table-body .mud-table-cell:first-child {
    padding-left: 20px;
}

.tb-myblends .mud-table-head .mud-table-cell:last-child,
.tb-myblends .mud-table-body .mud-table-cell:last-child {
    padding-right: 20px;
}

/* The actions column takes only the width of its buttons, so the price sits beside them as in the design. */
.tb-myblends .mud-table-head .mud-table-cell:last-child {
    width: 1%;
}

.tb-myblends {
    --mud-palette-table-hover: var(--slate-50);
}

/* Keep the right-aligned price heading flush with its values: MudBlazor reserves room for an invisible sort arrow. */
.tb-myblends .mud-table-head .tb-align-right .sort-direction-icon:not(.mud-direction-asc):not(.mud-direction-desc) {
    display: none;
}

/* Underlined because a click opens the blend's details and label. */
.tb-myblends .tb-blend-name {
    color: var(--tb-ink);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--tb-line-strong);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.tb-myblends .mud-table-row:hover .tb-blend-name,
.tb-myblends .tb-blend-name:hover {
    color: var(--tb-teal-ink);
    text-decoration-color: var(--tb-teal-ui);
}

.tb-search-mark {
    padding: 0;
    background: var(--tb-teal-tint);
    border-radius: 3px;
    color: var(--tb-teal-ink);
}

.tb-same-name {
    margin-left: 8px;
    padding: 2px 8px;
    background: var(--tb-page);
    border-radius: 999px;
    color: var(--tb-ink-faint);
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

.tb-myblends .tb-align-right {
    text-align: right;
}

.tb-myblends .mud-table-head .tb-align-right .column-header {
    justify-content: flex-end;
}

/* Row buttons: Send / Buy outlined teal (filled on hover), Edit and Share outlined grey. */
.tb-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

.tb-pill {
    height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0 14px;
    background: #fff;
    border: 1px solid var(--tb-line);
    border-radius: 8px;
    color: var(--tb-ink-soft) !important;
    font: inherit;
    font-size: 11.5px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.tb-pill:hover {
    border-color: var(--slate-400);
}

.tb-pill-primary {
    padding: 0 14px;
    border-color: var(--tb-teal-ui);
    color: var(--tb-teal-ink) !important;
    font-weight: 500;
}

.tb-pill-primary:hover {
    background: var(--tb-teal-fill);
    border-color: var(--tb-teal-fill);
    color: var(--tb-teal-fill-text) !important;
}

.tb-pill-share {
    padding: 0 10px 0 14px;
}

/* Phones only: the row's one button, which opens the action sheet. */
.tb-row-more {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: 0;
    color: var(--tb-ink-faint);
    cursor: pointer;
}

.tb-pill .tb-chevron {
    width: 13px;
    height: 13px;
}

/* Share menu: small white card with "Copy link". */
.tb-share-menu.mud-popover {
    min-width: 150px;
    margin-top: 8px;
    padding: 5px;
    border: 1px solid var(--tb-line);
    border-radius: 6px;
    box-shadow: none;
}

.tb-share-menu .mud-list {
    padding: 0;
}

.tb-share-menu .mud-menu-item {
    padding: 9px 12px;
    border-radius: 4px;
}

.tb-share-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--tb-ink);
    font-size: 12.5px;
}

/* My Blends' row menu (the ⋯ button): Edit, Share (opens out to Copy link and Download PNG), a line, then Delete. */
.tb-pill.tb-pill-more {
    width: 30px;
    justify-content: center;
    padding: 0;
}

.tb-row-menu.mud-popover {
    min-width: 190px;
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.15);
}

/* MudBlazor gives item text a margin round it and 36px on its right; the design's rows are tighter. */
.tb-row-menu.mud-popover .mud-menu-item .mud-menu-item-text {
    margin: 0;
}

.tb-row-menu .tb-share-item {
    gap: 10px;
    width: 100%;
    font-size: 12px;
}

.tb-menu-chevron {
    display: flex;
    margin-left: auto;
    transition: transform 0.15s;
}

.tb-menu-chevron.open {
    transform: rotate(180deg);
}

.tb-row-menu .tb-menu-sub .tb-share-item {
    padding-left: 25px;
    color: var(--tb-ink-muted);
}

.tb-row-menu .tb-menu-divider {
    margin: 4px 0;
    border-color: var(--tb-line-soft);
}

.tb-row-menu .tb-menu-delete .tb-share-item {
    color: var(--tb-danger);
}

.tb-row-menu .tb-menu-delete:hover {
    background: #FDF1F1;
}

/* Delete on a blend something uses: still shown, so customers know deleting exists, but faded, and it only says why. */
.tb-row-menu .tb-menu-delete.tb-delete-unavailable,
.tb-action-sheet-actions .tb-delete-unavailable {
    opacity: 0.4;
    cursor: not-allowed;
}

.tb-row-menu .tb-menu-delete.tb-delete-unavailable:hover {
    background: transparent;
}

/* Pager: range on the left; rows per page, page buttons and arrows on the right. */
.tb-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 20px;
    border-top: 1px solid var(--tb-line-soft);
    color: var(--tb-ink-muted);
    font-size: 12px;
}

.tb-pager-controls,
.tb-pager-size {
    display: flex;
    align-items: center;
    gap: 20px;
}

.tb-pager-size {
    gap: 8px;
    margin: 0;
}

.tb-pager-size select {
    height: 30px;
    padding: 0 10px;
    background: #fff;
    border: 1px solid var(--tb-line);
    border-radius: 8px;
    color: var(--tb-ink);
    font: inherit;
}

.tb-pager-pages {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tb-page,
.tb-page-step {
    min-width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--tb-ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.tb-page {
    border-radius: 8px;
}

.tb-page.active {
    background: var(--tb-teal-fill);
    color: var(--tb-teal-fill-text);
}

.tb-page-step:disabled {
    opacity: 0.3;
    cursor: default;
}

.tb-page-gap {
    min-width: 20px;
    text-align: center;
}

@media (max-width: 991.98px) {
    .tb-myblends {
        gap: 12px;
        padding: 18px 16px 32px;
    }

    .tb-myblends-heading {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .tb-page-title {
        font-size: 24px;
    }

    .tb-back-link {
        margin-bottom: -8px;
    }

    .tb-search {
        flex: 1 1 100%;
        width: auto;
    }

    /* Directly in the stacked heading, a basis of 100% would be the height and squash it. */
    .tb-myblends-heading > .tb-search {
        flex: none;
    }

    .tb-pager {
        flex-wrap: wrap;
    }
}

/* Phones: MudBlazor stacks each row as "label: value" lines; lay it out like the design's compact phone row instead:
   name and price on top; client, flavour and date beneath (the formulator is left out, as in the design); then the
   actions. Cells: 1 name, 2 flavour, 3 formulated for, 4 formulated by, 5 created, 6 price, 7 actions. */
@media (max-width: 600px) {
    .tb-myblends .mud-xs-table .mud-table-body .mud-table-row {
        display: grid;
        grid-template-columns: minmax(0, max-content) minmax(0, 1fr) auto;
        column-gap: 0;
        row-gap: 1px;
        padding: 10px 14px;
        border-top: 1px solid var(--tb-line-soft);
    }

    .tb-myblends .mud-xs-table .mud-table-body .mud-table-cell {
        display: block;
        height: auto;
        min-width: 0;
        padding: 0;
        border: 0;
        color: var(--tb-ink-faint);
        font-size: 11.5px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tb-myblends .mud-xs-table .mud-table-body .mud-table-cell::before {
        content: none;
    }

    .tb-myblends .mud-xs-table .mud-table-body .mud-table-cell:nth-child(1) { grid-area: 1 / 1 / 2 / 3; font-size: 13px; }
    .tb-myblends .mud-xs-table .mud-table-body .mud-table-cell:nth-child(2) { grid-area: 2 / 2; padding-left: 4px; }
    .tb-myblends .mud-xs-table .mud-table-body .mud-table-cell:nth-child(2)::before { content: "· "; padding: 0; }
    .tb-myblends .mud-xs-table .mud-table-body .mud-table-cell:nth-child(3) { grid-area: 2 / 1; }
    .tb-myblends .mud-xs-table .mud-table-body .mud-table-cell:nth-child(4) { display: none; }
    .tb-myblends .mud-xs-table .mud-table-body .mud-table-cell:nth-child(5) { grid-area: 2 / 3; padding-left: 10px; text-align: right !important; }
    .tb-myblends .mud-xs-table .mud-table-body .mud-table-cell:nth-child(6) { grid-area: 1 / 3; padding-left: 10px; color: var(--tb-ink); font-size: 12.5px; font-weight: 500; text-align: right !important; }
    .tb-myblends .mud-xs-table .mud-table-body .mud-table-cell:nth-child(7) { grid-area: 3 / 1 / 4 / 4; padding-top: 8px; overflow: visible; }

    .tb-myblends .mud-xs-table .mud-table-body .mud-table-cell .tb-blend-name {
        font-weight: 600;
    }

    .tb-myblends .mud-xs-table .tb-actions {
        justify-content: flex-start;
    }

    /* Phone pager, as the design: page size, range and two arrow buttons, without numbered pages. */
    .tb-pager {
        padding: 12px 14px;
    }

    .tb-pager-controls {
        flex: 1;
        justify-content: space-between;
        gap: 8px;
    }

    .tb-pager-size {
        white-space: nowrap;
    }

    .tb-page,
    .tb-page-gap {
        display: none;
    }

    .tb-pager-pages {
        gap: 6px;
    }

    .tb-page-step {
        width: 44px;
        height: 36px;
        background: #fff;
        border: 1px solid var(--tb-line-strong);
    }
}

/* The phone sort chips and action sheet exist only where MudDataGrid hides its sortable headings and the buttons don't fit. */
.tb-sort-chips {
    display: none;
    gap: 6px;
    margin: 0 -16px;
    padding: 0 16px;
    overflow-x: auto;
    scrollbar-width: none;
}

.tb-sort-chip {
    flex: none;
    height: 44px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 14px;
    background: var(--tb-page);
    border: 0;
    border-radius: 8px;
    color: var(--tb-ink-muted);
    font: inherit;
    font-size: 11.5px;
    font-weight: 500;
}

.tb-sort-chip.active {
    background: var(--tb-teal-fill);
    color: var(--tb-teal-fill-text);
    font-weight: 600;
}

.tb-action-sheet {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 10px 16px 26px;
    background: #fff;
    border-radius: 12px 12px 0 0;
}

/* Focus lands on the dialog itself so the keyboard starts inside it; it needs no ring of its own. */
.tb-action-sheet:focus,
.tb-ledger-dialog:focus {
    outline: none;
}

.tb-action-sheet-handle {
    align-self: center;
    width: 36px;
    height: 4px;
    background: var(--tb-line-strong);
    border-radius: 999px;
}

.tb-action-sheet-title {
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: var(--tb-ink);
    font-size: 14px;
    font-weight: 600;
}

.tb-action-sheet-title .tb-muted {
    font-size: 12px;
    font-weight: 400;
}

.tb-action-sheet-actions.tb-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.tb-action-sheet-actions .tb-pill {
    width: 100%;
    height: 44px;
    justify-content: center;
    font-size: 12.5px;
}

.tb-action-sheet-actions .tb-pill-primary {
    grid-column: 1 / -1;
    background: var(--tb-teal-fill);
    color: var(--tb-teal-fill-text) !important;
    font-weight: 700;
}

.tb-action-sheet-actions [data-testid="delete-blend"] {
    grid-column: 1 / -1;
    order: 1;
    border: 0;
    color: var(--tb-danger-fill-hover) !important;
}

@media (max-width: 600px) {
    .tb-sort-chips {
        display: flex;
    }

    .tb-ledger-tools .tb-ledger-button {
        flex: 1;
        justify-content: center;
    }

    /* View recent orders, with the search below it. */
    .tb-my-blends .tb-ledger-tools .tb-search {
        order: 1;
    }

    /* The My Blends phone row: name, then client and flavour, on the left; price over date; then the action button. */
    .tb-my-blends .mud-xs-table .mud-table-body .mud-table-row {
        grid-template-columns: minmax(0, max-content) minmax(0, 1fr) auto 44px;
        align-items: center;
        padding: 10px 4px 10px 14px;
    }

    .tb-my-blends .mud-xs-table .mud-table-body .mud-table-cell:nth-child(7) {
        grid-area: 1 / 4 / 3 / 5;
        padding: 0;
    }

    .tb-my-blends .mud-xs-table .tb-actions {
        display: none;
    }

    .tb-my-blends .tb-row-more {
        display: flex;
    }
}

/* ---------- Blend detail panel (the My Blends design's drawer): slides in on the right; full screen on phones ---------- */

.tb-myblends .mud-table-body .mud-table-row {
    cursor: pointer;
}

/* Above the navbar and Bootstrap's cart modal, below MudBlazor popovers (so Share's menu opens on top). */
.tb-detail-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: rgba(20, 20, 20, 0.28);
}

.tb-detail {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    width: 580px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    color: var(--tb-ink);
    font-size: 12.5px;
    line-height: 1.5;
}

.tb-detail-topbar {
    display: none;
}

.tb-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 28px 32px 18px;
}

.tb-detail-title {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tb-detail-title h2 {
    margin: 0;
    color: var(--tb-ink);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    text-transform: none;
}

.tb-detail-title .tb-muted {
    font-size: 12px;
}

.tb-detail-close {
    flex: none;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #fff;
    border: 1px solid var(--tb-line);
    border-radius: 999px;
    color: var(--tb-ink);
}

.tb-detail-buy {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 16px;
    padding: 0 32px 22px;
    border-bottom: 1px solid var(--tb-line-soft);
}

.tb-detail-price {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tb-detail-price > span:last-child {
    font-size: 30px;
    font-weight: 300;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.tb-detail-actions.tb-actions {
    justify-content: flex-start;
    gap: 8px;
}

.tb-detail-actions .tb-pill {
    height: 40px;
    padding: 0 20px;
}

.tb-detail-actions .tb-pill-primary {
    padding: 0 22px;
    background: var(--tb-teal-fill);
    color: var(--tb-teal-fill-text) !important;
    font-weight: 700;
}

.tb-detail-actions .tb-pill-primary:hover {
    background: var(--tb-teal-fill);
    border-color: var(--tb-teal-fill);
}

.tb-detail-actions .tb-pill-share {
    padding: 0 14px 0 20px;
}

.tb-detail-body {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 24px 32px 40px;
}

.tb-facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}

.tb-fact {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    background: var(--tb-page);
    border-radius: 8px;
}

.tb-fact > span:first-child,
.tb-note > span:first-child {
    color: var(--tb-ink-faint);
    font-size: var(--tb-eyebrow-size);
    font-weight: 700;
    letter-spacing: var(--tb-eyebrow-tracking);
    text-transform: uppercase;
}

.tb-fact > span:last-child {
    font-weight: 500;
    overflow-wrap: anywhere;
}

.tb-detail-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tb-detail-section h3 {
    margin: 0;
    color: var(--tb-ink-faint);
    font-size: var(--tb-eyebrow-size);
    font-weight: 700;
    letter-spacing: var(--tb-eyebrow-tracking);
    line-height: 1.3;
    text-transform: uppercase;
}

.tb-nutrition,
.tb-actives {
    overflow: hidden;
    border: 1px solid var(--tb-line-soft);
    border-radius: 8px;
}

.tb-nutrition-head,
.tb-nutrition-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(92px, max-content) minmax(112px, max-content);
}

.tb-nutrition-head {
    background: var(--tb-page);
    color: var(--tb-ink-muted);
    font-size: 11px;
    font-weight: 600;
}

.tb-nutrition-head span {
    padding: 8px 12px;
}

.tb-nutrition-row span {
    padding: 6px 12px;
}

.tb-nutrition-head span:not(:first-child),
.tb-nutrition-row span:not(:first-child) {
    text-align: right;
    white-space: nowrap;
}

.tb-nutrition-row {
    border-top: 1px solid var(--tb-page);
    font-variant-numeric: tabular-nums;
}

.tb-nutrition-head + .tb-nutrition-row {
    border-top: 0;
}

.tb-nutrition-sub span:first-child {
    padding-left: 28px;
    color: var(--tb-ink-faint);
}

.tb-active-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--tb-page);
    font-variant-numeric: tabular-nums;
}

.tb-active-row:last-child {
    border-bottom: 0;
}

.tb-active-row span:last-child {
    font-weight: 600;
    white-space: nowrap;
}

.tb-detail-notes {
    gap: 16px;
}

.tb-detail-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
}

.tb-note {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tb-note > span:last-child {
    color: var(--tb-ink-soft);
}

/* Legacy lower-cases the list and capitalises each word for display. */
.tb-ingredients-list {
    text-transform: capitalize;
}

/* Phones: the panel fills the screen and scrolls as one; a top bar to close it and the buttons stay in view. */
@media (max-width: 600px) {
    .tb-detail {
        width: 100%;
        overflow-y: auto;
    }

    .tb-detail-topbar {
        position: sticky;
        top: 0;
        z-index: 1;
        flex: none;
        height: 52px;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0 8px;
        background: #fff;
        border-bottom: 1px solid var(--tb-line);
        font-size: 13px;
        font-weight: 600;
    }

    .tb-detail-topbar .tb-detail-close {
        width: 44px;
        height: 44px;
        border: 0;
    }

    .tb-detail-close-desktop {
        display: none;
    }

    .tb-detail-head {
        padding: 20px 16px 6px;
    }

    .tb-detail-title h2 {
        font-size: 19px;
    }

    /* The price joins the heading and the buttons become the bottom bar. */
    .tb-detail-buy {
        display: contents;
    }

    .tb-detail-price {
        padding: 0 16px;
    }

    .tb-detail-price > span:last-child {
        font-size: 26px;
    }

    .tb-detail-body {
        flex: none;
        overflow: visible;
        gap: 18px;
        padding: 18px 16px 28px;
    }

    .tb-detail-actions.tb-actions {
        position: sticky;
        bottom: 0;
        order: 4;
        margin-top: auto;
        padding: 12px 16px 22px;
        background: #fff;
        border-top: 1px solid var(--tb-line-soft);
    }

    .tb-detail-actions .tb-pill {
        height: 44px;
        padding: 0 18px;
        font-size: 12.5px;
    }

    .tb-detail-actions .tb-pill-primary {
        flex: 1;
        justify-content: center;
    }

    .tb-detail-pair {
        grid-template-columns: 1fr;
    }

    .tb-nutrition-head,
    .tb-nutrition-row {
        grid-template-columns: minmax(0, 1fr) minmax(70px, max-content) minmax(84px, max-content);
    }

    .tb-nutrition-head span,
    .tb-nutrition-row span {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* My Clients and My Account: underlined tabs above a ledger table, a tools row, links that open panels, and a small dialog. */
.tb-ledger-tabs {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    border-bottom: 1px solid var(--tb-line);
    scrollbar-width: none;
}

.tb-ledger-tabs .tb-tab {
    flex: none;
    height: auto;
    min-height: 40px;
    margin-bottom: -1px;
    padding: 0;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--tb-ink-muted) !important;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.tb-ledger-tabs .tb-tab.active {
    background: none;
    border-bottom-color: var(--tb-teal-ui);
    color: var(--tb-ink) !important;
    font-weight: 600;
}

.tb-ledger-tools {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-width: 0;
}

/* The page's main action: the teal button, or an outlined grey one beside it. */
.tb-ledger-button {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 24px;
    background: var(--tb-teal-fill);
    border: 0;
    border-radius: 8px;
    color: var(--tb-teal-fill-text) !important;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.tb-ledger-button:hover {
    transform: var(--tb-lift);
}

.tb-ledger-button.outline {
    padding: 0 20px;
    background: #fff;
    border: 1px solid var(--tb-line);
    color: var(--tb-ink-soft) !important;
    font-weight: 600;
}

.tb-ledger-button.outline:hover {
    border-color: var(--slate-400);
}

.tb-ledger-button.danger {
    background: var(--tb-danger-fill);
    color: #fff !important;
}

.tb-ledger-button.danger:hover {
    background: var(--tb-danger-fill-hover);
}

/* A status: tinted when done, amber while waiting, grey when stopped, outlined otherwise. */
.tb-status {
    display: inline-block;
    padding: 4px 10px;
    background: #fff;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px var(--tb-line);
    color: var(--tb-ink-soft);
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}

.tb-status:empty {
    display: none;
}

.tb-status.done {
    background: var(--tb-teal-tint);
    box-shadow: none;
    color: var(--tb-teal-ink);
}

.tb-status.waiting {
    background: var(--tb-warning-bg);
    box-shadow: none;
    color: var(--tb-warning-text);
}

.tb-status.stopped {
    background: var(--tb-page);
    box-shadow: none;
    color: var(--tb-ink-muted);
}

.tb-ledger-link {
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.tb-ledger-link:hover {
    color: var(--tb-teal-ink);
    text-decoration: underline;
}

.tb-ledger-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1100;
    width: min(420px, calc(100vw - 32px));
    padding: 24px;
    background: #fff;
    border-radius: 12px;
    transform: translate(-50%, -50%);
}

.tb-dialog-title {
    margin: 0 0 14px;
    color: var(--tb-ink);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
}

.tb-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

.tb-dialog-actions .tb-ledger-button {
    height: 44px;
}

.tb-ledger-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.tb-ledger-dialog-head h2 {
    margin: 0;
    font-size: 20px;
}

.tb-ledger-dialog-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 16px;
    margin: 0;
    font-size: 14px;
}

.tb-ledger-dialog-facts dt {
    color: var(--tb-ink-faint);
    font-weight: 500;
}

.tb-ledger-dialog-facts dd {
    margin: 0;
    word-break: break-all;
}

/* My Clients: the key under Sent Blends, saying what each status means; closed until asked for. */
.tb-status-panel {
    background: var(--slate-50);
    border: 1px solid var(--tb-line-soft);
    border-radius: 8px;
}

.tb-status-toggle {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 20px;
    background: none;
    border: 0;
    color: var(--tb-ink-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.tb-status-key {
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: center;
    gap: 10px 16px;
    margin: 0;
    padding: 16px 20px 20px;
    border-top: 1px solid var(--tb-line-soft);
    color: var(--tb-ink-muted);
    font-size: 12px;
}

.tb-status-key[hidden] {
    display: none;
}

.tb-status-key dt {
    font-weight: 500;
}

.tb-status-key dd {
    margin: 0;
}

/* Phones: My Clients' rows in the My Blends phone layout (blend name and price on top; who, then the date beneath;
   then the actions). The My Blends rules above number their cells for its own columns, so each table re-places its own.
   Inbox cells: 1 from, 2 name, 3 formulated for, 4 date, 5 total, 6 actions.
   Sent cells: 1 date, 2 client, 3 name, 4 price, 5 status, 6 actions. */
@media (max-width: 600px) {
    .tb-myblends .mud-xs-table .tb-ledger-link {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: top;
    }

    .tb-myblends .tb-inbox-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(1) { grid-area: 2 / 1; font-size: 11.5px; }
    .tb-myblends .tb-inbox-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(2) { grid-area: 1 / 1 / 2 / 3; padding-left: 0; font-size: 13px; }
    .tb-myblends .tb-inbox-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(2)::before { content: none; }
    .tb-myblends .tb-inbox-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(3) { grid-area: 2 / 2; padding-left: 4px; }
    .tb-myblends .tb-inbox-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(3)::before { content: "· "; padding: 0; }
    .tb-myblends .tb-inbox-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(4) { display: block; grid-area: 2 / 3; padding-left: 10px; text-align: right !important; }
    .tb-myblends .tb-inbox-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(5) { grid-area: 1 / 3; color: var(--tb-ink); font-size: 12.5px; font-weight: 500; }
    .tb-myblends .tb-inbox-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(6) { grid-area: 3 / 1 / 4 / 4; padding: 8px 0 0; overflow: visible; text-align: left !important; }

    .tb-myblends .tb-sent-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(1) { grid-area: 2 / 3; padding-left: 10px; font-size: 11.5px; text-align: right !important; }
    .tb-myblends .tb-sent-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(2) { grid-area: 2 / 1; padding-left: 0; }
    .tb-myblends .tb-sent-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(2)::before { content: none; }
    .tb-myblends .tb-sent-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(3) { grid-area: 1 / 1 / 2 / 3; font-size: 13px; }
    .tb-myblends .tb-sent-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(4) { display: block; grid-area: 1 / 3; padding-left: 10px; color: var(--tb-ink); font-size: 12.5px; font-weight: 500; }
    .tb-myblends .tb-sent-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(5) { grid-area: 2 / 2; padding-left: 8px; text-align: left !important; }
    .tb-myblends .tb-sent-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(5)::before { content: none; }
    .tb-myblends .tb-sent-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(6) { grid-area: 3 / 1 / 4 / 4; padding: 8px 0 0; overflow: visible; color: inherit; font-size: 11.5px; font-weight: 400; text-align: left !important; }
}

/* Forms on these pages, as the My Account design: small labels above 44px boxes with a teal focus ring. */
.tb-myblends .tb-contact-field,
.tb-ledger-dialog .tb-contact-field {
    gap: 6px;
    margin-bottom: 0;
    color: var(--tb-ink-muted);
    font-size: 11.5px;
    font-weight: 600;
}

.tb-myblends .form-control,
.tb-myblends .form-select,
.tb-ledger-dialog .form-control {
    min-height: 44px;
    border: 1px solid var(--tb-line);
    border-radius: 8px;
    color: var(--tb-ink);
    font-size: 13px;
    font-weight: 400;
}

.tb-myblends .form-control:focus,
.tb-myblends .form-select:focus,
.tb-ledger-dialog .form-control:focus {
    border-color: var(--tb-teal-ui);
    box-shadow: var(--tb-shadow-focus);
}

.tb-myblends .form-control[readonly]:not([data-held]) {
    background: var(--slate-50);
    color: var(--tb-ink-muted);
}

.tb-ledger-button:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Add Client and Update Directory: the registration card, on the left under the heading. */
.tb-myblends .tb-register .tb-content-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 760px;
    margin: 0;
    padding: 24px;
    border-radius: 8px;
}

.tb-myblends .tb-register .tb-content-card h2 {
    margin: 8px 0 0;
    color: var(--tb-ink-faint);
    font-size: var(--tb-eyebrow-size);
    font-weight: 700;
    letter-spacing: var(--tb-eyebrow-tracking);
    text-transform: uppercase;
}

.tb-myblends .tb-register .tb-ledger-tools {
    justify-content: flex-start;
}

/* My Account: details on the left, then password and directory on the right (one column on smaller screens). */
.tb-account {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.tb-account-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.tb-myblends .tb-account .tb-content-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    padding: 24px;
    border-radius: 8px;
    text-align: left;
}

.tb-myblends .tb-account .tb-content-card h2 {
    margin: 0;
    color: var(--tb-ink-faint);
    font-size: var(--tb-eyebrow-size);
    font-weight: 700;
    letter-spacing: var(--tb-eyebrow-tracking);
    text-transform: uppercase;
}

.tb-account .tb-contact-problem,
.tb-account .tb-contact-sent {
    margin: 0;
}

.tb-account-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 4px;
}

.tb-account-password {
    position: relative;
    display: block;
}

.tb-account-password input {
    padding-right: 44px;
}

.tb-account-password button {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: 0;
    color: var(--tb-ink-faint);
    cursor: pointer;
}

.tb-account-forward {
    margin-bottom: 0;
}

/* The dark support card, for practitioners. */
.tb-account-support {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 40px;
    padding: 24px 28px;
    background: var(--tb-gradient-dark);
    border-radius: 8px;
}

.tb-account-support > div:first-child {
    flex: 1 1 420px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.tb-account-support .tb-page-eyebrow {
    color: var(--tb-teal-ui);
}

.tb-account-support p {
    margin: 0;
    color: #fff;
    font-size: 14px;
    line-height: 1.6;
    text-wrap: pretty;
}

.tb-account-support-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tb-ledger-button.tb-account-ghost {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    color: #fff !important;
}

.tb-ledger-button.tb-account-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
}

.tb-account fieldset {
    border: 0;
    padding: 0;
}

.tb-account legend {
    margin-bottom: 8px;
    color: var(--tb-ink-muted);
    font-size: 11.5px;
    font-weight: 600;
}

.tb-account-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 12px;
}

.tb-myblends .tb-account-pair {
    gap: 16px;
}

/* Gender: one choice in a pill, the radio itself hidden but still reachable by keyboard. */
.tb-account-choices {
    display: inline-flex;
    align-self: flex-start;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    background: var(--tb-page);
    border-radius: 999px;
}

.tb-account-choices label {
    position: relative;
    margin: 0;
    padding: 8px 16px;
    border-radius: 999px;
    color: var(--tb-ink-muted);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}

.tb-account-choices input {
    position: absolute;
    opacity: 0;
}

.tb-account-choices label:has(input:checked) {
    background: #fff;
    box-shadow: var(--tb-shadow-toggle);
    color: var(--tb-ink);
    font-weight: 600;
}

.tb-account-choices label:has(input:focus-visible) {
    outline: 2px solid var(--tb-teal-ink);
}

/* The day's column is wide enough for its "Day" placeholder on a phone. */
.tb-account-dob {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 8px;
    max-width: 420px;
}

.tb-account-directory {
    color: var(--tb-ink-muted);
    font-size: 13px;
    line-height: 1.6;
}

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

/* Phones: orders as My Blends' compact rows (blends and total on top; order number, status and date beneath; then the
   buttons). Cells: 1 order number, 2 blends, 3 formulated by, 4 date, 5 total, 6 status, 7 actions. */
@media (max-width: 600px) {
    .tb-account-pair {
        grid-template-columns: minmax(0, 1fr);
    }

    .tb-myblends .tb-orders-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(1) { grid-area: 2 / 1; font-size: 11.5px; }
    .tb-myblends .tb-orders-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(1)::before { content: "#"; padding: 0; }
    .tb-myblends .tb-orders-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(2) { grid-area: 1 / 1 / 2 / 3; padding-left: 0; font-size: 13px; }
    .tb-myblends .tb-orders-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(2)::before { content: none; }
    .tb-myblends .tb-orders-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(3) { display: none; }
    .tb-myblends .tb-orders-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(4) { display: block; grid-area: 2 / 3; padding-left: 10px; text-align: right !important; }
    .tb-myblends .tb-orders-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(5) { grid-area: 1 / 3; color: var(--tb-ink); font-size: 12.5px; font-weight: 500; }
    .tb-myblends .tb-orders-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(6) { grid-area: 2 / 2; padding-left: 8px; text-align: left !important; }
    .tb-myblends .tb-orders-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(6)::before { content: none; }

    /* Small enough to sit on the line beside the order number or client. */
    .tb-myblends .mud-xs-table .tb-status {
        padding: 1px 8px;
        font-size: 10px;
    }
}

/* A past order: delivery and payment cards, then the blends and legacy's totals in one ledger card. */
.tb-order-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.tb-order .tb-content-card {
    padding: 22px 24px;
    border-radius: 8px;
    box-shadow: none;
    text-align: left;
}

.tb-order .tb-content-card h2 {
    margin-bottom: 10px;
    font-size: 15px;
}

.tb-order address {
    margin: 0;
    color: var(--tb-ink-soft);
    font-size: 13px;
    font-style: normal;
    line-height: 1.6;
}

.tb-order-items {
    background: #fff;
    border: 1px solid var(--tb-line);
    border-radius: 8px;
}

.tb-order-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 70px 130px;
    gap: 12px;
    align-items: center;
    padding: 12px 20px;
    border-top: 1px solid var(--tb-line-soft);
    font-size: 13px;
}

.tb-order-head {
    border-top: 0;
    color: var(--tb-ink-faint);
    font-size: var(--tb-eyebrow-size);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.tb-order-meta {
    display: block;
    margin-top: 2px;
    color: var(--tb-ink-faint);
    font-size: 12px;
}

.tb-order-totals {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 130px;
    gap: 6px 12px;
    margin: 0;
    padding: 16px 20px 20px;
    border-top: 1px solid var(--tb-line);
    font-size: 13px;
}

.tb-order-totals dt {
    color: var(--tb-ink-soft);
    font-weight: 400;
    text-align: right;
}

.tb-order-totals dd {
    margin: 0;
    text-align: right;
}

.tb-order-totals .tb-order-total {
    color: var(--tb-ink);
    font-size: 15px;
    font-weight: 600;
}

.tb-order-missing {
    max-width: 520px;
    text-align: center;
}

/* Plain words here; the client dialog breaks anywhere only so long email addresses fit. */
.tb-order .tb-ledger-dialog-facts dd {
    word-break: normal;
    overflow-wrap: break-word;
}

@media (max-width: 600px) {
    .tb-order-facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .tb-order .tb-ledger-dialog-facts {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    .tb-order .tb-ledger-dialog-facts dd {
        margin-bottom: 8px;
    }

    .tb-order-row {
        grid-template-columns: minmax(0, 1fr) 36px 96px;
        padding: 12px 14px;
    }

    .tb-order-totals {
        grid-template-columns: minmax(0, 1fr) 96px;
        padding: 14px;
    }
}

/* Registration: one card, the form in sections; the success page reuses it. Headings outrank content.css's card headings. */
.tb-register .tb-content-card {
    max-width: 760px;
    margin: 0 auto;
    text-align: left;
}

.tb-register .tb-content-card h1 {
    font-size: 24px;
}

.tb-register .tb-content-card h2 {
    margin: 22px 0 10px;
    font-size: 16px;
    text-transform: uppercase;
}

.tb-register fieldset {
    border: 0;
    padding: 0;
}

.tb-register legend {
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 600;
}

.tb-register-check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 10px 0;
    font-size: 13px;
}

.tb-register-check input {
    margin-top: 3px;
    accent-color: var(--tb-teal-ui);
}

.tb-register .g-recaptcha {
    margin: 16px 0;
}

.tb-register .tb-content-button:disabled {
    opacity: 0.5;
}

.tb-registered {
    text-align: center !important;
}

.tb-register-note {
    margin: -4px 0 12px 26px;
    font-size: 12px;
}

/* The practice details are only needed for the directory, so they show only while the directory box is ticked. */
.tb-register-listing {
    display: none;
}

.tb-register-check:has(input:checked) ~ .tb-register-listing {
    display: block;
}

/* Login: legacy's two cards side by side (log in; register), stacked on a phone. It reuses the registration card
   styles (.tb-register); the title sits above both cards, with the cards' teal accent. The registration pages,
   Practitioner Directory and a practitioner's profile use the same title above their cards. */
.tb-login-title {
    margin: 0;
    color: var(--tb-ink);
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.05;
    text-align: center;
    text-transform: uppercase;
}

/* Legacy's base styles underline a heading's span. */
.tb-login-title span {
    border-bottom: 0;
    color: var(--tb-teal-ink);
    font-weight: 300;
    text-decoration: none;
}

@media (max-width: 759px) {
    .tb-login-title {
        font-size: 24px;
    }
}

.tb-login-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.tb-login .tb-content-card {
    max-width: none;
    margin: 0;
}

.tb-login .tb-content-card h2.tb-login-second {
    margin-top: 32px;
}

.tb-login-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

@media (max-width: 760px) {
    .tb-login-cards {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Practitioner qualifications: institution, qualification and year on one line. */
.tb-register-qualification {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) 110px;
    gap: 8px;
    margin-bottom: 8px;
}

@media (max-width: 600px) {
    .tb-register .tb-account-pair {
        grid-template-columns: minmax(0, 1fr);
    }

    .tb-register-qualification {
        grid-template-columns: minmax(0, 1fr);
        padding-bottom: 8px;
        border-bottom: 1px solid var(--tb-line-soft);
    }
}

/* Practitioner Directory: Login's title and the introduction centred; beneath them Pre-designed Blends' category
   filter (.tb-category) with the search beside it, above the table. */
.tb-directory-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.tb-directory-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
}

/* The filters carry the View button's teal border (.tb-pill-primary); a chosen speciality is filled teal. Reset filter is
   dimmed until a speciality is chosen. */
.tb-directory-filter .tb-category {
    padding: 0 14px 0 10px;
    border-color: var(--tb-teal-ui);
    color: var(--tb-teal-ink);
}

.tb-directory-filter .tb-category svg {
    flex: none;
    color: var(--tb-teal-ui);
}

.tb-directory-filter .tb-category:hover {
    background: var(--tb-teal-tint);
    border-color: var(--tb-teal-ui);
    color: var(--tb-teal-ink);
}

.tb-directory-filter .tb-category.active {
    background: var(--tb-teal-fill);
    border-color: var(--tb-teal-fill);
    color: var(--tb-teal-fill-text);
}

.tb-directory-filter .tb-category.active svg {
    color: currentColor;
}

.tb-directory-filter .tb-category:disabled {
    opacity: 0.5;
    cursor: default;
}

/* The speciality under the name, on one line as legacy's table. */
.tb-directory-speciality {
    max-width: 420px;
    overflow: hidden;
    color: var(--tb-ink-muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tb-myblends .tb-directory-card .mud-table-body .mud-table-cell {
    height: 58px;
}

/* Update Directory: each qualification row has its own Remove. */
.tb-directory-qualification {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) 110px auto;
    align-items: center;
}

.tb-directory-submit {
    margin-top: 20px;
}

/* Phones: name and speciality on top, location and contact beneath, then View. Cells: 1 name, 2 location, 3 contact,
   4 actions. */
@media (max-width: 600px) {
    .tb-myblends .tb-directory-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(1) { grid-area: 1 / 1 / 2 / 4; white-space: normal; }
    .tb-myblends .tb-directory-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(2) { grid-area: 2 / 1; padding-left: 0; }
    .tb-myblends .tb-directory-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(2)::before { content: none; }
    .tb-myblends .tb-directory-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(3) { display: block; grid-area: 2 / 2 / 3 / 4; padding-left: 8px; }
    .tb-myblends .tb-directory-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(4) { display: block; grid-area: 3 / 1 / 4 / 4; padding-top: 8px; overflow: visible; }

    .tb-directory-speciality {
        max-width: none;
    }

    .tb-directory-tools > .tb-search {
        flex: 1 1 100%;
    }

    .tb-directory-qualification {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Pre-designed Blends: My Blends' ledger with legacy's introduction and category filter ---------- */

.tb-predesigned-intro {
    max-width: 760px;
    margin: 0;
    color: var(--tb-ink-muted);
    font-size: 13px;
    line-height: 1.6;
}

.tb-category-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tb-category {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px 0 8px;
    background: #fff;
    border: 1px solid var(--tb-line-strong);
    border-radius: 8px;
    color: var(--tb-ink-muted);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
}

.tb-category:hover {
    border-color: var(--slate-400);
    color: var(--tb-ink);
}

.tb-category.active {
    background: var(--tb-teal-tint);
    border-color: var(--tb-teal-ui);
    color: var(--tb-teal-ink);
    font-weight: 600;
}

.tb-category:focus-visible {
    outline: 2px solid var(--tb-teal-ink);
    outline-offset: 2px;
}

.tb-category img {
    width: 22px;
    height: 22px;
}

.tb-category-icons {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    vertical-align: middle;
}

/* Phones: name and price on top; product type and category icons beneath; then the actions.
   Cells: 1 name, 2 product type, 3 categories, 4 price, 5 actions. */
@media (max-width: 600px) {
    .tb-category {
        min-height: 44px;
    }

    .tb-myblends .tb-predesigned-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(1) { grid-area: 1 / 1 / 2 / 3; font-size: 13px; }
    .tb-myblends .tb-predesigned-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(2) { grid-area: 2 / 1; padding-left: 0; }
    .tb-myblends .tb-predesigned-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(2)::before { content: none; }
    .tb-myblends .tb-predesigned-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(3) { grid-area: 2 / 2 / 3 / 4; padding-left: 8px; }
    .tb-myblends .tb-predesigned-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(4) { display: block; grid-area: 1 / 3; padding-left: 10px; color: var(--tb-ink); font-size: 12.5px; font-weight: 500; text-align: right !important; }
    .tb-myblends .tb-predesigned-card.mud-xs-table .mud-table-body .mud-table-cell:nth-child(5) { grid-area: 3 / 1 / 4 / 4; padding: 8px 0 0; overflow: visible; text-align: left !important; }
}

/* A live page before it is live (js/before-live.js): a pressed button says it is connecting, at the width it already has,
   and one note explains why nothing else responds yet. The page itself keeps its normal look. */
button[data-connecting],
button[data-busy] {
    cursor: progress;
    -webkit-text-fill-color: transparent;
}

button[data-connecting] > *,
button[data-busy] > * {
    visibility: hidden;
}

button[data-connecting]::after,
button[data-busy]::after {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* The empty alternative keeps the word out of the button's name: the note says it to a screen reader, once. */
    content: attr(data-connecting);
    content: attr(data-connecting) / "";
    white-space: nowrap;
    -webkit-text-fill-color: currentColor;
}

/* A live button at work (design system: "Loading: preserve width and show a labelled progress indicator"). The same label over
   the button's own text as above, with a pulse as the indicator, which stops after three beats like the shimmer. Not dimmed,
   as a disabled button would be: this is the one thing on the page the customer needs to read. And aria-disabled, not
   disabled, which would throw away the focus of someone on a keyboard: the page's own check ignores a second press. The page
   keeps a status for screen readers, as with the shimmer. */
button[data-busy] {
    position: relative;
}

button[data-busy]::after {
    content: attr(data-busy);
    content: attr(data-busy) / "";
    animation: tb-busy-pulse calc(var(--dur-slower) * 2.5) ease-in-out 3;
}

/* Shallower than the shimmer's pulse, as this word has to stay readable all the way through. */
@keyframes tb-busy-pulse {
    50% {
        opacity: 0.7;
    }
}

@media (prefers-reduced-motion: reduce) {
    button[data-busy]::after {
        animation: none;
    }
}

.tb-connecting-note {
    position: fixed;
    z-index: 1500;
    top: 4.75rem;
    left: 50%;
    width: max-content;
    max-width: calc(100vw - 2.5rem);
    padding: 0.625rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-md);
    box-shadow: var(--tb-shadow-menu);
    color: var(--fg2);
    font-size: var(--type-body-xs);
    pointer-events: none;
    transform: translateX(-50%);
}

.tb-connecting-note:empty {
    display: none;
}

.tb-connecting-note a {
    display: inline-block;
    margin: -0.75rem 0;
    padding: 0.75rem 0.25rem;
    color: inherit;
    font-weight: 600;
    pointer-events: auto;
    text-decoration: underline;
}

/* The link in a live page's reload warning, the one thing left to use on the page. */
.tb-page-reload-link {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

.tb-connecting-note a:focus-visible,
.tb-page-reload-link:focus-visible {
    outline: 2px solid var(--tb-teal-ink);
    outline-offset: 2px;
    box-shadow: var(--tb-shadow-focus);
}

/* A link that is loading a whole new page (js/page-change.js). The link looks pressed at once. The bar is held back for the
   first 300 ms, like the shimmer, so a quick page change shows none, and then eases most of the way across and waits there: it
   stops short of the end because nothing here knows how long the rest will take. It sits over the page's top edge and only
   its opacity and transform change, so nothing on the page moves. */
a[data-page-pending] {
    cursor: progress;
    opacity: 0.7;
    transition: opacity var(--dur-fast) ease-out;
}

body[data-page-changing]::before {
    position: fixed;
    z-index: 1500;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: var(--tb-teal-accessible);
    content: "";
    pointer-events: none;
    transform-origin: left;
    animation:
        tb-page-bar-appear var(--dur-fast) ease-out var(--dur-base) backwards,
        tb-page-bar-grow calc(var(--dur-slower) * 10) var(--ease-out) var(--dur-base) both;
}

@keyframes tb-page-bar-appear {
    from {
        opacity: 0;
    }
}

@keyframes tb-page-bar-grow {
    from {
        transform: scaleX(0.08);
    }

    to {
        transform: scaleX(0.9);
    }
}

/* Reduced motion: the same wait, then a still bar right across. */
@media (prefers-reduced-motion: reduce) {
    a[data-page-pending] {
        transition: none;
    }

    body[data-page-changing]::before {
        animation: tb-page-bar-appear 1ms linear var(--dur-base) backwards;
    }
}