/* Create page (blend builder) in Kirsten's V2 design: three panels on a desktop, with the ingredient list scrolling
   with the page and the centre and right panels pinned; four tabs on a phone, with a sticky price bar and ingredient
   information in a pop-up from the bottom. Borderless cards with a soft shadow on a white page. Shares tokens with
   customer.css. */

.tb-customer-main:has(.tb-create) {
    background: #fff;
}

.tb-create {
    display: flex;
    flex-direction: column;
}

/* The page header (eyebrow, heading, sentence and Reset), then the blend's name about 28px below the sentence. */
.tb-create-top {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px 24px 20px;
}

/* Room on the right for Reset, which a desktop puts at the header's bottom right. */
.tb-create-top-text {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding-right: 120px;
}

.tb-create-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

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

/* The small capitals over an ingredient's or option's name in the centre panel. */
.tb-create-eyebrow {
    color: var(--tb-teal-ink);
    font-size: var(--tb-eyebrow-size);
    font-weight: 700;
    letter-spacing: var(--tb-eyebrow-tracking);
    text-transform: uppercase;
}

.tb-create-name {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 560px;
    margin-top: 10px;
    padding-bottom: 3px;
    border-bottom: 1.5px dashed var(--tb-line);
    color: var(--slate-400);
}

.tb-create-name input {
    flex: 1;
    min-width: 0;
    padding: 0;
    background: none;
    border: 0;
    outline: none;
    color: var(--tb-ink);
    font: inherit;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.25;
    text-transform: uppercase;
}

.tb-create-name input::placeholder {
    color: var(--slate-500);
    opacity: 1;
}

.tb-create-name:focus-within {
    border-bottom-color: var(--tb-teal-ui);
}

/* A missing name: two classes taking turns, so that each press shakes it again. */
.tb-create-name.nudge-0,
.tb-create-name.nudge-1 {
    border-bottom-color: var(--tb-teal-ui);
    box-shadow: 0 6px 0 -3px rgba(91, 191, 179, 0.35);
}

.tb-create-name.nudge-0 {
    animation: tb-create-shake-a 450ms ease-in-out;
}

.tb-create-name.nudge-1 {
    animation: tb-create-shake-b 450ms ease-in-out;
}

@keyframes tb-create-shake-a {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

@keyframes tb-create-shake-b {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
    .tb-create-name.nudge-0,
    .tb-create-name.nudge-1 {
        animation: none;
    }
}

.tb-create-name-message {
    margin-top: -12px;
    color: var(--tb-teal-ink);
    font-size: 12px;
    font-weight: 600;
}

.tb-create-reset {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    flex: none;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #fff;
    border: 1px solid var(--tb-line);
    border-radius: 8px;
    color: var(--tb-ink-soft);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

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

.tb-create-tabs,
.tb-create-next,
.tb-create-sheet-head,
.tb-create-sheet-backdrop {
    display: none;
}

.tb-create-notices {
    margin: 12px 12px 0;
    padding: 10px 12px 10px 28px;
    background: var(--tb-teal-tint);
    border-radius: 8px;
    color: var(--tb-teal-ink);
    font-size: 12px;
}

.tb-create-grid {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) minmax(0, 1.6fr) minmax(300px, 1fr);
    gap: 24px;
    align-items: start;
    padding: 8px 24px 24px;
}

.tb-create-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

/* The centre and right panels stay in view, below the header, while the ingredient list scrolls with the page. They
   scroll on their own, with a little room inside so the cards' shadows are not cut off. */
.tb-create-middle,
.tb-create-right {
    position: sticky;
    top: calc(var(--tb-nav-height) + 12px);
    box-sizing: content-box;
    max-height: calc(100vh - var(--tb-nav-height) - 46px);
    margin: -6px -8px -16px;
    padding: 6px 8px 16px;
    overflow-y: auto;
    scrollbar-width: thin;
}

/* No border: a very faint outline and a soft shadow show the edge on all four sides. */
.tb-create-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    background: #fff;
    border: 0;
    border-radius: 8px;
    box-shadow: 0 0 0 1px rgba(31, 31, 31, 0.07), 0 2px 6px rgba(31, 31, 31, 0.06), 0 12px 28px -10px rgba(31, 31, 31, 0.16);
    color: var(--tb-ink);
    font-size: 12.5px;
}

.tb-create-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tb-create-card-title h2 {
    margin: 0;
    color: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
}

.tb-create-step {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, #2E2E2E, #1F1F1F);
    border-radius: 50%;
    color: #fff;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

/* Step 4, a small white circle on the charcoal price card. */
.tb-create-step.light {
    width: 22px;
    height: 22px;
    background: #fff;
    color: #1F1F1F;
    font-size: 11px;
}

/* 1. Product options. */
.tb-create-option {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin: 0;
}

.tb-create-option > span {
    color: var(--tb-ink-muted);
    font-size: 11.5px;
    font-weight: 600;
}

.tb-create-option select {
    width: 100%;
    height: 36px;
    padding: 0 10px;
    background-color: #fff;
    border: 1px solid var(--tb-line);
    border-radius: 8px;
    color: var(--tb-ink);
    font: inherit;
    font-size: 12.5px;
}

.tb-create-option select.shown,
.tb-create-option select:focus {
    border-color: var(--tb-teal-ui);
    outline: none;
}

/* 2. Ingredients. */
.tb-create-card.tb-create-ingredients {
    gap: 0;
    padding: 0;
}

.tb-create-ingredients > .tb-create-card-title {
    padding: 24px 24px 12px;
}

.tb-create-library-tools {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 24px 16px;
    border-bottom: 1px solid var(--tb-line-soft);
}

.tb-create-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    margin: 0;
    padding: 0 12px;
    background: var(--tb-bg-muted);
    border-radius: 8px;
    color: var(--slate-500);
}

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

.tb-create-search input::placeholder {
    color: var(--slate-500);
    opacity: 1;
}

.tb-create-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Health filters and categories: white pills with a grey outline that turn teal on hover, brand teal when chosen. */
.tb-chip {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 13px;
    background: #fff;
    border: 1px solid var(--tb-line-strong);
    border-radius: 9999px;
    color: var(--tb-ink-soft);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.tb-chip:not(.active):hover {
    border-color: var(--tb-teal-ui);
    color: var(--tb-teal-ink);
}

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

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

.tb-create-group {
    border-bottom: 1px solid var(--tb-line-soft);
}

/* The library card has no side padding of its own; its rows bring theirs, and so does its loading shimmer. */
.tb-create-shimmer-library {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 18px 12px;
}

.tb-create-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 12px 24px;
    background: #F7F7F5;
    border: 0;
    border-left: 3px solid var(--tb-teal-ui);
    color: var(--slate-500);
    font: inherit;
    cursor: pointer;
}

.tb-create-group-head > span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--tb-ink);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.tb-create-group-head svg {
    transition: transform 200ms ease-out;
}

.tb-create-group-head.open svg {
    transform: rotate(180deg);
}

.tb-create-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #fff;
    border: 1px solid var(--tb-line);
    border-radius: 9999px;
    color: var(--slate-500);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0;
}

.tb-create-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 32px;
    gap: 12px;
    align-items: center;
    padding: 7px 24px;
}

.tb-create-row:hover {
    background: #FAFAFA;
}

/* The ingredient in the centre panel. */
.tb-create-row.selected {
    background: var(--tb-teal-wash);
}

/* In the blend: a light teal tint with a teal edge. */
.tb-create-row.added,
.tb-create-row.added:hover {
    background: var(--tb-teal-tint);
    box-shadow: inset 3px 0 0 var(--tb-teal-ui);
}

/* Block, not MudBlazor's centred inline-flex for buttons, so the name sits on the left and can be cut short. */
.tb-create-row-name {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    background: none;
    border: 0;
    color: var(--tb-ink);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    text-align: left;
    text-decoration: underline;
    text-decoration-color: var(--tb-line);
    text-overflow: ellipsis;
    text-underline-offset: 3px;
    white-space: nowrap;
    cursor: pointer;
}

.tb-create-row.added .tb-create-row-name,
.tb-create-row.selected .tb-create-row-name {
    font-weight: 600;
}

.tb-create-row.selected .tb-create-row-name {
    color: var(--tb-teal-ink);
}

/* The price's dotted underline says it has a hover tip, which says what the price covers. */
.tb-create-row-price {
    position: relative;
    border-bottom: 1px dotted var(--tb-line-strong);
    color: var(--slate-500);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    cursor: help;
}

.tb-create-row-price::after {
    content: attr(data-tip);
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 20;
    padding: 7px 10px;
    background: #1F1F1F;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateY(2px);
    transition: opacity 120ms ease, transform 120ms ease;
}

.tb-create-row-price:hover::after,
.tb-create-row-price:focus-visible::after {
    opacity: 1;
    transform: none;
}

.tb-create-row-price:focus-visible {
    outline: none;
    color: var(--tb-teal-ink);
}

.tb-create-row-dose {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--tb-ink-muted);
    font-size: 11px;
    font-weight: 600;
}

.tb-create-row-dose input {
    width: 52px;
    height: 30px;
    padding: 0 6px;
    background: #fff;
    border: 1px solid var(--tb-teal-ui);
    border-radius: 6px;
    color: var(--tb-ink);
    font: inherit;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    text-align: right;
}

.tb-create-row-dose > span {
    min-width: 20px;
}

/* + in a teal outline, filling teal on hover. Added, a teal circle with a tick, which hovering turns into a charcoal ×. */
.tb-create-row-toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: #fff;
    border: 1.5px solid var(--tb-teal-ui);
    border-radius: 50%;
    color: var(--tb-teal-ink);
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.tb-create-row-toggle.added {
    background: var(--tb-teal-ui);
    color: #fff;
}

.tb-create-row-toggle .tb-create-cross {
    display: none;
}

.tb-create-row-toggle:focus-visible {
    outline: 2px solid var(--tb-teal-ui);
    outline-offset: 2px;
}

@media (hover: hover) {
    .tb-create-row-toggle:not(.added):hover {
        background: var(--tb-teal-ui);
        color: #fff;
    }

    .tb-create-row-toggle.added:hover {
        background: #1F1F1F;
        border-color: #1F1F1F;
    }

    .tb-create-row-toggle.added:hover .tb-create-tick {
        display: none;
    }

    .tb-create-row-toggle.added:hover .tb-create-cross {
        display: block;
    }
}

.tb-create-row-toggle.added:focus-visible .tb-create-tick {
    display: none;
}

.tb-create-row-toggle.added:focus-visible .tb-create-cross {
    display: block;
}

.tb-create-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tb-create-empty {
    margin: 0;
    padding: 28px 16px;
    color: var(--slate-500);
    font-size: 12.5px;
    text-align: center;
}

/* 3. Blend details. */
.tb-create-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    margin: 0;
}

.tb-create-field > span,
.tb-create-field-label {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: var(--tb-ink-muted);
    font-size: 11px;
    font-weight: 600;
}

.tb-create-field-label .tb-muted {
    font-weight: 500;
}

.tb-create-field input,
.tb-create-field textarea {
    width: 100%;
    padding: 0 12px;
    background: #fff;
    border: 1px solid var(--tb-line);
    border-radius: 8px;
    color: var(--tb-ink);
    font: inherit;
    font-size: 12.5px;
    outline: none;
}

.tb-create-field input {
    height: 36px;
}

.tb-create-field textarea {
    display: block;
    min-height: 36px;
    padding: 8px 12px;
    line-height: 1.4;
    resize: vertical;
    field-sizing: content;
}

.tb-create-field input::placeholder {
    color: var(--slate-500);
    opacity: 1;
}

.tb-create-field input:focus,
.tb-create-field textarea:focus {
    border-color: var(--tb-teal-ui);
}

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

/* The centre panel's information. flex: none keeps it its full height, so the centre column scrolls to its last line
   (check 16): the overflow that rounds its corners otherwise lets the column shrink it and cut the rest off. */
.tb-create-card.tb-create-info-panel {
    flex: none;
    gap: 0;
    min-height: 420px;
    padding: 0;
    overflow: hidden;
}

.tb-create-info-empty {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 32px;
    text-align: center;
}

.tb-create-info-empty span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--tb-bg-muted);
    border-radius: 50%;
    color: var(--slate-500);
}

.tb-create-info-empty p {
    max-width: 380px;
    margin: 0;
    color: var(--slate-500);
    font-size: 13px;
    line-height: 1.6;
}

.tb-create-choice {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px 22px;
}

.tb-create-choice h3,
.tb-create-ingredient-head h3 {
    margin: 0;
    color: var(--tb-ink);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: normal;
    line-height: 1.25;
    text-transform: none;
}

.tb-create-choice h3 {
    margin-bottom: 10px;
}

.tb-create-choice-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
    padding: 14px 16px;
    border: 1px solid var(--tb-line);
    border-radius: 8px;
    color: var(--tb-ink-muted);
    font-size: 12.5px;
    line-height: 1.65;
}

.tb-create-choice-item.selected {
    background: var(--tb-teal-tint);
    border-color: var(--tb-teal-ui);
}

.tb-create-choice-item p:last-child {
    margin-bottom: 0;
}

.tb-create-choice-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--tb-ink);
    font-size: 14px;
    font-weight: 600;
}

.tb-create-choice-selected {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--tb-teal-ink);
    font-size: 11.5px;
    font-weight: 700;
}

.tb-create-choice-head button {
    padding: 7px 14px;
    background: #fff;
    border: 1px solid var(--tb-teal-ui);
    border-radius: 8px;
    color: var(--tb-teal-ink);
    font: inherit;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

/* An ingredient's teal header: group, name and price in white. */
.tb-create-ingredient-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px 20px;
    background: var(--tb-teal-ui);
    color: #fff;
}

.tb-create-ingredient-head .tb-create-eyebrow {
    color: rgba(255, 255, 255, 0.85);
    font-size: 10px;
    letter-spacing: 0.2em;
}

.tb-create-ingredient-head h3 {
    color: #fff;
    font-size: 22px;
}

.tb-create-ingredient-head > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.tb-create-ingredient-price {
    display: flex;
    margin-left: auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.tb-create-ingredient-price strong {
    font-size: 22px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.tb-create-ingredient-price span {
    color: rgba(255, 255, 255, 0.85);
    font-size: 11.5px;
}

.tb-create-dose-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 24px 22px;
    background: #fff;
    border-bottom: 1px solid var(--tb-line-soft);
}

.tb-create-dose-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tb-create-dose-top > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tb-create-dose-top > div span {
    color: var(--tb-ink-muted);
    font-size: 11px;
    font-weight: 600;
}

.tb-create-dose-top strong {
    font-size: 20px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.tb-create-dose-add,
.tb-create-dose-remove {
    padding: 10px 20px;
    border-radius: 8px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.tb-create-dose-add {
    background: var(--tb-teal-fill);
    border: 1px solid var(--tb-teal-fill);
    color: var(--tb-teal-fill-text);
}

.tb-create-dose-remove {
    background: #fff;
    border: 1px solid var(--tb-line);
    color: var(--tb-ink);
}

/* The dose slider: the marks are drawn from the page's percentages, with the real slider over them, unseen, for dragging
   and the keyboard. Its 20px thumb centre travels from 10px in on each side, so the marks do too. */
.tb-create-slider-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}

.tb-create-slider-row > span {
    color: var(--slate-500);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tb-create-slider {
    position: relative;
    height: 22px;
}

.tb-create-slider > div {
    position: absolute;
    pointer-events: none;
}

.tb-create-slider-track {
    top: 8px;
    right: 10px;
    left: 10px;
    height: 6px;
    background: var(--tb-line);
    border-radius: 9999px;
}

.tb-create-slider-type {
    top: 10px;
    left: 10px;
    width: calc((100% - 20px) * var(--tb-type-maximum) / 100%);
    height: 2px;
    background: var(--slate-500);
}

.tb-create-slider-fill {
    top: 8px;
    left: 10px;
    width: calc((100% - 20px) * var(--tb-dose) / 100%);
    height: 6px;
    background: var(--tb-teal-ui);
    border-radius: 9999px;
}

.tb-create-slider-recommended {
    top: 5px;
    left: calc(10px + (100% - 20px) * var(--tb-recommended) / 100%);
    width: 12px;
    height: 12px;
    background: var(--slate-700);
    border: 2px solid #fff;
    border-radius: 50%;
    transform: translateX(-50%);
}

.tb-create-slider-handle {
    top: 0;
    left: calc(10px + (100% - 20px) * var(--tb-dose) / 100%);
    width: 22px;
    height: 22px;
    background: var(--tb-teal-ui);
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    transform: translateX(-50%);
}

.tb-create-slider input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 22px;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}

.tb-create-slider input::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
}

.tb-create-slider input::-moz-range-thumb {
    width: 20px;
    height: 20px;
}

.tb-create-slider:has(input:focus-visible) .tb-create-slider-handle {
    outline: 2px solid var(--tb-teal-ink);
    outline-offset: 2px;
}

.tb-create-slider-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 12px;
    color: var(--slate-500);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.tb-create-slider-legend span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tb-create-legend-dot {
    width: 8px;
    height: 8px;
    background: var(--tb-ink-soft);
    border-radius: 50%;
}

.tb-create-legend-line {
    width: 14px;
    height: 2px;
    background: var(--slate-500);
}

.tb-create-ingredient-notes:not(:empty) {
    padding: 14px 22px 0;
    color: var(--tb-ink-muted);
    font-size: 12.5px;
}

.tb-create-ingredient-notes p {
    margin: 0 0 8px;
}

.tb-create-info-note {
    padding: 10px 12px;
    background: var(--tb-teal-tint);
    border-radius: 8px;
}

.tb-create-ingredient-companions {
    padding: 10px 22px 14px;
    border-bottom: 1px solid var(--tb-line-soft);
}

.tb-create-ingredient-companions h4 {
    margin: 0 0 6px;
    color: var(--tb-ink);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
}

.tb-create-companions {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tb-create-companions li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 64px;
    gap: 10px;
    align-items: center;
    padding: 6px 0;
    border-top: 1px solid var(--tb-line-soft);
}

.tb-create-dose {
    color: var(--slate-500);
    font-size: 11px;
    white-space: nowrap;
}

.tb-create-companions button {
    height: 28px;
    padding: 0 12px;
    background: #fff;
    border: 1px solid var(--tb-teal-ui);
    border-radius: 8px;
    color: var(--tb-ink);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.tb-create-companion-added {
    color: var(--tb-teal-ink);
    font-size: 11.5px;
    font-weight: 600;
    text-align: center;
}

.tb-create-ingredient-message {
    margin: 0;
    padding: 16px 22px;
}

.tb-create-section {
    border-bottom: 1px solid var(--tb-line-soft);
}

.tb-create-section summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 22px;
    color: var(--tb-ink-soft);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    list-style: none;
    text-transform: uppercase;
    cursor: pointer;
}

.tb-create-section summary::-webkit-details-marker {
    display: none;
}

.tb-create-section summary svg {
    flex: none;
    color: var(--slate-500);
    transition: transform 200ms ease-out;
}

.tb-create-section[open] summary {
    color: var(--tb-teal-ink);
}

.tb-create-section[open] summary svg {
    transform: rotate(180deg);
}

.tb-create-section-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 22px 16px;
    color: var(--tb-ink-muted);
    font-size: 13px;
    line-height: 1.65;
}

.tb-create-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tb-create-benefits span {
    padding: 5px 11px;
    background: var(--tb-teal-tint);
    border-radius: 9999px;
    color: var(--tb-teal-ink);
    font-size: 11.5px;
    font-weight: 600;
}

/* 4. Your blend: the charcoal card. */
.tb-create-summary {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    background: linear-gradient(160deg, #2E2E2E, #1F1F1F);
    border-radius: 8px;
    color: #fff;
}

.tb-create-price {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.tb-create-price > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tb-create-price strong {
    font-size: 30px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
}

.tb-create-price > div span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
}

.tb-create-per-serving {
    color: var(--tb-teal-ui);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    text-align: right;
}

.tb-create-servings {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 12.5px;
    font-weight: 600;
}

.tb-create-servings > div {
    display: flex;
    align-items: center;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
}

.tb-create-servings button {
    width: 34px;
    height: 32px;
    padding: 0;
    background: none;
    border: 0;
    color: #fff;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.tb-create-servings button:disabled {
    opacity: 0.35;
    cursor: default;
}

.tb-create-servings > div > span {
    min-width: 32px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.tb-create-impact {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.tb-create-impact-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tb-create-impact-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
}

.tb-create-impact-tip-wrap {
    display: flex;
}

.tb-create-impact-tip-wrap button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.8);
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    cursor: help;
}

/* The wide pop-out: on hover, or on a tap, which also suits a phone. */
.tb-create-impact-tip {
    position: absolute;
    right: 18px;
    left: 18px;
    /* Under the header (40), which a phone's open tip would otherwise cover as the page scrolls. */
    z-index: 30;
    display: none;
    margin-top: 24px;
    padding: 14px 16px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
    color: var(--tb-ink-soft);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.6;
}

.tb-create-impact-tip strong {
    display: block;
    margin-bottom: 4px;
    color: var(--tb-ink);
    font-weight: 700;
}

.tb-create-impact-tip.open,
.tb-create-impact-tip-wrap:hover .tb-create-impact-tip {
    display: block;
}

.tb-create-impact-level {
    font-size: 11.5px;
    font-weight: 700;
}

.tb-create-impact-level.low { color: var(--tb-teal-ui); }
.tb-create-impact-level.medium { color: #E9B44C; }
.tb-create-impact-level.high { color: #F2A19A; }

.tb-create-impact-meter {
    height: 6px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 9999px;
}

.tb-create-impact-meter span {
    display: block;
    height: 100%;
    border-radius: 9999px;
    transition: width 300ms ease-out;
}

.tb-create-impact-meter.low span { background: var(--tb-teal-ui); }
.tb-create-impact-meter.medium span { background: #E9B44C; }
.tb-create-impact-meter.high span { background: #F2A19A; }

@media (prefers-reduced-motion: reduce) {
    .tb-create-impact-meter span {
        transition: none;
    }
}

/* "Updating" during a recalculation, beside the price it does not replace. Timed as the shimmer is (shimmer.css): nothing for
   the first 300 ms, then a slow fade, so a quick answer shows nothing and one soon after shows only a faint word. It takes
   no space, so the price never moves. */
.tb-create-updating {
    position: absolute;
    margin-left: 6px;
    color: var(--tb-teal-ink);
    white-space: nowrap;
    animation: tb-shimmer-appear var(--dur-base) ease-in 300ms backwards;
}

@media (prefers-reduced-motion: reduce) {
    .tb-create-updating {
        animation-duration: 1ms;
    }
}

.tb-create-summary-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.tb-create-summary-facts div {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.tb-create-summary-facts strong {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.tb-create-summary-facts span {
    color: rgba(255, 255, 255, 0.6);
    font-size: 10.5px;
}

.tb-create-summary-actions {
    display: flex;
    gap: 8px;
}

.tb-create-cart {
    flex: 1;
    height: 46px;
    padding: 0 20px;
    background: var(--tb-teal-fill);
    border: 0;
    border-radius: 8px;
    color: var(--tb-teal-fill-text);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.tb-create-cart:hover:not(:disabled) {
    background: #3A9E92;
}

.tb-create-save {
    height: 46px;
    padding: 0 18px;
    background: #fff;
    border: 0;
    border-radius: 8px;
    color: #1F1F1F;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.tb-create-cart:disabled,
.tb-create-save:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.tb-create-save-wrap {
    position: relative;
}

/* Covers the page behind the open Save menu, so a click anywhere else closes it. Under the menu (20). */
.tb-create-save-away {
    position: fixed;
    inset: 0;
    z-index: 19;
    padding: 0;
    background: none;
    border: 0;
    cursor: default;
}

/* Under Save, lined up with its left edge. */
.tb-create-save-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    min-width: 200px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--tb-line);
    border-radius: 8px;
    box-shadow: var(--tb-shadow-menu);
}

.tb-create-save-menu button {
    padding: 10px 12px;
    background: none;
    border: 0;
    border-radius: 6px;
    color: var(--tb-ink);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.tb-create-save-menu button:hover {
    background: var(--tb-bg-muted);
}

/* In this blend. */
.tb-create-card.tb-create-in-blend {
    gap: 0;
    padding: 0;
}

.tb-create-in-blend-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--tb-line-soft);
    color: var(--slate-500);
    font-size: 11.5px;
}

.tb-create-in-blend-head h2 {
    margin: 0;
    color: var(--tb-ink);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
}

.tb-create-in-blend-head h2 span {
    color: var(--slate-500);
    font-weight: 500;
}

.tb-create-in-blend-empty {
    margin: 0;
    padding: 24px 16px;
    color: var(--slate-500);
    font-size: 12.5px;
    line-height: 1.55;
    text-align: center;
}

.tb-create-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 24px;
    gap: 10px;
    align-items: center;
    padding: 9px 12px 9px 16px;
    border-bottom: 1px solid var(--tb-line-soft);
}

.tb-create-item:last-child {
    border-bottom: 0;
}

.tb-create-item.selected {
    background: var(--tb-teal-tint);
}

.tb-create-item-name {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 0;
    background: none;
    border: 0;
    color: var(--tb-ink);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}

.tb-create-item-dose {
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

.tb-create-item-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 50%;
    color: var(--slate-500);
    cursor: pointer;
}

.tb-create-item-remove:hover {
    background: #1F1F1F;
    color: #fff;
}

/* Nutrition and Label. */
.tb-create-card.tb-create-preview {
    gap: 0;
    padding: 0;
}

.tb-create-pills {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    margin: 12px 12px 4px;
    padding: 4px;
    background: var(--tb-bg-muted);
    border-radius: 9999px;
}

.tb-create-pills button {
    padding: 10px 0;
    background: none;
    border: 0;
    border-radius: 9999px;
    color: var(--tb-ink-muted);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
}

.tb-create-pills button.active {
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    color: var(--tb-ink);
    font-weight: 600;
}

.tb-create-preview-wait {
    margin: 0;
    padding: 12px 16px;
}

.tb-create-nutrition {
    padding: 6px 16px 12px;
}

.tb-create-nutrition-head,
.tb-create-nutrition-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(72px, auto);
    gap: 4px 12px;
    align-items: baseline;
    padding: 5px 0;
    border-bottom: 1px solid var(--tb-line-soft);
    font-variant-numeric: tabular-nums;
}

.tb-create-nutrition-head {
    padding: 6px 0;
    border-bottom-color: var(--tb-line);
    color: var(--slate-500);
    font-size: 10.5px;
    font-weight: 700;
}

.tb-create-nutrition-row {
    font-size: 12px;
}

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

.tb-create-nutrition-row span:first-child {
    color: var(--tb-ink-soft);
}

.tb-create-nutrition-row span:nth-child(2) {
    color: var(--slate-500);
}

.tb-create-nutrition-row span:last-child {
    font-weight: 600;
}

.tb-create-nutrition-row.sub span:first-child {
    padding-left: 12px;
    color: var(--slate-500);
}

.tb-create-label {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px 16px;
    color: var(--tb-ink-soft);
    font-size: 12px;
    line-height: 1.55;
}

.tb-create-label strong {
    color: var(--tb-ink);
    font-weight: 700;
}

.tb-create-bottom-bar {
    display: none;
}

/* Narrower laptops: the details fields stack, as the design does. */
@media (max-width: 1199.98px) {
    .tb-create-details-pair {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Tablets and phones: the four tabs, one card at a time, a Next link, swipes and the price bar; an ingredient's
   information is a pop-up from the bottom. Everything to press is at least 44px. */
@media (max-width: 999.98px) {
    .tb-create-top {
        padding: 20px 16px 16px;
    }

    /* The sentence is hidden, so the name and the cards sit higher; Reset is smaller, beside the heading. */
    .tb-create-top .tb-page-lead {
        display: none;
    }

    .tb-create-top-text {
        padding-right: 0;
    }

    .tb-create-title-row .tb-create-reset {
        position: relative;
        gap: 5px;
        padding: 6px 10px;
        font-size: 11px;
    }

    .tb-create-title-row .tb-create-reset svg {
        width: 12px;
        height: 12px;
    }

    /* A 44px target around the small button. */
    .tb-create-title-row .tb-create-reset::after {
        content: "";
        position: absolute;
        inset: -6px;
    }

    .tb-create-name input {
        font-size: 18px;
    }

    .tb-create-tabs {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        background: #fff;
        box-shadow: 0 1px 0 var(--tb-line);
    }

    .tb-create-tabs button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-height: 44px;
        padding: 12px 2px 10px;
        background: none;
        border: 0;
        border-bottom: 2px solid transparent;
        color: var(--slate-500);
        font: inherit;
        font-size: 11px;
        font-weight: 500;
        white-space: nowrap;
        cursor: pointer;
    }

    .tb-create-tabs button span {
        display: flex;
        flex: none;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        background: var(--slate-300);
        border-radius: 50%;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
    }

    /* "Next: Ingredients →", under the tabs and above the card. */
    .tb-create-next {
        display: flex;
        align-items: center;
        align-self: flex-end;
        gap: 6px;
        min-height: 44px;
        padding: 0 16px;
        background: none;
        border: 0;
        color: var(--tb-teal-ink);
        font: inherit;
        font-size: 12.5px;
        font-weight: 700;
        white-space: nowrap;
        cursor: pointer;
    }

    .tb-create-tabs button[aria-selected="true"] {
        border-bottom-color: #1F1F1F;
        color: var(--tb-ink);
        font-weight: 700;
    }

    .tb-create-tabs button[aria-selected="true"] span {
        background: #1F1F1F;
    }

    /* Sideways moves are the page's swipes between tabs; up and down still scroll, and a pinch still zooms. */
    .tb-create-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        padding: 14px;
        touch-action: pan-y pinch-zoom;
    }

    .tb-create-column {
        gap: 14px;
    }

    .tb-create-middle,
    .tb-create-right {
        position: static;
        max-height: none;
        margin: 0;
        padding: 0;
        overflow: visible;
    }

    .tb-create-card {
        padding: 18px;
    }

    .tb-create-ingredients > .tb-create-card-title {
        padding: 18px 18px 12px;
    }

    .tb-create-library-tools {
        padding: 0 18px 16px;
    }

    .tb-create-group-head {
        padding: 12px 18px;
    }

    /* One card at a time: Options, Ingredients, Details or Label. */
    .tb-create-column,
    .tb-create[data-tab="options"] .tb-create-ingredients,
    .tb-create[data-tab="ingredients"] .tb-create-options,
    .tb-create-details,
    .tb-create-info-panel,
    .tb-create-summary-actions {
        display: none;
    }

    .tb-create[data-tab="options"] .tb-create-left,
    .tb-create[data-tab="ingredients"] .tb-create-left,
    .tb-create[data-tab="label"] .tb-create-right,
    .tb-create[data-tab="details"] .tb-create-details {
        display: flex;
    }

    /* The centre column gives its cards to the grid: Details on its tab, the pop-up over any tab, and a product
       option's information under the Options card. */
    .tb-create[data-tab="details"] .tb-create-middle,
    .tb-create[data-sheet] .tb-create-middle,
    .tb-create[data-tab="options"][data-option] .tb-create-middle {
        display: contents;
    }

    .tb-create[data-tab="options"][data-option] .tb-create-info-panel {
        display: flex;
        min-height: 0;
    }

    .tb-create[data-sheet] .tb-create-info-panel {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1001;
        display: flex;
        max-height: 86vh;
        max-height: 86dvh;
        min-height: 0;
        padding-bottom: env(safe-area-inset-bottom);
        overflow-y: auto;
        overscroll-behavior: contain;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.25);
    }

    .tb-create-sheet-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1000;
        display: block;
        background: rgba(31, 31, 31, 0.45);
        touch-action: none;
    }

    /* The pop-up's handle and ✕, on the teal of the ingredient's header. */
    .tb-create-sheet-head {
        position: sticky;
        top: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 8px 12px 0;
        background: var(--tb-teal-ui);
        /* A pull on the head moves the whole pop-up (create-dialogs.js), not the content under it. */
        touch-action: none;
        cursor: grab;
    }

    .tb-create-sheet-head span {
        width: 40px;
        height: 4px;
        background: rgba(255, 255, 255, 0.6);
        border-radius: 9999px;
    }

    .tb-create-sheet-head button {
        position: relative;
        display: flex;
        align-self: flex-end;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        margin-top: -8px;
        padding: 0;
        background: rgba(255, 255, 255, 0.18);
        border: 0;
        border-radius: 50%;
        color: #fff;
        cursor: pointer;
    }

    .tb-create-sheet-head button::after {
        content: "";
        position: absolute;
        inset: -6px;
    }

    .tb-create-sheet-head + .tb-create-ingredient .tb-create-ingredient-head {
        padding-top: 4px;
    }

    .tb-create-option select,
    .tb-create-field input,
    .tb-create-search,
    .tb-chip,
    .tb-create-choice-head button,
    .tb-create-dose-add,
    .tb-create-dose-remove,
    .tb-create-pills button {
        min-height: 44px;
    }

    .tb-create-row {
        padding: 2px 18px;
    }

    .tb-create-row-name {
        min-height: 44px;
    }

    .tb-create-row-dose input {
        height: 40px;
    }

    /* A 44px target around the design's 32px circle. */
    .tb-create-row-toggle::after {
        content: "";
        position: absolute;
        inset: -6px;
    }

    .tb-create-item {
        grid-template-columns: minmax(0, 1fr) auto 44px;
        padding: 0 4px 0 16px;
    }

    .tb-create-item-name,
    .tb-create-item-remove {
        min-height: 44px;
    }

    .tb-create-item-remove {
        width: 44px;
        height: 44px;
    }

    .tb-create-item-remove:hover {
        background: none;
        color: var(--slate-500);
    }

    .tb-create-servings > div {
        height: 46px;
    }

    .tb-create-servings button {
        width: 44px;
        height: 44px;
    }

    .tb-create-impact-tip-wrap button {
        position: relative;
    }

    /* A 44px target around the small "i". */
    .tb-create-impact-tip-wrap button::after {
        content: "";
        position: absolute;
        inset: -14px;
    }

    .tb-create-section summary {
        min-height: 44px;
    }

    .tb-create-companions button {
        height: 44px;
    }

    .tb-create-bottom-bar {
        position: sticky;
        bottom: 0;
        z-index: 5;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        background: linear-gradient(160deg, #2E2E2E, #1F1F1F);
        color: #fff;
    }

    .tb-create-bottom-price {
        position: relative;
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 1px;
        min-width: 0;
        min-height: 44px;
        padding: 0;
        background: none;
        border: 0;
        color: #fff;
        font: inherit;
        text-align: left;
        cursor: pointer;
    }

    .tb-create-bottom-bar .tb-create-updating {
        bottom: 100%;
        left: 0;
        margin-left: 0;
        color: var(--tb-teal-ink);
    }

    .tb-create-bottom-price strong {
        font-size: 17px;
        font-variant-numeric: tabular-nums;
        font-weight: 600;
    }

    .tb-create-bottom-price span {
        color: rgba(255, 255, 255, 0.7);
        font-size: 10.5px;
    }

    .tb-create-bottom-bar .tb-create-cart,
    .tb-create-bottom-bar .tb-create-save {
        flex: none;
        height: 44px;
    }

    .tb-create-bottom-bar .tb-create-save {
        padding: 0 14px;
    }

    /* The bar's Save menu opens above it, lined up with Save's right edge so it stays on the screen. */
    .tb-create-bottom-bar .tb-create-save-menu {
        top: auto;
        right: 0;
        bottom: calc(100% + 8px);
        left: auto;
    }
}

/* Pop-ups (spec rows 8 to 11), on the shared dialog (tb-ledger-dialog). */
.tb-create-dialog {
    width: min(480px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    color: var(--tb-ink);
    font-size: 13px;
}

/* Focus moves to the pop-up itself when it opens (and to the page's heading when the control that opened it has gone);
   buttons keep their own focus ring. */
.tb-create-dialog:focus {
    outline: none;
}

.tb-create-dialog p {
    margin: 0 0 10px;
}

.tb-create-dialog h3 {
    margin: 18px 0 8px;
    font-size: 13px;
    font-weight: 600;
}

.tb-create-dialog-danger h2 {
    color: #B42318;
}

.tb-create-dialog-list {
    margin: 0;
    padding-left: 18px;
}

.tb-create-dialog-list li + li {
    margin-top: 6px;
}

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

.tb-create-dialog-actions button {
    height: 38px;
    padding: 0 18px;
    background: #fff;
    border: 1px solid var(--tb-teal-ui);
    border-radius: 8px;
    color: var(--tb-ink);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.tb-create-dialog-actions button.plain {
    border-color: transparent;
    color: var(--tb-ink-muted);
}

.tb-create-dialog-actions button.primary {
    background: var(--tb-teal-fill);
    border-color: var(--tb-teal-fill);
    color: var(--tb-teal-fill-text);
}