/* Create page (blend builder) in Kirsten's final design: three panels on a desktop, with the ingredient list scrolling
   with the page and the centre and right panels pinned; three tabs on a phone, with a sticky price bar. Shares tokens
   with customer.css. */

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

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

/* The top bar: eyebrow, the blend's name and Reset. */
.tb-create-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--tb-line);
}

.tb-create-top-text {
    display: flex;
    flex: 1 1 360px;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

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

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

/* The page's heading, for screen readers only: the name is typed in the field beneath it. */
.tb-create-page-name {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.tb-create-name {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 560px;
    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 {
    color: var(--tb-teal-ink);
    font-size: 12px;
    font-weight: 600;
}

.tb-create-reset {
    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 {
    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: 12px;
    align-items: start;
    padding: 12px;
}

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

/* The centre and right panels stay in view while the ingredient list scrolls with the page. */
.tb-create-middle,
.tb-create-right {
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    scrollbar-width: thin;
}

.tb-create-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--tb-line);
    border-radius: 8px;
    color: var(--tb-ink);
    font-size: 12.5px;
}

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

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

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

.tb-create-step.light {
    background: #fff;
    color: #1F1F1F;
}

.tb-create-template {
    margin-left: auto;
    color: var(--tb-teal-ink);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

/* 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: 16px 16px 10px;
}

.tb-create-library-tools {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 16px 12px;
    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: 5px;
}

.tb-chip {
    padding: 5px 10px;
    background: var(--slate-100);
    border: 0;
    border-radius: 8px;
    color: var(--tb-ink-muted);
    font: inherit;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}

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

.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: 11px 16px;
    background: #F7F7F5;
    border: 0;
    border-left: 3px solid #1F1F1F;
    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 28px;
    gap: 10px;
    align-items: center;
    padding: 7px 16px;
}

.tb-create-row:hover {
    background: var(--slate-50);
}

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

/* 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.selected .tb-create-row-name {
    color: var(--tb-teal-ink);
}

.tb-create-row-price {
    color: var(--slate-500);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.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: 28px;
    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;
}

.tb-create-row-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: #fff;
    border: 1px solid var(--tb-line);
    border-radius: 50%;
    color: var(--tb-ink-soft);
    cursor: pointer;
}

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

.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. */
.tb-create-card.tb-create-info-panel {
    gap: 0;
    min-height: 420px;
    padding: 0;
}

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

.tb-create-ingredient-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--tb-line-soft);
}

.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: 20px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.tb-create-ingredient-price span {
    color: var(--slate-500);
    font-size: 11px;
}

.tb-create-dose-block {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 22px 18px;
    background: #F7F7F5;
    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: 9px;
    right: 10px;
    left: 10px;
    height: 4px;
    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: 9px;
    left: 10px;
    width: calc((100% - 20px) * var(--tb-dose) / 100%);
    height: 4px;
    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(--tb-ink-soft);
    border: 2px solid #fff;
    border-radius: 50%;
    transform: translateX(-50%);
}

.tb-create-slider-handle {
    top: 1px;
    left: calc(10px + (100% - 20px) * var(--tb-dose) / 100%);
    width: 20px;
    height: 20px;
    background: #fff;
    border: 2px solid var(--tb-teal-ui);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    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;
    z-index: 40;
    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,
.tb-create-send:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

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

.tb-create-save-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 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);
}

/* Practitioners: save, add to cart and send from the practitioner checkout. */
.tb-create-send {
    height: 34px;
    margin-top: -6px;
    background: transparent;
    border: 0;
    color: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

/* What stops the blend going on, over whichever panel or tab is in view. */
.tb-create-problems {
    position: fixed;
    bottom: 24px;
    left: 50%;
    z-index: 50;
    width: min(420px, calc(100vw - 32px));
    margin: 0;
    padding: 12px 16px 12px 32px;
    background: #fdecea;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    color: #8a1c13;
    font-size: 12.5px;
    transform: translateX(-50%);
}

/* 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 three tabs, one panel at a time, with the price bar. Everything to press is at least 44px. */
@media (max-width: 999.98px) {
    .tb-create-top {
        padding: 16px;
    }

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

    .tb-create-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        background: #fff;
        border-bottom: 1px solid var(--tb-line);
    }

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

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

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

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

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

    .tb-create-column {
        display: none;
    }

    .tb-create[data-tab="build"] .tb-create-left,
    .tb-create[data-tab="info"] .tb-create-middle,
    .tb-create[data-tab="blend"] .tb-create-right {
        display: flex;
    }

    .tb-create-card.tb-create-info-panel {
        min-height: 240px;
    }

    .tb-create-reset,
    .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 {
        grid-template-columns: minmax(0, 1fr) auto 44px;
        gap: 6px;
        padding: 2px 8px 2px 16px;
    }

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

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

    .tb-create-row-toggle {
        position: relative;
        width: 44px;
        height: 44px;
        background: none;
        border: 0;
    }

    /* The design's small circle, inside a 44px button. */
    .tb-create-row-toggle::before {
        content: "";
        position: absolute;
        inset: 9px;
        border: 1px solid var(--tb-line);
        border-radius: 50%;
    }

    .tb-create-row-toggle.added:hover {
        background: none;
        color: inherit;
    }

    .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-send {
        min-height: 44px;
    }

    .tb-create-template {
        padding: 12px 0;
    }

    .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: 12px;
        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 {
        flex: none;
        height: 44px;
    }

    /* Above the price bar. */
    .tb-create-problems {
        bottom: 84px;
    }
}

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