/* --------------------------------------------------------------------------
The "Pre-order" pill — one definition, four shells
--------------------------------------------------------------------------
Rendered by {% preorder_pill %} (shared/templatetags/preorder_pill.py) next
to the name of any hamper in the 2026-27 range, which is sold ahead of stock.
WHY ITS OWN FILE. The pill appears on the staff portal, the customer portal,
the storefront and the tracking portal, and those four shells share no CSS:
staff has .tgp-pill in styles.css, the customer portal has .portal-pill in
pages/portal/base.css, the storefront has its own token set, and none of them
import another. Writing the rule four times would let the same fact drift
into four appearances. There is no build step to dedupe it for us, so the
deduplication is a — this file is pulled into each shell's .
SELF-CONTAINED ON PURPOSE. Every value below is literal, not a var(): the
file is loaded into shells whose token names disagree (--text-muted vs
--portal-muted vs --sf-ink), so a token reference would resolve in one shell
and silently fall back to nothing in another. The metrics match .tgp-pill so
it sits correctly in a row of staff pills.
NOT BRAND-THEMED. Deliberately identical under [data-brand="tgp"] and
[data-brand="hwb"]: "this hamper is on pre-order" is the same fact on both,
and a pill that changed colour with the brand would read as a status.
NOT A TRAFFIC LIGHT. Pink sits outside the good/warn/bad family because a
pre-order is not a problem with the order — it is a property of the hamper.
Amber here would have staff triaging every 2026-27 line as if it needed
attention.
-------------------------------------------------------------------------- */
.preorder-pill {
display: inline-flex;
align-items: center;
/* Geometry copied from .pv-pill (pages/order-detail.css) rather than
.tgp-pill: .pv-pill is the shape this codebase already uses for a chip
sitting immediately after a hamper name on the order screen, and it is a
true 999px pill where .tgp-pill is a 3px rectangle. Noah asked for a pill. */
padding: 2px 8px;
border-radius: 999px;
font-family: inherit;
font-size: 0.6875rem;
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.03em;
/* #db2777 is the house pink by precedent — the account-tag hue in
pages/customer-manager.css. The tint/ink/border are derived from it the way
.cm-tag derives its own, so the pill reads as part of the same system; the
text is darkened to pink-700 for 6.9:1 against the tint (WCAG AAA at this
size), because .cm-tag's 88% mix is tuned for a larger chip. Colour never
carries the meaning alone in any case — the pill says the word. */
background: color-mix(in srgb, #db2777 12%, #ffffff);
color: #be185d;
border: 1px solid color-mix(in srgb, #db2777 40%, transparent);
/* Never wrap away from the product name it belongs to, and never stretch a
table row taller than the text beside it. */
white-space: nowrap;
vertical-align: middle;
/* The pill lands inside flex containers it does not control — the recipient
table's `.hamper-status` is `display: inline-flex` with the default
`align-items: stretch`, which blew the pill up to the container's full
50px and drew it as a tall pink ellipse next to two lines of matched text.
These two keep it the size of its own content in ANY flex parent, and are
inert everywhere else. */
align-self: center;
flex: 0 0 auto;
}
/* Inside an -driven cell or a dense table the pill should not push the
line height around. */
.tgp-excel-table .preorder-pill,
.portal-table .preorder-pill {
padding: 1px 6px;
font-size: 10px;
}
/* Print (invoices are excluded from the pill entirely, but quotes and packing
documents are not) — keep the fill, since a pink pill printed as an outline
is easy to miss. */
@media print {
.preorder-pill {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}