/* =============================================================================
PrivacyWall Design System — Components
Requires: pw-tokens.css, pw-base.css
Behaviour for the interactive parts lives in pw-components.js
============================================================================= */
/* =============================================================================
BUTTON
Variants primary · secondary · tertiary · ghost · danger · link
Sizes sm (32) · md (40) · lg (44) · xl (48)
States rest · hover · active · focus-visible · disabled · loading
============================================================================= */
.pw-btn {
--pw-btn-height: 40px;
--pw-btn-px: var(--pw-space-8);
--pw-btn-gap: var(--pw-space-4);
--pw-btn-font: var(--pw-text-sm-size);
--pw-btn-radius: var(--pw-radius-pill); /* fully rounded is the default */
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--pw-btn-gap);
height: var(--pw-btn-height);
padding-inline: var(--pw-btn-px);
border: 1px solid transparent;
border-radius: var(--pw-btn-radius);
background: transparent;
color: inherit;
font-size: var(--pw-btn-font);
font-weight: var(--pw-font-weight-bold);
line-height: 1;
white-space: nowrap;
cursor: pointer;
user-select: none;
text-decoration: none;
transition:
background-color var(--pw-duration-fast) var(--pw-ease-out),
border-color var(--pw-duration-fast) var(--pw-ease-out),
color var(--pw-duration-fast) var(--pw-ease-out),
box-shadow var(--pw-duration-fast) var(--pw-ease-out);
}
.pw-btn:focus-visible { outline: 2px solid var(--pw-color-brand-600); outline-offset: 2px; }
/* -- Sizes ------------------------------------------------------------------ */
/* XS is for actions that sit INSIDE a small panel -- a popover's presets, a
card's secondary row -- where a 14px label outweighs the panel's own title.
Not for a page's primary action: 28px is the smallest box a pointer should
be asked to hit, and 12px the smallest label the system sets. Semibold, not
bold: at 12px bold closes the counters up and reads as a smudge. */
.pw-btn--xs { --pw-btn-height: 28px; --pw-btn-px: var(--pw-space-5); --pw-btn-font: var(--pw-text-xs-size); --pw-btn-gap: var(--pw-space-2); font-weight: var(--pw-font-weight-semibold); }
.pw-btn--sm { --pw-btn-height: 32px; --pw-btn-px: var(--pw-space-6); --pw-btn-font: var(--pw-text-sm-size); --pw-btn-gap: var(--pw-space-3); }
.pw-btn--md { --pw-btn-height: 40px; }
.pw-btn--lg { --pw-btn-height: 44px; --pw-btn-px: var(--pw-space-10); --pw-btn-font: var(--pw-text-md-size); }
.pw-btn--xl { --pw-btn-height: 48px; --pw-btn-px: var(--pw-space-12); --pw-btn-font: var(--pw-text-md-size); }
/* -- Shapes -----------------------------------------------------------------
`--pill` stays as a no-op alias so existing markup keeps working.
`--squared` is the escape hatch for the two places a pill cannot go: a welded
button group, and a control that shares an edge with a flat surface. */
.pw-btn--pill { --pw-btn-radius: var(--pw-radius-pill); }
.pw-btn--squared { --pw-btn-radius: var(--pw-radius-md); }
.pw-btn--block { display: flex; width: 100%; }
/* -- Variant: social --------------------------------------------------------
"Continue with Google" and its siblings. These are always read as a stack,
and a stack is where the ordinary button fails: `justify-content: center`
centres the mark AND the label together, so every row's text starts at a
different x and the column has no left edge to read down. The grid fixes
that without absolute positioning — the mark holds the first track, the
label centres in the second, and a third track the same width as the first
balances it, so the label is optically centred in the button rather than in
what is left of it.
Deliberately not a colour variant. Pair it with `--secondary` and the mark
is the only colour on the row, which is what a sign-in stack wants: six
providers competing at full saturation is a decision the reader cannot make.
`--brandfill`, with the colour variants below, is for the one provider whose
own terms require it. */
.pw-btn--social {
display: grid;
grid-template-columns: var(--pw-icon-md) 1fr var(--pw-icon-md);
gap: 0;
justify-items: center;
font-weight: var(--pw-font-weight-medium);
}
/* Never wider than what holds it. The label sits in a `1fr` column between two
icon columns, so the intrinsic width is the longest label plus both gutters —
428px for "Continue with Microsoft", which is more than a phone. The cap lets
the middle column give way instead of the page. */
.pw-btn--social { max-width: 100%; min-width: 0; }
.pw-btn--social.pw-btn--block { width: 100%; }
.pw-btn--social > :first-child { justify-self: start; }
.pw-btn--social .pw-brand-mark, .pw-btn--social .pw-brand-glyph { grid-column: 1; }
/* -- Variant: primary ------------------------------------------------------- */
.pw-btn--primary {
background: var(--pw-action-bg);
border-color: var(--pw-action-border);
color: var(--pw-action-fg);
box-shadow: var(--pw-shadow-xs);
}
.pw-btn--primary:hover { background: var(--pw-action-bg-hover); }
.pw-btn--primary:active { background: var(--pw-action-bg-active); box-shadow: none; }
/* -- Variant: secondary ----------------------------------------------------- */
.pw-btn--secondary {
background: var(--pw-action-2-bg);
border-color: var(--pw-action-2-border);
color: var(--pw-action-2-fg);
box-shadow: var(--pw-shadow-xs);
}
.pw-btn--secondary:hover { background: var(--pw-action-2-bg-hover); border-color: var(--pw-action-2-border-hover); }
.pw-btn--secondary:active { background: var(--pw-action-2-bg-active); box-shadow: none; }
/* -- Variant: tertiary (filled neutral, no border) -------------------------- */
.pw-btn--tertiary {
background: var(--pw-bg-muted);
color: var(--pw-fg-secondary);
}
.pw-btn--tertiary:hover { background: var(--pw-bg-strong); color: var(--pw-fg-primary); }
.pw-btn--tertiary:active { background: var(--pw-action-3-bg-active); }
/* -- Variant: ghost (no chrome until hover) --------------------------------- */
.pw-btn--ghost { color: var(--pw-action-3-fg); }
.pw-btn--ghost:hover { background: var(--pw-action-3-bg-hover); color: var(--pw-fg-primary); }
.pw-btn--ghost:active { background: var(--pw-action-3-bg-active); }
/* -- Variant: danger -------------------------------------------------------- */
.pw-btn--danger {
background: var(--pw-color-danger-600);
color: var(--pw-color-white);
box-shadow: var(--pw-shadow-xs);
}
.pw-btn--danger:hover { background: var(--pw-color-danger-700); }
.pw-btn--danger:active { background: var(--pw-color-danger-800); box-shadow: none; }
.pw-btn--danger-quiet {
background: transparent;
border-color: var(--pw-border-danger);
color: var(--pw-fg-danger);
}
.pw-btn--danger-quiet:hover { background: var(--pw-color-danger-25); }
html.dark .pw-btn--danger-quiet:hover, [data-pw-theme="dark"] .pw-btn--danger-quiet:hover { background: rgba(240, 68, 56, 0.12); }
/* -- Variant: link ---------------------------------------------------------- */
/* A link button sits in a row of chips and labels, not in a wall of body
text, so it takes the darker end of the brand ramp: brand-600 against a
white card is only 3.2:1, which fails for a control this small. */
.pw-btn--link {
height: auto; padding: 0; border: 0; background: none;
color: var(--pw-action-link);
font-weight: var(--pw-font-weight-bold);
}
.pw-btn--link:hover { color: var(--pw-action-link-hover); text-decoration: underline; text-underline-offset: 2px; }
.pw-btn--link:active { color: var(--pw-action-link-active); }
/* Neutral link: the same shape, without spending the brand colour.
*
* Use it wherever a text action sits beside controls that are already
* carrying meaning — the filter bar is the case this exists for. Blue there
* competes with the current vertical and with every result title below, and
* "Advanced Search" is not more important than either. It is still obviously
* a control: semibold, and it underlines on hover. */
.pw-btn--link-neutral {
height: auto; padding: 0; border: 0; background: none;
color: var(--pw-fg-secondary);
font-weight: var(--pw-font-weight-bold);
}
.pw-btn--link-neutral:hover {
color: var(--pw-fg-primary);
text-decoration: underline;
text-underline-offset: 2px;
}
/* The brand's own fill, for the providers that publish one and mean it. Both
colours come from the call site, because they belong to the trademark owner
and not to us — there is no token for them and there should not be: a brand
colour that entered our ramps would start theming, and a sign-in button that
is a different blue in dark mode is no longer the brand's button. Fixed by
design, in both themes, on purpose. */
.pw-btn--brandfill {
background: var(--pw-brand-bg);
color: var(--pw-brand-fg, var(--pw-color-white));
border-color: var(--pw-brand-bg);
}
.pw-btn--brandfill:hover { filter: brightness(0.93); }
.pw-btn--brandfill:active { filter: brightness(0.87); }
/* A share row: neutral until you reach for one, then the brand's own colour.
This is where the mask route pays for itself — the glyph is `currentColor`,
so it turns white inside the fill on its own, with no second file and no
swap to manage. An of the coloured mark cannot do it. */
.pw-btn--brandhover:hover {
background: var(--pw-brand-bg);
border-color: var(--pw-brand-bg);
color: var(--pw-brand-fg, var(--pw-color-white));
}
/* A stack of sign-in buttons. Full width and one gap, because the choice being
offered is between the labels and nothing else. */
.pw-btn-stack { display: grid; gap: var(--pw-space-4); }
.pw-btn-stack > .pw-btn { width: 100%; }
.pw-btn--link-neutral:active { color: var(--pw-fg-primary); }
.pw-btn--link-neutral:disabled,
.pw-btn--link-neutral[aria-disabled="true"] { color: var(--pw-fg-disabled); background: transparent; }
/* -- States ----------------------------------------------------------------- */
.pw-btn:disabled,
.pw-btn[aria-disabled="true"] {
cursor: not-allowed;
box-shadow: none;
background: var(--pw-bg-disabled);
border-color: transparent;
color: var(--pw-fg-disabled);
}
.pw-btn--ghost:disabled,
.pw-btn--link:disabled { background: transparent; }
.pw-btn.is-loading { cursor: progress; pointer-events: none; }
.pw-btn.is-loading .pw-btn__label,
.pw-btn.is-loading .pw-icon:not(.pw-btn__spinner) { opacity: 0; }
.pw-btn__spinner {
position: absolute;
inset: 0;
margin: auto;
width: 18px; height: 18px;
opacity: 0;
animation: pw-spin 900ms linear infinite;
}
.pw-btn.is-loading .pw-btn__spinner { opacity: 1; }
/* -- Icon-only -------------------------------------------------------------- */
.pw-btn--icon {
--pw-btn-px: 0;
width: var(--pw-btn-height);
padding: 0;
}
.pw-btn--icon { border-radius: var(--pw-radius-circle); }
.pw-btn--icon.pw-btn--squared { border-radius: var(--pw-radius-md); }
/* -- The glyph size of a label-less control --------------------------------
One decision, one place, for every control that has no word beside it: the
icon button, the icon-only chip, the overflow trigger, a pinned Tools
button. Where an icon accompanies a label it is an accent and takes `sm`;
alone it IS the control's meaning and takes `md`, or the row reads as a
smudge inside a circle.
The chips cannot literally BE `.pw-btn` — a chip is a `.pw-tab`, and the two
bases disagree about height, padding, weight and the underline — so what is
shared is the decision rather than the class. Sizes that are not the default
say so here, and nowhere else.
This is deliberately not left to the markup: `pw-icon--sm` is what gets
copied, because it is what the labelled chip beside it uses.
-------------------------------------------------------------------------- */
.pw-btn--icon,
.pw-vertical--icon,
.pw-tab--icon { --pw-glyph: var(--pw-icon-md); }
.pw-btn--sm.pw-btn--icon { --pw-glyph: var(--pw-icon-sm); }
.pw-btn--xl.pw-btn--icon { --pw-glyph: var(--pw-icon-lg); }
.pw-btn--icon > .pw-icon,
.pw-vertical--icon > .pw-icon,
.pw-tabs--chip .pw-tab--icon > .pw-icon {
width: var(--pw-glyph);
height: var(--pw-glyph);
/* The reset caps every svg at `max-width: 100%`, which is right for content
images and wrong for a glyph: inside a fixed-width circle it lets the
control's padding shrink the icon instead of overflowing it, so the icon
silently gets smaller the tighter the button. A sized glyph is sized. */
max-width: none;
}
/* -- Emoji -------------------------------------------------------------------
A picture, not a character. The platform's own emoji font draws the same
codepoint four different ways across four operating systems, none of them
ours and none of them reviewable — and a codepoint the platform has no glyph
for renders as a hollow box, which is what a half-written flag did in the
holidays list for as long as nobody looked.
``, exactly as the coloured brand marks are, and for the same reason:
these carry their own palettes and have no `currentColor` to follow. See
assets/emoji/README.md.
Sized on the TEXT it sits in — 1em, with the baseline nudge that makes a
square box sit like a glyph rather than on the line — so a row of names with
an emoji each has one baseline and no reflow when the font size changes. */
.pw-emoji {
display: inline-block;
width: 1em; height: 1em;
/* A flag is not square; every other emoji is. `contain` letterboxes the odd
one out instead of stretching it into a shape it is not. */
object-fit: contain;
vertical-align: -0.14em;
/* An emoji is content, not chrome: it must not inherit the icon system's
stroke, and the reset's `max-width: 100%` must not shrink it inside a
tight box the way it does a content image. */
max-width: none;
flex: 0 0 auto;
user-select: none;
}
/* Both bigger than the base, and named for it. `--sm` was here and was 1.25em:
a modifier called small that made the thing larger, which is the kind of name
that survives until somebody uses it and gets the opposite of what they
asked for. */
.pw-emoji--lg { width: 1.25em; height: 1.25em; }
.pw-emoji--xl { width: 1.6em; height: 1.6em; }
/* Sizes that do NOT follow the text, for the places an emoji is the object on
the surface rather than a mark inside a sentence. */
/* The floor, for a character Noto does not draw. It keeps `.pw-emoji` so the
surrounding layout is unchanged, but it is TEXT now — and a 1em box is the
wrong box for a glyph most fonts draw slightly wider than its em, so the size
goes back to the text's own. */
.pw-emoji[data-pw-emoji-fallback] {
width: auto; height: auto;
line-height: 1;
}
.pw-emoji--24 { width: 24px; height: 24px; vertical-align: middle; }
.pw-emoji--32 { width: 32px; height: 32px; vertical-align: middle; }
.pw-emoji--48 { width: 48px; height: 48px; vertical-align: middle; }
/* -- Floating on top of content --------------------------------------------
A button that floats above content instead of sitting inside a row has to
supply its own edge, and which edge is correct depends entirely on what is
behind it. So there are two variants, and the HOST picks — never the
component:
--float neutral host (paper, gray-50, a plain card, a light map
tile you control): hairline border + small shadow.
--float-media coloured or photographic host (imagery, gradients, video,
brand fills, any surface the product does not choose):
NO border, shadow only.
The border is calibrated against neutral surfaces, which is exactly why it
fails on a coloured one. Over a mid-grey photo it disappears; over a
saturated fill it reads as a dirty grey ring belonging to no palette; and
because the imagery moves, it looks different on every frame. A shadow has
none of those problems: it darkens whatever is already there, so it holds
its edge on any hue, in both themes.
The tokens differ too — `--pw-shadow-overlay` is heavier than `sm` and
carries a tight contact layer, because here it is doing the border's job
rather than sitting next to it.
-------------------------------------------------------------------------- */
.pw-btn--float,
.pw-btn--float-media {
background: var(--pw-bg-surface);
color: var(--pw-fg-secondary);
}
.pw-btn--float { border: 1px solid var(--pw-border-subtle); box-shadow: var(--pw-shadow-sm); }
.pw-btn--float-media { border: 0; box-shadow: var(--pw-shadow-overlay); }
.pw-btn--float:hover,
.pw-btn--float-media:hover { background: var(--pw-bg-hover); color: var(--pw-fg-primary); }
.pw-btn--float:active,
.pw-btn--float-media:active { background: var(--pw-bg-active); }
.pw-btn--float[aria-pressed="true"],
.pw-btn--float-media[aria-pressed="true"] {
background: var(--pw-bg-selected);
color: var(--pw-fg-brand);
}
/* `.pw-btn` focuses with a 2px outline at a 2px offset. Over imagery that gap
shows the photo, so a blue outline on a blue sky separates from nothing —
fill the gap with the surface colour. */
.pw-btn--float-media:focus-visible {
box-shadow: 0 0 0 2px var(--pw-bg-surface), var(--pw-shadow-overlay);
}
.pw-btn--float:disabled,
.pw-btn--float-media:disabled { color: var(--pw-fg-disabled); box-shadow: none; }
/* -- Trailing chevron on a menu button -------------------------------------- */
/* The negative margin pulls a trailing caret closer to the label it follows.
In an icon-only button there is no label, so it just shifts the glyph 2px
off-centre inside a circle — small enough to read as a rendering artefact
rather than a mistake, which is why it survived this long. */
.pw-btn__caret { margin-inline-start: calc(var(--pw-space-1) * -1); transition: transform var(--pw-duration-fast) var(--pw-ease-out); }
.pw-btn--icon > .pw-btn__caret { margin-inline-start: 0; }
.pw-btn[aria-expanded="true"] .pw-btn__caret { transform: rotate(180deg); }
/* =============================================================================
BUTTON GROUP · SPLIT BUTTON
============================================================================= */
.pw-btn-group { display: inline-flex; --pw-btn-radius: var(--pw-radius-pill); }
.pw-btn-group > .pw-btn { border-radius: 0; }
.pw-btn-group > .pw-btn:first-child { border-start-start-radius: var(--pw-btn-radius); border-end-start-radius: var(--pw-btn-radius); }
.pw-btn-group > .pw-btn:last-child { border-start-end-radius: var(--pw-btn-radius); border-end-end-radius: var(--pw-btn-radius); }
.pw-btn-group > .pw-btn + .pw-btn { margin-inline-start: -1px; }
.pw-btn-group > .pw-btn:hover,
.pw-btn-group > .pw-btn:focus-visible { z-index: 1; }
/* =============================================================================
SEGMENTED CONTROL
Appearance toggle (sun / moon), directions transport modes, view switchers.
============================================================================= */
.pw-segmented {
position: relative;
display: inline-flex;
gap: var(--pw-space-1);
padding: 3px;
border: 1px solid var(--pw-border-subtle);
border-radius: var(--pw-radius-pill);
background: var(--pw-bg-muted);
}
/* The selection is ONE pill that travels, not a fill each item paints for
itself. In a row of two, two pills cross-fading is the case where the eye
cannot tell what happened — nothing moves, so nothing says "this became
that". The thumb is injected by PW.mount(), which is why the per-item
background below still exists: without JavaScript it is the whole selected
state, and `is-thumbed` is what stands it down once a thumb has arrived. */
.pw-segmented__thumb {
position: absolute;
inset-block: 3px;
inset-inline-start: 0;
width: var(--pw-seg-w, 0);
translate: var(--pw-seg-x, 0) 0;
border-radius: var(--pw-radius-pill);
background: var(--pw-bg-surface);
box-shadow: var(--pw-shadow-xs);
pointer-events: none;
transition:
translate var(--pw-duration-base) var(--pw-ease-out),
width var(--pw-duration-base) var(--pw-ease-out);
}
html.dark .pw-segmented__thumb,
[data-pw-theme="dark"] .pw-segmented__thumb { background: var(--pw-color-gray-700); }
/* The items sit above the thumb and stop painting their own. */
.pw-segmented.is-thumbed .pw-segmented__item { position: relative; }
.pw-segmented.is-thumbed .pw-segmented__item[aria-pressed="true"],
.pw-segmented.is-thumbed .pw-segmented__item[aria-selected="true"],
.pw-segmented.is-thumbed .pw-segmented__item.is-active {
background: transparent;
box-shadow: none;
}
html.dark .pw-segmented.is-thumbed .pw-segmented__item[aria-pressed="true"],
[data-pw-theme="dark"] .pw-segmented.is-thumbed .pw-segmented__item[aria-pressed="true"],
html.dark .pw-segmented.is-thumbed .pw-segmented__item[aria-selected="true"],
[data-pw-theme="dark"] .pw-segmented.is-thumbed .pw-segmented__item[aria-selected="true"],
html.dark .pw-segmented.is-thumbed .pw-segmented__item.is-active,
[data-pw-theme="dark"] .pw-segmented.is-thumbed .pw-segmented__item.is-active { background: transparent; }
@media (prefers-reduced-motion: reduce) {
.pw-segmented__thumb { transition: none; }
}
.pw-segmented__item {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--pw-space-3);
min-width: 34px;
height: 30px;
padding-inline: var(--pw-space-5);
border: 0;
border-radius: var(--pw-radius-pill);
background: transparent;
color: var(--pw-fg-tertiary);
font-size: var(--pw-text-sm-size);
font-weight: var(--pw-font-weight-semibold);
cursor: pointer;
transition:
background-color var(--pw-duration-fast) var(--pw-ease-out),
color var(--pw-duration-fast) var(--pw-ease-out),
box-shadow var(--pw-duration-fast) var(--pw-ease-out);
}
.pw-segmented__item:hover { color: var(--pw-fg-primary); }
.pw-segmented__item[aria-pressed="true"],
.pw-segmented__item[aria-selected="true"],
.pw-segmented__item.is-active {
background: var(--pw-bg-surface);
color: var(--pw-fg-primary);
box-shadow: var(--pw-shadow-xs);
}
html.dark .pw-segmented__item[aria-pressed="true"],
[data-pw-theme="dark"] .pw-segmented__item[aria-pressed="true"],
html.dark .pw-segmented__item[aria-selected="true"],
[data-pw-theme="dark"] .pw-segmented__item[aria-selected="true"],
html.dark .pw-segmented__item.is-active, [data-pw-theme="dark"] .pw-segmented__item.is-active { background: var(--pw-color-gray-700); }
.pw-segmented__item:disabled { color: var(--pw-fg-disabled); cursor: not-allowed; }
/* Large / tile flavour — the maps directions mode picker */
.pw-segmented--tiles { gap: var(--pw-space-4); padding: 0; border: 0; background: none; border-radius: 0; }
.pw-segmented--tiles .pw-segmented__item {
flex: 1;
height: 40px;
border: 1px solid var(--pw-border-subtle);
background: var(--pw-bg-surface);
}
.pw-segmented--tiles .pw-segmented__item[aria-pressed="true"],
.pw-segmented--tiles .pw-segmented__item.is-active {
background: var(--pw-action-bg);
border-color: transparent;
color: var(--pw-action-fg);
}
/* =============================================================================
CHIP · FILTER PILL
The SERP filter bar, find-nearby chips, image category rail.
============================================================================= */
.pw-chip {
display: inline-flex;
align-items: center;
gap: var(--pw-space-3);
height: 32px;
padding-inline: var(--pw-space-6);
border: 1px solid var(--pw-border-default);
border-radius: var(--pw-radius-pill);
background: var(--pw-bg-surface);
color: var(--pw-fg-secondary);
font-size: var(--pw-text-sm-size);
font-weight: var(--pw-font-weight-semibold);
white-space: nowrap;
cursor: pointer;
transition:
background-color var(--pw-duration-fast) var(--pw-ease-out),
border-color var(--pw-duration-fast) var(--pw-ease-out),
color var(--pw-duration-fast) var(--pw-ease-out);
}
.pw-chip:hover { background: var(--pw-bg-hover); border-color: var(--pw-border-strong); color: var(--pw-fg-primary); }
.pw-chip:active { background: var(--pw-bg-active); }
/* `.is-current` is the overflow controller's word, and it lands on the More
chip when the menu behind it holds the chip that is selected. A More that is
hiding your current filter has to look like it is holding something, and the
look it needs is the one a selected chip already has. */
.pw-chip[aria-pressed="true"],
.pw-chip.is-selected,
.pw-chip.is-current {
background: var(--pw-bg-selected);
border-color: var(--pw-color-brand-300);
color: var(--pw-fg-brand);
}
html.dark .pw-chip[aria-pressed="true"],
[data-pw-theme="dark"] .pw-chip[aria-pressed="true"],
html.dark .pw-chip.is-selected, [data-pw-theme="dark"] .pw-chip.is-selected,
html.dark .pw-chip.is-current, [data-pw-theme="dark"] .pw-chip.is-current { border-color: var(--pw-color-brand-700); color: var(--pw-color-brand-300); }
.pw-chip:disabled, .pw-chip[aria-disabled="true"] {
background: var(--pw-bg-disabled); border-color: transparent;
color: var(--pw-fg-disabled); cursor: not-allowed;
}
/* -- Soft: the same chip without the hairline ------------------------------
A bordered pill is right on paper -- a white page, a row of filters, nothing
else to separate it from. On a TINTED bar it is a second edge: the bar has
already separated the controls from the page, and the outline is then drawing
a box around something that was never in danger of being lost. So the soft
chip states itself by material instead: a raised white pill at rest, the
brand tint when it is on.
The border is turned transparent rather than dropped, so the two variants
measure the same and a row can hold both without a pixel of drift. */
.pw-chip--soft {
border-color: transparent;
background: var(--pw-bg-surface);
box-shadow: var(--pw-shadow-xs);
color: var(--pw-fg-secondary);
}
.pw-chip--soft:hover { border-color: transparent; background: var(--pw-bg-surface); box-shadow: var(--pw-shadow-sm); color: var(--pw-fg-primary); }
.pw-chip--soft:active { background: var(--pw-bg-hover); }
/* ON IS NEUTRAL, and it is a fill. Brand on a chip means "this is the product's
colour"; it does not mean "this is switched on", and a bar with two brand
chips and two plain ones reads as two links beside two controls. The inverse
pair says on without saying anything else: near-black on white, near-white on
black, one step of the same neutral ramp the page is already made of.
It stops being raised at the same time. The fill is the state now, and a
shadow under a filled chip would say it is also in front of something. */
.pw-chip--soft[aria-pressed="true"],
.pw-chip--soft.is-selected,
.pw-chip--soft.is-current {
border-color: transparent;
box-shadow: none;
background: var(--pw-bg-inverse);
color: var(--pw-fg-inverse);
}
.pw-chip--soft[aria-pressed="true"]:hover,
.pw-chip--soft.is-selected:hover,
.pw-chip--soft.is-current:hover { background: var(--pw-bg-inverse); color: var(--pw-fg-inverse); }
/* In dark, the bordered chip's own selected rule -- `html.dark .pw-chip.is-selected`
-- outranks the variant by one selector and put the brand back on the label.
Restated at the same weight rather than fought with `!important`: the soft
chip's whole point is that on is neutral, and it has to be neutral in both
themes or it is a variant that only works in one. */
html.dark .pw-chip--soft[aria-pressed="true"],
html.dark .pw-chip--soft.is-selected,
html.dark .pw-chip--soft.is-current,
[data-pw-theme="dark"] .pw-chip--soft[aria-pressed="true"],
[data-pw-theme="dark"] .pw-chip--soft.is-selected,
[data-pw-theme="dark"] .pw-chip--soft.is-current {
border-color: transparent;
background: var(--pw-bg-inverse);
color: var(--pw-fg-inverse);
}
/* The dismiss is already inheriting; on a filled chip it needs its own hover
ground, because the ink overlay is mixed for a light surface. */
.pw-chip--soft.is-selected .pw-chip__dismiss:hover,
.pw-chip--soft[aria-pressed="true"] .pw-chip__dismiss:hover { background: var(--pw-bg-on-overlay); }
.pw-chip--soft:disabled, .pw-chip--soft[aria-disabled="true"] { box-shadow: none; }
.pw-chip--sm { height: 28px; padding-inline: var(--pw-space-4); font-size: var(--pw-text-xs-size); }
.pw-chip--lg { height: 40px; padding-inline: var(--pw-space-8); font-size: var(--pw-text-sm-size); }
.pw-chip__caret { color: var(--pw-fg-quaternary); transition: transform var(--pw-duration-fast) var(--pw-ease-out); }
.pw-chip[aria-expanded="true"] .pw-chip__caret { transform: rotate(180deg); }
/* 22px visual, hit area padded out past it. Small enough not to unbalance
the chip, big enough to actually hit with a thumb -- but padded out WITHIN
the chip, not past it. Eight pixels all round overhung a 28px chip by five
top and bottom, which meant two things: a press in the empty bar above a chip
removed the tool, and the overhang counted towards the scrollable area of
every ancestor, so the tools rail (which scrolls sideways) could scroll five
pixels DOWN and cut the tops off its own chips. Three is the exact slack
between the dismiss and the smallest chip it sits in. */
.pw-chip__dismiss {
position: relative;
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; margin-inline-end: -6px;
border: 0; border-radius: var(--pw-radius-circle);
background: transparent; color: var(--pw-fg-tertiary); cursor: pointer;
}
.pw-chip__dismiss::after { content: ""; position: absolute; inset-block: -3px; inset-inline: -8px; }
.pw-chip__dismiss:hover { background: var(--pw-ink-hover); color: var(--pw-fg-primary); }
/* On a SELECTED chip it takes the chip's own colour. `--pw-fg-tertiary` is the
right grey beside a grey label and the wrong one beside a brand label: the
chip reads brand, brand, near-black, and the near-black is the part you are
meant to press. A dismiss belongs to its chip and should be the same
temperature as it. */
.pw-chip[aria-pressed="true"] .pw-chip__dismiss,
.pw-chip.is-selected .pw-chip__dismiss { color: inherit; }
.pw-chip[aria-pressed="true"] .pw-chip__dismiss:hover,
.pw-chip.is-selected .pw-chip__dismiss:hover { background: var(--pw-ink-hover); color: inherit; }
.pw-chip__dismiss:focus-visible { outline: none; box-shadow: var(--pw-focus-ring); }
.pw-chip__dismiss:hover { background: var(--pw-ink-hover); color: var(--pw-fg-primary); }
/* Leading colour dot / icon medallion, used by find-nearby and saved lists */
/* The category mark. Its hue arrives as DATA — `--pw-mark-fg` for the glyph and
`--pw-mark-bg` for the fill — rather than as `background`/`color` written
straight onto the element, and that difference is the whole point: a value
set inline cannot be reinterpreted, so a pale category tint stayed pale in
dark mode and burned a hole in the panel it sat on. As custom properties the
component owns the rendering, and in dark it derives the pair from the hue
itself: a 20% wash for the fill and a lightened hue for the glyph, which is
the same relationship the hand-written dark tints use.
Categories are open-ended — a new one should be data, not a stylesheet edit —
so this has to work for any hue rather than for a fixed list. */
.pw-chip__medallion {
display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px; margin-inline-start: -4px;
border-radius: var(--pw-radius-circle);
background: var(--pw-mark-bg, var(--pw-bg-muted));
color: var(--pw-mark-fg, var(--pw-fg-tertiary));
}
html.dark .pw-chip__medallion,
[data-pw-theme="dark"] .pw-chip__medallion {
background: color-mix(in srgb, var(--pw-mark-fg, var(--pw-fg-tertiary)) 20%, transparent);
color: color-mix(in srgb, var(--pw-mark-fg, var(--pw-fg-tertiary)) 55%, white);
}
/* Horizontal scrolling rail of chips (image categories, mobile filter bar) */
.pw-chip-rail {
display: flex; gap: var(--pw-space-4);
overflow-x: auto; overscroll-behavior-x: contain;
scrollbar-width: none; -ms-overflow-style: none;
padding-block: var(--pw-space-2);
}
.pw-chip-rail::-webkit-scrollbar { display: none; }
.pw-chip-rail > * { flex: 0 0 auto; }
/* A chip cut in half at the rail's edge reads as a bug; the same chip fading
reads as "keep going". Only on the side that has more to show. */
.pw-chip-rail {
--pw-fade-start: transparent 0, #000 var(--pw-fade-lead, 0px);
--pw-fade-end: #000 calc(100% - var(--pw-fade-trail, 0px)), transparent 100%;
-webkit-mask-image: linear-gradient(to right, var(--pw-fade-start), var(--pw-fade-end));
mask-image: linear-gradient(to right, var(--pw-fade-start), var(--pw-fade-end));
}
.pw-chip-rail.has-lead { --pw-fade-lead: 32px; }
.pw-chip-rail.has-trail { --pw-fade-trail: 32px; }
/* A rail that has stopped scrolling has no edge to soften — and a mask on it
would clip the overflow menu its trigger opens. */
.pw-chip-rail:has([data-pw-overflow-trigger]) { -webkit-mask-image: none; mask-image: none; }
/* Scrolling and a More menu are two answers to the same question, and one rail
cannot give both: a row you can scroll has nothing left to put in a menu, and
the scrollport would clip the menu the trigger opens. A rail that carries an
overflow trigger stops being a scrollport and lets the controller decide what
fits instead. */
.pw-chip-rail:has([data-pw-overflow-trigger]) { overflow: visible; }
/* A chip that has overflowed into the menu is not a chip any more. In the rail
the pill is what separates it from its neighbours; in a column of rows the
pill fights the rows above and below it, and five of them read as a bag of
loose buttons rather than a list. It keeps its label, its mark and its
selected state, and gives up the shape. */
.pw-menu > .pw-chip {
display: flex; justify-content: flex-start;
width: 100%; height: auto; min-height: 36px;
padding: var(--pw-space-3) var(--pw-space-5);
border-color: transparent; border-radius: var(--pw-radius-md);
background: transparent;
font-size: var(--pw-text-sm-size);
}
.pw-menu > .pw-chip:hover { background: var(--pw-bg-hover); border-color: transparent; }
.pw-menu > .pw-chip[aria-pressed="true"],
.pw-menu > .pw-chip.is-selected { background: var(--pw-bg-selected); border-color: transparent; }
/* =============================================================================
TAG · BADGE
Non-interactive labels. Tag = rectangular, Badge = pill, Dot = status.
============================================================================= */
.pw-tag {
display: inline-flex; align-items: center; gap: var(--pw-space-2);
height: 22px; padding-inline: var(--pw-space-5);
border: 1px solid var(--pw-border-default);
border-radius: var(--pw-radius-pill);
background: var(--pw-bg-subtle);
color: var(--pw-fg-secondary);
font-size: var(--pw-text-xs-size);
font-weight: var(--pw-font-weight-semibold);
white-space: nowrap;
}
.pw-badge { border-radius: var(--pw-radius-pill); } /* alias — tags are already pills */
.pw-tag--squared { border-radius: var(--pw-radius-sm); }
.pw-tag--sm { height: 20px; font-size: var(--pw-text-xs-size); padding-inline: var(--pw-space-4); }
.pw-tag--lg { height: 26px; font-size: var(--pw-text-sm-size); padding-inline: var(--pw-space-5); }
.pw-tag--brand { background: var(--pw-color-brand-50); border-color: var(--pw-color-brand-100); color: var(--pw-color-brand-700); }
.pw-tag--success { background: var(--pw-color-success-50); border-color: var(--pw-color-success-150); color: var(--pw-color-success-700); }
.pw-tag--warning { background: var(--pw-color-warning-25); border-color: var(--pw-color-warning-100);color: var(--pw-color-warning-700); }
.pw-tag--danger { background: var(--pw-color-danger-25); border-color: var(--pw-color-danger-150); color: var(--pw-color-danger-700); }
.pw-tag--info { background: var(--pw-color-info-50); border-color: var(--pw-color-brand-200); color: var(--pw-color-info-700); }
.pw-tag--ai { background: var(--pw-color-purple-50); border-color: var(--pw-color-purple-100); color: var(--pw-color-purple-700); }
html.dark .pw-tag--brand, [data-pw-theme="dark"] .pw-tag--brand { background: rgba(76,144,254,.16); border-color: rgba(76,144,254,.32); color: var(--pw-color-brand-300); }
html.dark .pw-tag--success, [data-pw-theme="dark"] .pw-tag--success { background: rgba(18,183,106,.16); border-color: rgba(18,183,106,.32); color: var(--pw-color-success-300); }
html.dark .pw-tag--warning, [data-pw-theme="dark"] .pw-tag--warning { background: rgba(247,144,9,.16); border-color: rgba(247,144,9,.32); color: var(--pw-color-warning-400); }
html.dark .pw-tag--danger, [data-pw-theme="dark"] .pw-tag--danger { background: rgba(240,68,56,.16); border-color: rgba(240,68,56,.32); color: var(--pw-color-danger-250); }
html.dark .pw-tag--info, [data-pw-theme="dark"] .pw-tag--info { background: rgba(11,165,236,.16); border-color: rgba(11,165,236,.32); color: var(--pw-color-brand-300); }
html.dark .pw-tag--ai, [data-pw-theme="dark"] .pw-tag--ai { background: rgba(122,90,248,.18); border-color: rgba(122,90,248,.34); color: #c3b5fd; }
/* Outline flavour — the "Beta" pill on a coloured surface */
.pw-tag--outline { background: transparent; border-color: currentColor; }
.pw-tag--on-brand { background: transparent; border-color: rgba(255,255,255,.7); color: var(--pw-color-white); }
.pw-dot {
display: inline-block; width: 8px; height: 8px; flex: 0 0 auto;
border-radius: var(--pw-radius-circle); background: var(--pw-fg-quaternary);
}
.pw-dot--success { background: var(--pw-color-success-500); }
.pw-dot--warning { background: var(--pw-color-warning-500); }
.pw-dot--danger { background: var(--pw-color-danger-500); }
.pw-dot--brand { background: var(--pw-color-brand-500); }
.pw-dot--pulse::after {
content: ""; position: absolute; inset: -4px;
border-radius: inherit; background: inherit; opacity: .4;
animation: pw-pulse 1.6s var(--pw-ease-out) infinite;
}
@keyframes pw-pulse { to { transform: scale(2.2); opacity: 0; } }
/* Count badge that sits on an icon button */
.pw-count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 18px; padding-inline: 5px;
border-radius: var(--pw-radius-pill);
background: var(--pw-color-danger-500); color: var(--pw-color-white);
font-size: var(--pw-text-xs-size); font-weight: var(--pw-font-weight-semibold);
line-height: 1;
}
/* =============================================================================
AVATAR
============================================================================= */
.pw-avatar {
position: relative;
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; flex: 0 0 auto;
border-radius: var(--pw-radius-circle);
background: var(--pw-bg-muted);
color: var(--pw-fg-secondary);
font-size: var(--pw-text-sm-size);
font-weight: var(--pw-font-weight-semibold);
overflow: hidden;
user-select: none;
}
.pw-avatar > img { width: 100%; height: 100%; object-fit: cover; }
.pw-avatar--xs { width: 24px; height: 24px; font-size: var(--pw-text-xs-size); }
.pw-avatar--sm { width: 32px; height: 32px; font-size: var(--pw-text-xs-size); }
.pw-avatar--lg { width: 48px; height: 48px; font-size: var(--pw-text-md-size); }
.pw-avatar--xl { width: 64px; height: 64px; font-size: var(--pw-text-xl-size); }
.pw-avatar--square { border-radius: var(--pw-radius-md); }
.pw-avatar--ring { box-shadow: 0 0 0 2px var(--pw-bg-canvas), 0 0 0 4px var(--pw-color-brand-500); }
.pw-avatar__status {
position: absolute; right: 0; bottom: 0;
width: 10px; height: 10px;
border-radius: var(--pw-radius-circle);
border: 2px solid var(--pw-bg-canvas);
background: var(--pw-color-success-500);
}
.pw-avatar-stack { display: inline-flex; }
.pw-avatar-stack > .pw-avatar + .pw-avatar { margin-inline-start: -10px; }
.pw-avatar-stack > .pw-avatar { box-shadow: 0 0 0 2px var(--pw-bg-canvas); }
/* Favicon holder used by search results and place rows */
.pw-favicon {
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; flex: 0 0 auto;
border: 1px solid var(--pw-border-subtle);
border-radius: var(--pw-radius-circle);
background: var(--pw-bg-surface);
overflow: hidden;
}
.pw-favicon > img { width: 16px; height: 16px; object-fit: contain; }
/* =============================================================================
FIELD SHELL
Label + control + hint/error. Every form control shares this wrapper so
spacing and error colouring are defined once.
============================================================================= */
.pw-field { display: flex; flex-direction: column; gap: var(--pw-space-3); min-width: 0; }
.pw-field--inline { flex-direction: row; align-items: center; gap: var(--pw-space-6); }
.pw-label {
display: inline-flex; align-items: center; gap: var(--pw-space-2);
font-size: var(--pw-text-sm-size);
font-weight: var(--pw-font-weight-semibold);
color: var(--pw-fg-secondary);
}
.pw-label__required { color: var(--pw-fg-danger); }
.pw-label__optional { color: var(--pw-fg-quaternary); font-weight: var(--pw-font-weight-regular); }
.pw-hint { font-size: var(--pw-text-xs-size); line-height: var(--pw-text-xs-line); color: var(--pw-fg-tertiary); }
/* Under a field: the hint on the leading side, a count on the trailing one.
The hint takes the room and wraps if it must; the count keeps to its own
width and to the end of the line, where the eye checks it. */
.pw-field__foot { display: flex; align-items: baseline; justify-content: space-between; gap: var(--pw-space-6); }
.pw-field__foot > .pw-hint { flex: 1 1 auto; min-width: 0; }
.pw-field__foot > .pw-char-count { flex: none; margin-inline-start: auto; font-variant-numeric: tabular-nums; }
/* A vertical stack of fields. The gap is larger than the gap *inside* a
field (label → control → hint), so a field reads as one block and the
form as a list of them. Getting these two gaps the same way round is
what makes a long form scannable. */
/* A group of fields that belong together. Deliberately borderless: every
field inside is already a rounded outline, so a box around them draws a
second boundary around the first and the eye has to resolve two shapes
where there is one group. A tint and padding say "these belong together"
without competing with the controls. */
.pw-fieldset {
padding: var(--pw-space-8);
border: 0;
border-radius: var(--pw-radius-lg);
background: var(--pw-bg-subtle);
}
.pw-form { display: flex; flex-direction: column; gap: var(--pw-space-10); min-width: 0; }
.pw-form--tight { gap: var(--pw-space-6); }
/* Two controls that mean one value — a numeric range, a date range, a
min/max pair. Wrap in role="group" with the visible label, and give each
half its own aria-label, or a screen reader reads the same label twice. */
.pw-field-row { display: flex; align-items: center; gap: var(--pw-space-5); min-width: 0; }
.pw-field-row > * { flex: 1 1 0; min-width: 0; }
.pw-field-row__sep {
flex: 0 0 auto;
color: var(--pw-fg-tertiary);
font-size: var(--pw-text-sm-size);
}
.pw-error {
display: flex; align-items: flex-start; gap: var(--pw-space-2);
font-size: var(--pw-text-xs-size); line-height: var(--pw-text-xs-line);
color: var(--pw-fg-danger);
}
.pw-success-note {
display: flex; align-items: flex-start; gap: var(--pw-space-2);
font-size: var(--pw-text-xs-size); color: var(--pw-fg-success);
}
/* =============================================================================
INPUT · TEXTAREA
Sizes sm (32) · md (40) · lg (48)
States rest · hover · focus · filled · error · success · disabled · readonly
Addons leading icon · trailing icon · clear · prefix/suffix · inline action
============================================================================= */
.pw-input-wrap {
--pw-input-height: 40px;
--pw-input-px: var(--pw-space-6);
position: relative;
display: flex;
align-items: center;
gap: var(--pw-space-4);
min-height: var(--pw-input-height);
padding-inline: var(--pw-input-px);
border: 1px solid var(--pw-field-border);
border-radius: var(--pw-radius-pill); /* fully rounded is the default */
background: var(--pw-field-bg);
transition:
border-color var(--pw-duration-fast) var(--pw-ease-out),
box-shadow var(--pw-duration-fast) var(--pw-ease-out),
background-color var(--pw-duration-fast) var(--pw-ease-out);
}
.pw-input-wrap:hover { border-color: var(--pw-field-border-hover); }
.pw-input-wrap:focus-within {
border-color: var(--pw-field-border-focus);
box-shadow: var(--pw-focus-ring);
}
.pw-input-wrap--sm { --pw-input-height: 32px; --pw-input-px: var(--pw-space-5); }
.pw-input-wrap--lg { --pw-input-height: 48px; --pw-input-px: var(--pw-space-8); }
.pw-input-wrap--pill { border-radius: var(--pw-radius-pill); } /* alias */
.pw-input-wrap--squared { border-radius: var(--pw-radius-md); }
.pw-input {
flex: 1 1 auto;
min-width: 0;
width: 100%;
border: 0;
padding: 0;
background: transparent;
color: var(--pw-field-fg);
font-size: var(--pw-text-sm-size);
line-height: var(--pw-text-sm-line);
outline: none;
}
.pw-input::placeholder { color: var(--pw-field-placeholder); }
.pw-input-wrap--lg .pw-input { font-size: var(--pw-text-md-size); line-height: var(--pw-text-md-line); }
.pw-input-wrap--sm .pw-input { font-size: var(--pw-text-sm-size); }
.pw-input__icon { color: var(--pw-field-icon); }
.pw-input__affix { color: var(--pw-fg-tertiary); font-size: var(--pw-text-sm-size); white-space: nowrap; font-weight: var(--pw-font-weight-medium); }
/* Inline field actions — clear, reveal, copy, submit.
32px visual, with the hit area pushed out to 44 via ::after so a small glyph
inside a 40px pill is still comfortable on touch. */
.pw-input__action {
--pw-input-action-size: 32px;
position: relative;
display: inline-flex; align-items: center; justify-content: center;
width: var(--pw-input-action-size); height: var(--pw-input-action-size); flex: 0 0 auto;
margin-inline-end: calc(var(--pw-space-2) * -1);
border: 0; border-radius: var(--pw-radius-circle);
background: transparent; color: var(--pw-field-icon);
cursor: pointer;
transition: background-color var(--pw-duration-fast) var(--pw-ease-out), color var(--pw-duration-fast) var(--pw-ease-out);
}
.pw-input__action::after { content: ""; position: absolute; inset: -6px; }
.pw-input__action .pw-icon { width: var(--pw-icon-md); height: var(--pw-icon-md); }
/* Translucent, not a fixed grey: this button sits inside a field whose
background the caller controls. On the results header that field is tinted,
and a solid --pw-bg-hover would be *lighter* than it — the hover disc reads
as a hole punched in the field instead of a highlight. Ink darkens whatever
is behind it, so it works on white and on any tint. */
.pw-input__action:hover { background: var(--pw-ink-hover); color: var(--pw-fg-primary); }
.pw-input__action:active { background: var(--pw-ink-active); }
.pw-input__action:focus-visible { outline: 2px solid var(--pw-color-brand-600); outline-offset: 1px; }
/* Small fields keep a smaller disc, but the extended hit area stays. */
.pw-input-wrap--sm .pw-input__action,
.pw-search--sm .pw-input__action { --pw-input-action-size: 26px; }
.pw-input-wrap--sm .pw-input__action .pw-icon { width: var(--pw-icon-sm); height: var(--pw-icon-sm); }
/* =============================================================================
ONE-TIME CODE · .pw-otp
A verification code, one box per character. ONE real does the work:
it lies over the boxes, invisible, so typing, paste, SMS autofill
(autocomplete="one-time-code"), undo and the screen reader all behave as
they do for any input -- the boxes only draw what it holds. Without the
script it is a plain field and still works.
Sizes sm (40) · md (48, default) · lg (56)
States empty · typing · filled · invalid · success · disabled
============================================================================= */
.pw-otp {
--pw-otp-size: 48px;
position: relative;
display: inline-flex; align-items: center; gap: var(--pw-space-5);
direction: ltr; /* a code reads left to right in every language */
max-width: 100%;
}
.pw-otp--sm { --pw-otp-size: 40px; }
.pw-otp--lg { --pw-otp-size: 56px; }
/* Before the script: an ordinary field, wide enough for the code. */
.pw-otp__input {
width: calc(var(--pw-otp-size) * 4.5); height: var(--pw-otp-size);
padding-inline: var(--pw-space-6);
border: 1px solid var(--pw-field-border); border-radius: var(--pw-radius-lg);
background: var(--pw-field-bg); color: var(--pw-field-fg);
font: inherit; font-size: var(--pw-text-lg-size); letter-spacing: .3em; font-variant-numeric: tabular-nums;
}
/* After: stretched over the boxes and invisible. 16px keeps iOS from zooming
the page on focus; the caret and the selection are the boxes' to show. */
.pw-otp.is-ready .pw-otp__input {
position: absolute; inset: 0; z-index: 2;
width: 100%; height: 100%; padding: 0; border: 0;
font-size: 16px; letter-spacing: 0;
color: transparent; caret-color: transparent; background: transparent;
opacity: 0; cursor: text;
}
.pw-otp.is-ready .pw-otp__input::selection { background: transparent; }
.pw-otp__group { display: flex; gap: var(--pw-space-3); }
.pw-otp__slot {
position: relative;
display: grid; place-items: center;
width: var(--pw-otp-size); height: calc(var(--pw-otp-size) * 1.12);
border: 1px solid var(--pw-field-border); border-radius: var(--pw-radius-lg);
background: var(--pw-field-bg); color: var(--pw-field-fg);
font-size: calc(var(--pw-otp-size) * .42); font-weight: var(--pw-font-weight-semibold);
font-variant-numeric: tabular-nums; line-height: 1;
transition: border-color var(--pw-duration-fast) var(--pw-ease-out), background-color var(--pw-duration-fast) var(--pw-ease-out);
}
.pw-otp:hover .pw-otp__slot { border-color: var(--pw-field-border-hover); }
.pw-otp__char { display: block; }
.pw-otp__ph { color: var(--pw-field-placeholder); font-weight: var(--pw-font-weight-regular); }
/* The dash between groups: where a person pauses when they read it out. */
.pw-otp__sep { flex: none; width: 10px; height: 2px; border-radius: var(--pw-radius-pill); background: var(--pw-fg-quaternary); }
/* Where the next character goes: one ring that travels from box to box
rather than a focus style on each, so the eye follows it. */
.pw-otp__ring {
position: absolute; top: 0; left: 0; z-index: 1;
border: 1.5px solid var(--pw-field-border-focus); border-radius: var(--pw-radius-lg);
box-shadow: var(--pw-focus-ring);
pointer-events: none; opacity: 0;
}
.pw-otp.is-focused .pw-otp__ring { opacity: 1; }
/* Wrong code: every box says so, and the ring with them. The code stays, so
the person can see what they typed. */
.pw-otp[data-state="invalid"] .pw-otp__slot { border-color: var(--pw-border-danger); }
.pw-otp[data-state="invalid"] .pw-otp__ring { border-color: var(--pw-fg-danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pw-fg-danger) 22%, transparent); }
.pw-otp[data-state="success"] .pw-otp__slot { border-color: var(--pw-fg-success); background: var(--pw-tint-success-bg); color: var(--pw-fg-success); }
.pw-otp[data-state="success"] .pw-otp__ring { opacity: 0; }
.pw-otp:has(.pw-otp__input:disabled) { cursor: not-allowed; }
.pw-otp:has(.pw-otp__input:disabled) .pw-otp__slot { background: var(--pw-field-bg-disabled); border-color: var(--pw-border-subtle); color: var(--pw-fg-disabled); }
.pw-otp:has(.pw-otp__input:disabled) .pw-otp__input { cursor: not-allowed; }
/* Error / success / disabled / readonly */
.pw-input-wrap.is-error { border-color: var(--pw-color-danger-500); }
.pw-input-wrap.is-error:focus-within { box-shadow: 0 0 0 4px rgba(240, 68, 56, 0.24); }
.pw-input-wrap.is-success { border-color: var(--pw-color-success-500); }
.pw-input-wrap.is-success:focus-within { box-shadow: 0 0 0 4px rgba(18, 183, 106, 0.22); }
.pw-input-wrap.is-disabled,
.pw-input-wrap:has(.pw-input:disabled) {
background: var(--pw-field-bg-disabled);
border-color: var(--pw-border-subtle);
cursor: not-allowed;
}
.pw-input:disabled { color: var(--pw-fg-disabled); cursor: not-allowed; }
.pw-input:disabled::placeholder { color: var(--pw-fg-disabled); }
.pw-input-wrap.is-readonly { background: var(--pw-bg-subtle); border-color: var(--pw-border-subtle); }
/* Textarea */
/* A multi-line field cannot be a pill — the corners would clip the first and
last lines. It takes the largest radius that still clears the text. */
.pw-textarea-wrap { align-items: stretch; padding-block: var(--pw-space-5); border-radius: var(--pw-radius-xl); }
.pw-textarea {
resize: vertical;
min-height: 88px;
line-height: var(--pw-text-md-line);
}
.pw-textarea--autosize { resize: none; overflow: hidden; }
.pw-char-count { align-self: flex-end; font-size: var(--pw-text-xs-size); color: var(--pw-fg-quaternary); }
.pw-char-count.is-over { color: var(--pw-fg-danger); }
/* Grouped input — prefix/suffix blocks welded to the field */
.pw-input-group { display: flex; align-items: stretch; }
.pw-input-group > .pw-input-wrap { flex: 1; border-radius: 0; }
.pw-input-group > :first-child { border-start-start-radius: var(--pw-radius-pill); border-end-start-radius: var(--pw-radius-pill); }
.pw-input-group > :last-child { border-start-end-radius: var(--pw-radius-pill); border-end-end-radius: var(--pw-radius-pill); }
.pw-input-group > * + * { margin-inline-start: -1px; }
.pw-input-group__addon {
display: inline-flex; align-items: center; gap: var(--pw-space-3);
padding-inline: var(--pw-space-6);
border: 1px solid var(--pw-field-border);
background: var(--pw-bg-subtle);
color: var(--pw-fg-tertiary);
font-size: var(--pw-text-sm-size);
white-space: nowrap;
}
/* =============================================================================
SEARCH FIELD
The product's signature control. Pill, generous height, trailing clear and
submit. The leading slot is empty by default — see the rule in pw-search.css.
Used on the home page, the SERP header and the maps launcher.
============================================================================= */
.pw-search {
display: flex; align-items: center; gap: var(--pw-space-6);
width: 100%;
/* Height and inline padding are custom properties, not literals, because two
things inside the field are derived from them — the mode disc's diameter
and the inset that keeps it optically centred in the field's cap. Written
as literals, a size variant would move the field and leave the disc behind. */
--pw-search-height: 48px;
--pw-search-px: var(--pw-space-8);
height: var(--pw-search-height);
padding-inline: var(--pw-search-px);
border: 1px solid var(--pw-border-default);
border-radius: var(--pw-radius-pill);
background: var(--pw-field-bg);
box-shadow: var(--pw-shadow-xs);
transition: border-color var(--pw-duration-fast) var(--pw-ease-out), box-shadow var(--pw-duration-base) var(--pw-ease-out);
}
.pw-search:hover { box-shadow: var(--pw-shadow-md); }
.pw-search:focus-within { border-color: var(--pw-border-strong); box-shadow: var(--pw-shadow-lg); }
.pw-search--sm { --pw-search-height: 40px; --pw-search-px: var(--pw-space-6); gap: var(--pw-space-4); }
.pw-search--xs {
--pw-search-height: 32px;
--pw-search-px: var(--pw-space-5);
min-height: 32px;
gap: var(--pw-space-3);
font-size: var(--pw-text-sm-size);
}
.pw-search--xs .pw-search__input { font-size: var(--pw-text-sm-size); line-height: var(--pw-text-sm-line); }
/* A field inside a popover is a *filter for the list below it*, not a place
you go to compose something. At full height it out-weighs every option it
is meant to be narrowing, and it eats the vertical space the list needs.
So any search field in any layer is forced down to 32px, whatever size the
caller asked for — this is not a suggestion the markup can get wrong. */
.pw-filter-menu .pw-search,
.pw-select__menu .pw-search,
.pw-menu .pw-search,
.pw-settings-menu .pw-search,
.pw-suggest .pw-search {
height: 32px;
min-height: 32px; /* the base sets min-height: 48px */
padding-inline: var(--pw-space-5);
gap: var(--pw-space-3);
box-shadow: none;
}
.pw-filter-menu .pw-search .pw-search__input,
.pw-select__menu .pw-search .pw-search__input,
.pw-menu .pw-search .pw-search__input,
.pw-settings-menu .pw-search .pw-search__input,
.pw-suggest .pw-search .pw-search__input {
font-size: var(--pw-text-sm-size);
line-height: var(--pw-text-sm-line);
}
/* A field in a layer is 32px, so its glyphs step down with it. */
.pw-filter-menu .pw-search,
.pw-select__menu .pw-search,
.pw-menu .pw-search,
.pw-settings-menu .pw-search,
.pw-suggest .pw-search { --pw-search-glyph: var(--pw-icon-sm); }
.pw-search--lg { --pw-search-height: 56px; }
/* Every glyph in a field is one size, declared once.
The leading slot and the trailing actions sit in the same pill an inch
apart, and they had drifted to 16 and 20: the markup asked for `pw-icon--sm`
on the left while `.pw-input__action` forced `md` on the right, and the
per-size overrides then disagreed with each other about which was which.
A single custom property removes the possibility rather than correcting the
instances — the field states the size, both ends read it. */
.pw-search { --pw-search-glyph: var(--pw-icon-md); }
.pw-search--sm,
.pw-search--xs { --pw-search-glyph: var(--pw-icon-sm); }
.pw-search__icon { color: var(--pw-field-icon); }
.pw-search .pw-search__icon:not(.pw-mark-pin),
.pw-search .pw-input__action .pw-icon {
width: var(--pw-search-glyph);
height: var(--pw-search-glyph);
}
/* A brand mark is exempt: it has its own aspect ratio, and forcing it into the
glyph's square flattens it. It matches on height instead. */
.pw-search .pw-mark-pin { height: calc(var(--pw-search-glyph) * 1.25); width: auto; }
.pw-search__input {
flex: 1; min-width: 0; border: 0; padding: 0; background: transparent;
color: var(--pw-field-fg);
font-size: var(--pw-text-md-size); line-height: var(--pw-text-md-line);
outline: none;
}
.pw-search__input::placeholder { color: var(--pw-field-placeholder); }
.pw-search__input::-webkit-search-cancel-button { display: none; }
.pw-search__divider {
width: 1px; height: 22px;
background: var(--pw-border-default);
flex: 0 0 auto;
/* Spacing is one value used on both sides, never a pair. A divider is read
as the middle of the gap it sits in, so the moment the two halves differ
it stops looking like a separator and starts looking misplaced. Variants
tune the amount, never the balance. */
margin-inline: var(--pw-search-divider-gap, 0px);
}
/* `.pw-input__action` carries a negative end margin so the LAST control in a
field sits optically at the padding edge rather than a whole button-box in
from it. A button followed by a divider is not at that edge — it is one of
the two things the divider separates — so it hands the correction back.
Without this the gap before the divider is short by exactly that margin,
which is what made the clear button sit tight against it. */
.pw-search .pw-input__action:has(+ .pw-search__divider) { margin-inline-end: 0; }
/* A leading control inside the field — the tablet layout puts the menu here,
because at that width the rail costs more than it earns and the field is the
one thing always on screen. Its divider is structural, not conditional: it
separates two permanent things, so unlike the clear button's divider it does
not fade with the value. */
.pw-search__lead { margin-inline-start: calc(var(--pw-space-3) * -1); }
.pw-search__divider--lead { opacity: 1 !important; visibility: visible !important; }
/* -- Mode switcher ---------------------------------------------------------
The leading slot as the search SCOPE — Web, Shopping, Hotels, Flights — and
the one thing that may live there other than a lead control, a spinner or
the maps mark.
This is not the magnifier coming back. The rule the magnifier broke was that
the leading edge must not hold a decoration that repeats what the field
already says; the mode trigger is a control you press, it changes what the
query means, and its glyph is the only place the current scope is stated.
Search itself stays where it always is, on the trailing edge.
It is the icon button, composed in the markup — the trigger inherits every
state from it and this class only sizes it against the field and rounds it:
class="pw-btn pw-btn--icon pw-search__mode"
Sized from the field so the two never drift: the trigger is the field's
height less the padding it sits in, which keeps it a disc rather than a pill
at every size. */
.pw-search { position: relative; }
.pw-search__mode {
/* 90% of the field, so the disc reads as filling the cap rather than floating
in it, and the leftover 5% top and bottom is the only air around it. */
--pw-btn-height: calc(var(--pw-search-height) * 0.9);
--pw-btn-radius: var(--pw-radius-circle);
/* Pulled back out of the field's padding so the gap at the leading edge
matches the gap above and below. Anything else and a circle inset 16px on
one side and 2px on the other reads as misaligned even though it is
centred. */
/* The extra 1px is the field's own border: the 5% is measured off the border
box, but the padding this margin cancels starts inside it, so without it
the leading gap lands exactly one border-width wider than the one above. */
margin-inline-start: calc(var(--pw-search-height) * 0.05 - var(--pw-search-px) - 1px);
flex: 0 0 auto;
background: var(--pw-bg-muted);
color: var(--pw-fg-secondary);
}
.pw-search__mode:hover { background: var(--pw-bg-strong); color: var(--pw-fg-primary); }
.pw-search__mode[aria-expanded="true"] {
background: var(--pw-bg-selected);
color: var(--pw-fg-brand);
}
/* The glyph swaps with the mode, so it animates rather than cutting. */
.pw-search__mode .pw-icon {
transition: scale var(--pw-duration-fast) var(--pw-ease-out);
}
.pw-search__mode[aria-expanded="true"] .pw-icon { scale: 1.08; }
/* The menu hangs off the field's leading edge, under the trigger it belongs to. */
.pw-search__modes {
position: absolute;
top: calc(100% + var(--pw-space-4));
inset-inline-start: 0;
z-index: var(--pw-z-dropdown);
width: 264px;
max-width: 100%;
}
/* Off — the setting that hides the switcher leaves a plain, non-interactive
mark in its place rather than closing the gap. Removing it would shift the
placeholder by 40px the moment someone flipped a setting, and the field is
the most position-sensitive thing on the page. */
.pw-search__mode--static {
pointer-events: none;
background: transparent;
color: var(--pw-field-icon);
}
/* -- Multi-line ------------------------------------------------------------
A long query that wraps instead of scrolling sideways. Three lines, then it
scrolls — past that the field is taller than the results it is filtering.
Enter still submits: the newlines here come from WRAPPING, not from typing
them. That is the whole difference between this and a composer, and it is
why the field grows without ever offering to hold a paragraph.
Three things change the moment it is more than one line tall:
1. The pill relaxes. A pill radius on a three-line box clips the first and
last lines against the curve — the house rule already says a textarea
takes `xl` for exactly this reason.
2. Everything aligns to the FIRST line and stays there. Pinning the clear
and submit buttons to the growing edge would walk them down the screen
while someone is typing, which is the same mistake as a stepper that
resizes under the finger.
3. The row switches from centred to top-aligned, so line one sits where the
single-line field's text sat. Nothing jumps at the moment it wraps.
-------------------------------------------------------------------------- */
/* Doubled up so it outweighs the per-surface height overrides — the SERP
header pins its field to 48px, and a variant whose whole job is to grow has
to beat that wherever it is used. */
.pw-search.pw-search--multiline { height: auto; min-height: 48px; }
/* Only the grown state changes the layout. At one line the field keeps the
base's centring and its 48px min-height, so it is not merely similar to the
single-line field — it is pixel-identical to it. */
.pw-search.pw-search--multiline.is-multiline {
align-items: flex-start;
padding-block: 12px; /* (48 − 24 line-height) ÷ 2 */
}
.pw-search.pw-search--multiline.pw-search--sm.is-multiline { padding-block: 8px; }
.pw-search--multiline .pw-search__input {
display: block;
resize: none;
overflow-y: auto;
/* The gutter is reserved whether or not the thumb is visible, so the text
never reflows at the moment the query outgrows three lines. */
padding-inline-end: var(--pw-space-3);
scrollbar-width: none; /* Firefox: no thumb at all */
max-height: calc(var(--pw-text-md-line) * 3);
scrollbar-width: thin;
}
/* Everything that is not the text centres on the FIRST line, whatever its own
height. Each offset is (line box − own height) ÷ 2, computed from the tokens
rather than nudged by eye — which is why the action button's size had to
become a variable. Top-aligning them instead would drop each control by half
its own height at the exact moment the query wraps: a visible twitch on a
button the person is about to click. */
.pw-search--multiline.is-multiline > * { align-self: flex-start; }
.pw-search--multiline.is-multiline > .pw-search__icon {
margin-block-start: calc((var(--pw-text-md-line) - var(--pw-icon-md)) / 2);
}
.pw-search--multiline.is-multiline > .pw-input__action {
margin-block-start: calc((var(--pw-text-md-line) - var(--pw-input-action-size)) / 2);
}
.pw-search--multiline.is-multiline > .pw-search__divider {
height: var(--pw-text-md-line); /* the divider spans the first line */
}
.pw-search.pw-search--multiline.is-multiline { border-radius: var(--pw-radius-2xl); }
/* The thumb appears only while the field is actually being scrolled, then
fades. A bar parked permanently against the clear button reads as chrome the
field has grown; a bar that arrives when you scroll reads as an answer to
what you just did. `.is-scrolling` is stamped by the controller and cleared
on a timer.
Firefox gets no thumb rather than a permanent one — `scrollbar-width` has no
fadeable part, and of the two states the quiet one is the better default. */
.pw-search--multiline .pw-search__input::-webkit-scrollbar { width: 6px; }
.pw-search--multiline .pw-search__input::-webkit-scrollbar-track { background: transparent; }
.pw-search--multiline .pw-search__input::-webkit-scrollbar-thumb {
border-radius: var(--pw-radius-pill);
background-color: transparent;
transition: background-color var(--pw-duration-slow) var(--pw-ease-out);
}
.pw-search--multiline .pw-search__input.is-scrolling::-webkit-scrollbar-thumb,
.pw-search--multiline .pw-search__input:hover::-webkit-scrollbar-thumb {
background-color: var(--pw-border-strong);
transition-duration: var(--pw-duration-fast);
}
/* -- A submit button standing beside the field -----------------------------
The maps launcher puts its search button outside the pill. It is the same
control at the same height, so it is sized from the field rather than from
the button scale — and laid out in a row rather than positioned by hand,
which is what let it drift out of alignment in the first place. */
.pw-search-row { display: flex; align-items: center; gap: var(--pw-space-6); }
.pw-search-row > .pw-combobox,
.pw-search-row > .pw-search { flex: 1 1 auto; min-width: 0; }
.pw-search-row > .pw-btn { --pw-btn-height: 48px; flex: 0 0 auto; }
.pw-search-row:has(.pw-search--sm) > .pw-btn { --pw-btn-height: 40px; }
.pw-search-row:has(.pw-search--lg) > .pw-btn { --pw-btn-height: 56px; }
/* Set the variable, not the literals: the multiline variant centres these on
the first line with (line box − size) ÷ 2, and a hard-coded width leaves that
arithmetic reading 32 while the button is really 34. The glyph size is gone
from here entirely — the field owns it now, through `--pw-search-glyph`, so
both ends of the pill cannot disagree. */
.pw-search .pw-input__action { --pw-input-action-size: 34px; }
.pw-search--lg .pw-input__action { --pw-input-action-size: 38px; }
/* The clear button and its divider fade rather than blink.
`display: none` is a cut: the button is simply not there on one frame and
fully there on the next, at the exact moment someone types their first
character — the busiest moment the field has. Hidden by opacity instead, it
arrives with the text. It also keeps its seat, so the submit button does not
jump sideways on that same keystroke. */
.pw-search__clear,
.pw-search__divider {
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity var(--pw-duration-base) var(--pw-ease-out),
visibility 0s linear var(--pw-duration-base);
}
.pw-search.has-value .pw-search__clear,
.pw-search.has-value .pw-search__divider {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition:
opacity var(--pw-duration-base) var(--pw-ease-out),
visibility 0s;
}
/* A field with no clear button at all keeps its divider — there is nothing
conditional about it. */
.pw-search:not(:has(.pw-search__clear)) .pw-search__divider {
opacity: 1; visibility: visible;
}
/* =============================================================================
SELECT (custom — never the native control)
The chevron is always the trailing affordance so the control reads the same
everywhere, and so we can style the menu, options and states consistently.
Structure
.pw-select > button.pw-select__trigger > .pw-select__value + .pw-select__caret
> .pw-select__menu > .pw-select__option
============================================================================= */
.pw-select { position: relative; display: inline-flex; min-width: 0; }
.pw-select--block { display: flex; width: 100%; }
.pw-select__trigger {
--pw-select-height: 40px;
display: flex;
align-items: center;
gap: var(--pw-space-4);
width: 100%;
min-width: 0;
height: var(--pw-select-height);
padding-inline: var(--pw-space-6);
border: 1px solid var(--pw-field-border);
border-radius: var(--pw-radius-pill); /* fully rounded is the default */
background: var(--pw-field-bg);
color: var(--pw-field-fg);
font-size: var(--pw-text-sm-size);
text-align: start;
cursor: pointer;
transition:
border-color var(--pw-duration-fast) var(--pw-ease-out),
box-shadow var(--pw-duration-fast) var(--pw-ease-out),
background-color var(--pw-duration-fast) var(--pw-ease-out);
}
.pw-select__trigger:hover { border-color: var(--pw-field-border-hover); }
.pw-select__trigger:focus-visible,
.pw-select__trigger[aria-expanded="true"] {
outline: none;
border-color: var(--pw-field-border-focus);
box-shadow: var(--pw-focus-ring);
}
.pw-select--sm .pw-select__trigger { --pw-select-height: 32px; padding-inline: var(--pw-space-5); font-size: var(--pw-text-sm-size); }
.pw-select--lg .pw-select__trigger { --pw-select-height: 48px; padding-inline: var(--pw-space-8); font-size: var(--pw-text-md-size); }
.pw-select--pill .pw-select__trigger { border-radius: var(--pw-radius-pill); } /* alias */
.pw-select--squared .pw-select__trigger { border-radius: var(--pw-radius-md); }
/* Quiet flavour — the SERP filter bar chips */
.pw-select--quiet .pw-select__trigger {
height: 32px;
background: var(--pw-bg-surface); border-color: var(--pw-border-default);
color: var(--pw-fg-secondary); font-size: var(--pw-text-sm-size);
font-weight: var(--pw-font-weight-medium);
}
.pw-select--quiet .pw-select__trigger:hover { background: var(--pw-bg-hover); }
.pw-select__value { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--pw-space-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--pw-font-weight-medium); }
.pw-select__value.is-placeholder { color: var(--pw-field-placeholder); font-weight: var(--pw-font-weight-regular); }
/* Trailing chevron — pinned to the end of the trigger, rotates when open. */
.pw-select__caret {
flex: 0 0 auto;
margin-inline-start: auto;
color: var(--pw-fg-quaternary);
transition: transform var(--pw-duration-base) var(--pw-ease-out);
}
.pw-select__trigger[aria-expanded="true"] .pw-select__caret { transform: rotate(180deg); }
.pw-select__trigger:disabled,
.pw-select.is-disabled .pw-select__trigger {
background: var(--pw-field-bg-disabled);
border-color: var(--pw-border-subtle);
color: var(--pw-fg-disabled);
cursor: not-allowed;
}
.pw-select.is-error .pw-select__trigger { border-color: var(--pw-color-danger-500); }
/* -- Menu ------------------------------------------------------------------- */
.pw-select__menu {
position: absolute;
z-index: var(--pw-z-dropdown);
inset-inline-start: 0;
top: calc(100% + var(--pw-space-2));
min-width: 100%;
max-width: 100%; /* a menu wider than its field drags the page sideways */
max-height: 320px;
padding: var(--pw-space-2);
overflow-y: auto;
overscroll-behavior: contain;
border: 1px solid var(--pw-border-default);
border-radius: var(--pw-radius-lg);
background: var(--pw-bg-surface);
box-shadow: var(--pw-shadow-xl);
opacity: 0;
transform: translateY(-4px) scale(0.985);
transform-origin: top center;
pointer-events: none;
transition:
opacity var(--pw-duration-fast) var(--pw-ease-out),
transform var(--pw-duration-fast) var(--pw-ease-out),
visibility var(--pw-duration-fast);
visibility: hidden;
}
.pw-select.is-open > .pw-select__menu {
opacity: 1; transform: none; pointer-events: auto; visibility: visible;
}
.pw-select__menu--end { inset-inline-start: auto; inset-inline-end: 0; }
.pw-select__menu--above { top: auto; bottom: calc(100% + var(--pw-space-2)); transform-origin: bottom center; }
.pw-select__search {
position: sticky; top: calc(var(--pw-space-2) * -1);
z-index: 1;
margin: calc(var(--pw-space-2) * -1) calc(var(--pw-space-2) * -1) var(--pw-space-2);
padding: var(--pw-space-3);
border-bottom: 1px solid var(--pw-border-subtle);
background: var(--pw-bg-surface);
}
.pw-select__group-label {
padding: var(--pw-space-4) var(--pw-space-5) var(--pw-space-2);
font-size: var(--pw-text-xs-size);
font-weight: var(--pw-font-weight-bold);
letter-spacing: var(--pw-tracking-caps);
text-transform: uppercase;
color: var(--pw-fg-quaternary);
}
.pw-select__option {
display: flex;
align-items: center;
gap: var(--pw-space-5);
width: 100%;
min-height: 38px;
padding: var(--pw-space-3) var(--pw-space-5);
border: 0;
border-radius: var(--pw-radius-md);
background: transparent;
color: var(--pw-fg-primary);
font-size: var(--pw-text-sm-size);
text-align: start;
cursor: pointer;
transition: background-color var(--pw-duration-instant) var(--pw-ease-out);
font-weight: var(--pw-font-weight-medium);
}
.pw-select__option:hover,
.pw-select__option.is-active { background: var(--pw-bg-hover); }
.pw-select__option[aria-selected="true"] { color: var(--pw-fg-brand); font-weight: var(--pw-font-weight-medium); }
.pw-select__option[aria-disabled="true"] { color: var(--pw-fg-disabled); cursor: not-allowed; }
.pw-select__option[aria-disabled="true"]:hover { background: transparent; }
/* A RICH option: a glyph, a name, and a line saying what choosing it does.
Used where the options are not obviously different from each other -- four
tones are four words until something tells you what they mean -- and the
selection is the whole row rather than a tick at the end, because the row is
what was chosen. */
.pw-select__option--rich { align-items: flex-start; padding: var(--pw-space-5); border-radius: var(--pw-radius-lg); }
.pw-select__option--rich > .pw-icon { margin-block-start: 2px; color: var(--pw-fg-tertiary); }
/* The name keeps the menu item's medium weight. Semibold here made a submenu of
14px names read a size larger than the 14px menu that opened it -- weight is
what the eye reads as size when the two lists sit side by side. */
.pw-select__option--rich .pw-select__option-title { font-weight: var(--pw-font-weight-medium); }
/* Chosen is the row being filled, in the page's own neutral. A brand tint would
make the selected tone a different KIND of thing from the three beside it --
a link among options -- when all it is is the one that is on. */
.pw-select__option--rich[aria-selected="true"] { background: var(--pw-bg-muted); color: var(--pw-fg-primary); }
.pw-select__option--rich[aria-selected="true"] > .pw-icon { color: var(--pw-fg-primary); }
.pw-select__option--rich[aria-selected="true"] .pw-select__option-desc { color: var(--pw-fg-secondary); }
.pw-select__option-body { flex: 1; min-width: 0; }
.pw-select__option-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The weight is set, not inherited: the description is a sentence, and a row
that goes medium or semibold must not take its explanation with it. */
.pw-select__option-desc { display: block; font-size: var(--pw-text-xs-size); line-height: var(--pw-text-xs-line); font-weight: var(--pw-font-weight-regular); color: var(--pw-fg-tertiary); }
.pw-select__option-check { margin-inline-start: auto; color: var(--pw-fg-brand); opacity: 0; }
.pw-select__option[aria-selected="true"] .pw-select__option-check { opacity: 1; }
.pw-select__flag { width: 20px; height: 20px; border-radius: var(--pw-radius-circle); flex: 0 0 auto; }
.pw-select__empty { padding: var(--pw-space-8) var(--pw-space-5); text-align: center; font-size: var(--pw-text-sm-size); color: var(--pw-fg-tertiary); }
.pw-select__footer {
position: sticky; bottom: calc(var(--pw-space-2) * -1);
display: flex; gap: var(--pw-space-4); justify-content: flex-end;
margin: var(--pw-space-2) calc(var(--pw-space-2) * -1) calc(var(--pw-space-2) * -1);
padding: var(--pw-space-4) var(--pw-space-5);
border-top: 1px solid var(--pw-border-subtle);
background: var(--pw-bg-surface);
}
/* Multi-select: selected values render as removable tokens inside the trigger */
.pw-select__tokens { display: flex; flex-wrap: wrap; gap: var(--pw-space-2); align-items: center; }
/* Tokens wrap, so the trigger grows past one line and a pill stops working. */
.pw-select--multi .pw-select__trigger { height: auto; min-height: 40px; padding-block: var(--pw-space-2); border-radius: var(--pw-radius-xl); }
.pw-select__token {
display: inline-flex; align-items: center; gap: var(--pw-space-2);
height: 24px; padding-inline: var(--pw-space-4);
border-radius: var(--pw-radius-sm);
background: var(--pw-bg-muted);
font-size: var(--pw-text-xs-size);
}
.pw-select__token button { border: 0; background: none; color: var(--pw-fg-quaternary); cursor: pointer; display: inline-flex; }
.pw-select__token button:hover { color: var(--pw-fg-primary); }
/* =============================================================================
COMBOBOX (type-ahead over a select menu)
Maps place lookup, destination pickers, anything with server-side suggestions.
============================================================================= */
.pw-combobox { position: relative; display: flex; width: 100%; }
.pw-combobox .pw-select__menu { max-height: 380px; }
.pw-combobox__row {
display: flex; align-items: center; gap: var(--pw-space-6);
width: 100%;
padding: var(--pw-space-5);
border: 0; border-radius: var(--pw-radius-md);
background: transparent; text-align: start; cursor: pointer;
}
.pw-combobox__row:hover, .pw-combobox__row.is-active { background: var(--pw-bg-hover); }
/* The medallion is back, and it fits now.
It had to go while the field carried a leading magnifier: a 32px disc cannot
centre on a 16px glyph without shrinking to nothing or dragging the field's
text inward to meet it. With the magnifier gone from the leading edge there
is nothing left to align against, so the constraint went with it — the row
is free to lead with a medallion, and the list reads as a set of results
rather than a column of loose text. */
.pw-combobox__row-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; flex: 0 0 auto;
border-radius: var(--pw-radius-circle);
background: var(--pw-bg-muted); color: var(--pw-fg-tertiary);
}
.pw-combobox__row-body { flex: 1; min-width: 0; }
.pw-combobox__row-title { display: block; font-size: var(--pw-text-sm-size); color: var(--pw-fg-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-combobox__row-title mark { background: none; color: inherit; font-weight: var(--pw-font-weight-semibold); }
.pw-combobox__row-sub { display: block; font-size: var(--pw-text-sm-size); color: var(--pw-fg-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A row that carries its own trailing action cannot BE a button: a button
inside a button is invalid, and the parser hoists the inner one out of the
row, which takes the row apart. So the row becomes a container, the title
becomes the control, and the stretched overlay hands it back the whole row
to be clicked on. Same shape as `.pw-suggest__item`, for the same reason. */
button.pw-combobox__row-title {
width: 100%;
border: 0; padding: 0;
background: transparent;
font-family: inherit; font-weight: inherit; text-align: start;
cursor: pointer;
}
/* =============================================================================
CHECKBOX · RADIO
The native input stays in the DOM for forms and assistive tech; it is made
invisible and the visual box is drawn by ::before on the control span.
============================================================================= */
.pw-choice {
display: flex;
align-items: flex-start;
gap: var(--pw-space-5);
cursor: pointer;
}
.pw-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.pw-choice__box {
position: relative;
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px; flex: 0 0 auto;
margin-top: 1px;
border: 1px solid var(--pw-field-border);
border-radius: var(--pw-radius-xs);
background: var(--pw-field-bg);
color: transparent;
transition:
background-color var(--pw-duration-fast) var(--pw-ease-out),
border-color var(--pw-duration-fast) var(--pw-ease-out),
color var(--pw-duration-fast) var(--pw-ease-out),
box-shadow var(--pw-duration-fast) var(--pw-ease-out);
}
.pw-choice--radio .pw-choice__box { border-radius: var(--pw-radius-circle); }
.pw-choice--lg .pw-choice__box { width: 20px; height: 20px; }
.pw-choice:hover .pw-choice__box { border-color: var(--pw-field-border-hover); background: var(--pw-bg-hover); }
.pw-choice input:focus-visible + .pw-choice__box { box-shadow: var(--pw-focus-ring); border-color: var(--pw-field-border-focus); }
.pw-choice input:checked + .pw-choice__box,
.pw-choice input:indeterminate + .pw-choice__box {
background: var(--pw-action-bg);
border-color: var(--pw-action-bg);
color: var(--pw-color-white);
}
.pw-choice:hover input:checked + .pw-choice__box { background: var(--pw-action-bg-hover); border-color: var(--pw-action-bg-hover); }
/* Checkbox tick */
.pw-choice__box .pw-icon { width: 12px; height: 12px; stroke-width: 3.5; opacity: 0; transition: opacity var(--pw-duration-fast) var(--pw-ease-out); }
.pw-choice input:checked + .pw-choice__box .pw-icon { opacity: 1; }
/* Indeterminate bar */
.pw-choice input:indeterminate + .pw-choice__box::after {
content: ""; position: absolute; width: 9px; height: 2px; border-radius: 1px; background: currentColor;
}
.pw-choice input:indeterminate + .pw-choice__box .pw-icon { opacity: 0; }
/* Radio dot */
.pw-choice--radio .pw-choice__box::after {
content: ""; width: 6px; height: 6px; border-radius: var(--pw-radius-circle);
background: currentColor; transform: scale(0);
transition: transform var(--pw-duration-fast) var(--pw-ease-spring);
}
.pw-choice--radio input:checked + .pw-choice__box::after { transform: scale(1); }
/* -- On imagery rather than on paper ----------------------------------------
A checkbox standing on a photograph, a poster or a lightbox scrim. Same
control, same size, same checked state -- only the RESTING material changes,
because `--pw-field-bg` is paper white and a paper-white box on a dark scrim
reads as a hole punched in the picture rather than as something to tick.
The scrim under it is dark in both themes, so nothing here inverts: this is
the same pair of on-overlay values the lightbox's own controls are made of.
Checked is deliberately left alone -- solid brand with a white tick already
carries on imagery, and a modifier should change only what the surface
actually requires. */
.pw-choice--on-media .pw-choice__box {
border-color: var(--pw-bg-on-overlay-strong);
background: var(--pw-bg-on-overlay);
}
.pw-choice--on-media:hover .pw-choice__box {
border-color: var(--pw-bg-on-overlay-strong);
background: var(--pw-bg-on-overlay-strong);
}
.pw-choice--on-media .pw-choice__label { color: var(--pw-fg-on-overlay); }
/* The second line keeps its step down from the first, but by opacity rather
than by a paper grey -- `--pw-fg-tertiary` is mixed for a white page and
disappears into a scrim. */
.pw-choice--on-media .pw-choice__desc { color: var(--pw-fg-on-overlay); opacity: 0.72; }
/* The ring needs a dark gap to sit in, the way the lightbox's buttons do -- the
page's own focus ring assumes paper behind it. */
.pw-choice--on-media input:focus-visible + .pw-choice__box {
border-color: var(--pw-fg-on-overlay);
box-shadow: 0 0 0 2px var(--pw-bg-lightbox), 0 0 0 4px var(--pw-fg-on-overlay);
}
.pw-choice input:disabled + .pw-choice__box {
background: var(--pw-bg-disabled);
border-color: var(--pw-border-subtle);
color: var(--pw-fg-disabled);
}
.pw-choice:has(input:disabled) { cursor: not-allowed; color: var(--pw-fg-disabled); }
.pw-choice__body { min-width: 0; }
.pw-choice__label { display: block; font-size: var(--pw-text-sm-size); line-height: var(--pw-text-sm-line); color: var(--pw-fg-primary); font-weight: var(--pw-font-weight-medium); }
.pw-choice__desc { display: block; margin-top: 2px; font-size: var(--pw-text-sm-size); line-height: var(--pw-text-sm-line); color: var(--pw-fg-tertiary); }
/* Card flavour — the whole tile is the hit target (units of measure, plan picker) */
.pw-choice--card {
padding: var(--pw-space-6);
border: 1px solid var(--pw-border-default);
border-radius: var(--pw-radius-lg);
background: var(--pw-bg-surface);
transition: border-color var(--pw-duration-fast) var(--pw-ease-out), background-color var(--pw-duration-fast) var(--pw-ease-out);
}
.pw-choice--card:hover { border-color: var(--pw-border-strong); }
.pw-choice--card:has(input:checked) { border-color: var(--pw-color-brand-500); background: var(--pw-bg-selected); }
.pw-choice-group { display: flex; flex-direction: column; gap: var(--pw-space-5); }
.pw-choice-group--row { flex-direction: row; flex-wrap: wrap; gap: var(--pw-space-10); }
/* =============================================================================
SWITCH
============================================================================= */
.pw-switch {
--pw-switch-w: 36px;
--pw-switch-h: 20px;
--pw-switch-pad: 2px;
position: relative;
display: inline-block;
width: var(--pw-switch-w);
height: var(--pw-switch-h);
flex: 0 0 auto;
cursor: pointer;
}
.pw-switch--sm { --pw-switch-w: 28px; --pw-switch-h: 16px; }
.pw-switch--lg { --pw-switch-w: 44px; --pw-switch-h: 24px; --pw-switch-pad: 3px; }
.pw-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pw-switch__track {
position: absolute; inset: 0;
border-radius: var(--pw-radius-pill);
background: var(--pw-color-gray-200);
transition: background-color var(--pw-duration-base) var(--pw-ease-out);
}
html.dark .pw-switch__track, [data-pw-theme="dark"] .pw-switch__track { background: var(--pw-color-gray-700); }
/* The knob is drawn BY THE TRACK, not by a separate element.
*
* It used to need its own ``, and a switch
* written without one rendered as a bare pill with nothing in it — which is
* not obviously broken, just a switch that appears to have no state. A part
* you can forget is a part that will be forgotten. Now the markup is the
* input plus the track, and the knob cannot go missing.
* `.pw-switch__thumb` is still accepted so existing markup keeps working;
* it is hidden, because the track is already drawing one. */
.pw-switch__track::after {
content: "";
position: absolute;
top: var(--pw-switch-pad);
inset-inline-start: var(--pw-switch-pad);
width: calc(var(--pw-switch-h) - var(--pw-switch-pad) * 2);
height: calc(var(--pw-switch-h) - var(--pw-switch-pad) * 2);
border-radius: var(--pw-radius-circle);
background: var(--pw-color-white);
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.22);
transition: transform var(--pw-duration-base) var(--pw-ease-out);
}
.pw-switch__thumb { display: none; }
.pw-switch input:checked ~ .pw-switch__track { background: var(--pw-action-bg); }
.pw-switch input:checked ~ .pw-switch__track::after { transform: translateX(calc(var(--pw-switch-w) - var(--pw-switch-h))); }
[dir="rtl"] .pw-switch input:checked ~ .pw-switch__track::after { transform: translateX(calc((var(--pw-switch-w) - var(--pw-switch-h)) * -1)); }
.pw-switch input:focus-visible ~ .pw-switch__track { box-shadow: var(--pw-focus-ring); }
.pw-switch input:disabled ~ .pw-switch__track { opacity: .5; }
.pw-switch input:disabled { cursor: not-allowed; }
/* Row pattern: label + description on the left, switch on the right */
.pw-switch-row {
display: flex; align-items: center; gap: var(--pw-space-8);
padding: var(--pw-space-6) 0;
}
.pw-switch-row__body { flex: 1; min-width: 0; }
.pw-switch-row__label { font-size: var(--pw-text-sm-size); color: var(--pw-fg-primary); font-weight: var(--pw-font-weight-semibold); }
.pw-switch-row__desc { margin-top: 2px; font-size: var(--pw-text-sm-size); color: var(--pw-fg-tertiary); }
/* =============================================================================
STEPPER (numeric − / value / +)
Title size, paragraph size, guest counts, room counts.
============================================================================= */
.pw-stepper {
display: inline-flex; align-items: center; gap: var(--pw-space-2);
height: 36px; padding: 3px;
border: 1px solid var(--pw-border-default);
border-radius: var(--pw-radius-pill);
background: var(--pw-bg-surface);
}
.pw-stepper__btn {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px;
border: 0; border-radius: var(--pw-radius-circle);
background: transparent; color: var(--pw-fg-secondary);
cursor: pointer;
transition: background-color var(--pw-duration-fast) var(--pw-ease-out), color var(--pw-duration-fast) var(--pw-ease-out);
}
.pw-stepper__btn { position: relative; }
.pw-stepper__btn::after { content: ""; position: absolute; inset: -5px; }
.pw-stepper__btn:hover { background: var(--pw-bg-hover); color: var(--pw-fg-primary); }
.pw-stepper__btn:disabled { color: var(--pw-fg-disabled); cursor: not-allowed; background: transparent; }
/* An with no width takes the UA default of about 20 characters —
roughly 180px — and `min-width` cannot cap that, so the stepper stretched
to fit a number that is almost always one digit. The width is explicit and
the value is centred in it.
*
* Fixed, not content-sized: a stepper that resizes as you click it moves the
+ button out from under the finger that is pressing it. `--pw-stepper-value-w`
widens it for values that carry a unit ("20 pt"). */
.pw-stepper__value {
width: var(--pw-stepper-value-w, 44px);
min-width: 0;
padding: 0;
text-align: center;
border: 0; background: transparent; color: var(--pw-fg-primary);
font-size: var(--pw-text-sm-size); font-weight: var(--pw-font-weight-semibold);
font-variant-numeric: tabular-nums;
outline: none;
}
/* A unit needs the room; the number alone does not. */
.pw-stepper--unit { --pw-stepper-value-w: 60px; }
.pw-stepper--boxed { border-radius: var(--pw-radius-md); }
.pw-stepper--boxed .pw-stepper__btn { border-radius: var(--pw-radius-sm); }
/* =============================================================================
SLIDER
============================================================================= */
.pw-slider { position: relative; display: flex; align-items: center; height: 20px; width: 100%; }
.pw-slider input[type="range"] {
-webkit-appearance: none; appearance: none;
width: 100%; height: 4px; margin: 0;
border-radius: var(--pw-radius-pill);
background: var(--pw-bg-strong);
outline: none;
}
.pw-slider input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 18px; height: 18px;
border: 2px solid var(--pw-color-white);
border-radius: var(--pw-radius-circle);
background: var(--pw-action-bg);
box-shadow: var(--pw-shadow-sm);
cursor: pointer;
}
.pw-slider input[type="range"]::-moz-range-thumb {
width: 14px; height: 14px;
border: 2px solid var(--pw-color-white);
border-radius: var(--pw-radius-circle);
background: var(--pw-action-bg);
box-shadow: var(--pw-shadow-sm);
cursor: pointer;
}
.pw-slider input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: var(--pw-focus-ring); }
.pw-slider input[type="range"]:disabled { opacity: .5; }
.pw-slider__fill {
position: absolute; left: 0; height: 4px;
border-radius: var(--pw-radius-pill);
background: var(--pw-action-bg);
pointer-events: none;
}
.pw-slider-scale { display: flex; justify-content: space-between; margin-top: var(--pw-space-3); font-size: var(--pw-text-xs-size); color: var(--pw-fg-quaternary); }
/* =============================================================================
DATE PICKER (custom — never the native control)
Trigger reads like a select: value on the left, calendar glyph on the right.
Panel supports single date, range, presets and an optional time strip.
============================================================================= */
.pw-datepicker { position: relative; display: inline-flex; }
.pw-datepicker--block { display: flex; width: 100%; }
.pw-datepicker__trigger {
display: flex; align-items: center; gap: var(--pw-space-4);
width: 100%; height: 40px;
padding-inline: var(--pw-space-6);
border: 1px solid var(--pw-field-border);
border-radius: var(--pw-radius-pill); /* fully rounded is the default */
background: var(--pw-field-bg);
color: var(--pw-field-fg);
font-size: var(--pw-text-sm-size);
text-align: start;
cursor: pointer;
transition: border-color var(--pw-duration-fast) var(--pw-ease-out), box-shadow var(--pw-duration-fast) var(--pw-ease-out);
}
.pw-datepicker__trigger:hover { border-color: var(--pw-field-border-hover); }
.pw-datepicker__trigger[aria-expanded="true"] { border-color: var(--pw-field-border-focus); box-shadow: var(--pw-focus-ring); outline: none; }
.pw-datepicker__trigger:disabled { background: var(--pw-field-bg-disabled); color: var(--pw-fg-disabled); cursor: not-allowed; }
.pw-datepicker__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--pw-font-weight-medium); }
.pw-datepicker__value.is-placeholder { color: var(--pw-field-placeholder); font-weight: var(--pw-font-weight-regular); }
/* Trailing glyph, same position as the select chevron. */
.pw-datepicker__glyph { flex: 0 0 auto; margin-inline-start: auto; color: var(--pw-fg-quaternary); }
.pw-datepicker__panel {
position: absolute;
z-index: var(--pw-z-dropdown);
top: calc(100% + var(--pw-space-2));
inset-inline-start: 0;
padding: var(--pw-space-6);
border: 1px solid var(--pw-border-default);
border-radius: var(--pw-radius-lg);
background: var(--pw-bg-surface);
box-shadow: var(--pw-shadow-xl);
opacity: 0; visibility: hidden;
transform: translateY(-4px);
transition: opacity var(--pw-duration-fast) var(--pw-ease-out), transform var(--pw-duration-fast) var(--pw-ease-out), visibility var(--pw-duration-fast);
}
.pw-datepicker.is-open > .pw-datepicker__panel { opacity: 1; visibility: visible; transform: none; }
.pw-datepicker__panel--end { inset-inline-start: auto; inset-inline-end: 0; }
.pw-calendar { width: 280px; }
.pw-calendar-pair { display: flex; gap: var(--pw-space-8); }
.pw-calendar__header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: var(--pw-space-5);
}
.pw-calendar__title {
display: inline-flex; align-items: center; gap: var(--pw-space-2);
padding: var(--pw-space-2) var(--pw-space-4);
border: 0; border-radius: var(--pw-radius-sm);
background: transparent; color: var(--pw-fg-primary);
font-size: var(--pw-text-sm-size); font-weight: var(--pw-font-weight-bold);
cursor: pointer;
}
.pw-calendar__title:hover { background: var(--pw-bg-hover); }
.pw-calendar__nav {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px;
border: 0; border-radius: var(--pw-radius-circle);
background: transparent; color: var(--pw-fg-secondary); cursor: pointer;
}
.pw-calendar__nav:hover { background: var(--pw-bg-hover); color: var(--pw-fg-primary); }
.pw-calendar__nav:disabled { color: var(--pw-fg-disabled); cursor: not-allowed; background: transparent; }
.pw-calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.pw-calendar__dow {
height: 28px; display: grid; place-items: center;
font-size: var(--pw-text-xs-size); font-weight: var(--pw-font-weight-medium);
color: var(--pw-fg-quaternary);
}
/* The cell is full-width so a range fill can run edge to edge, while the
selected marker is a fixed 36px circle drawn behind the number. Without this
the "circle" becomes an ellipse in any grid wider than 36px. */
.pw-calendar__day {
position: relative;
isolation: isolate;
height: 36px;
display: grid; place-items: center;
border: 0;
background: transparent;
color: var(--pw-fg-primary);
font-size: var(--pw-text-xs-size);
font-variant-numeric: tabular-nums;
cursor: pointer;
transition: color var(--pw-duration-instant) var(--pw-ease-out);
}
.pw-calendar__day::before {
content: "";
position: absolute;
z-index: -1;
top: 50%; left: 50%;
translate: -50% -50%;
width: 36px; height: 36px;
max-width: 100%;
border-radius: var(--pw-radius-circle);
background: transparent;
transition: background-color var(--pw-duration-instant) var(--pw-ease-out);
}
.pw-calendar__day:hover::before { background: var(--pw-bg-hover); }
.pw-calendar__day.is-outside { color: var(--pw-fg-disabled); }
.pw-calendar__day.is-today { font-weight: var(--pw-font-weight-semibold); color: var(--pw-fg-brand); }
.pw-calendar__day.is-today::after {
content: ""; position: absolute; bottom: 4px;
width: 4px; height: 4px; border-radius: var(--pw-radius-circle); background: currentColor;
}
.pw-calendar__day.is-selected,
.pw-calendar__day.is-range-start,
.pw-calendar__day.is-range-end {
color: var(--pw-action-fg);
font-weight: var(--pw-font-weight-semibold);
}
.pw-calendar__day.is-selected::before,
.pw-calendar__day.is-range-start::before,
.pw-calendar__day.is-range-end::before { background: var(--pw-action-bg); }
.pw-calendar__day.is-selected::after { background: var(--pw-action-fg); }
/* Range fill sits on the cell itself, so it meets the neighbouring cell with
no gap. The end cells are half-filled towards the middle of the range. */
.pw-calendar__day.is-in-range { background: var(--pw-bg-selected); }
.pw-calendar__day.is-range-start:not(.is-range-end) {
background: linear-gradient(to right, transparent 50%, var(--pw-bg-selected) 50%);
}
.pw-calendar__day.is-range-end:not(.is-range-start) {
background: linear-gradient(to left, transparent 50%, var(--pw-bg-selected) 50%);
}
[dir="rtl"] .pw-calendar__day.is-range-start:not(.is-range-end) {
background: linear-gradient(to left, transparent 50%, var(--pw-bg-selected) 50%);
}
[dir="rtl"] .pw-calendar__day.is-range-end:not(.is-range-start) {
background: linear-gradient(to right, transparent 50%, var(--pw-bg-selected) 50%);
}
.pw-calendar__day:disabled, .pw-calendar__day.is-disabled {
color: var(--pw-fg-disabled); cursor: not-allowed; text-decoration: line-through;
}
.pw-calendar__day:disabled::before, .pw-calendar__day.is-disabled::before { background: transparent; }
.pw-calendar__day .pw-calendar__price {
position: absolute; bottom: 2px;
font-size: 9px; line-height: 1; color: var(--pw-fg-success);
}
.pw-calendar__day.is-selected .pw-calendar__price { color: inherit; }
/* -- Time picker: the date picker's trigger and panel, with two columns ------ */
.pw-timepicker { position: relative; display: inline-flex; }
.pw-timepicker--block { display: flex; width: 100%; }
.pw-timepicker.is-open > .pw-datepicker__panel { opacity: 1; visibility: visible; transform: none; }
.pw-timepicker__panel { width: 232px; padding: var(--pw-space-5); }
.pw-timepicker__presets { display: flex; flex-wrap: wrap; gap: var(--pw-space-2); margin-block-end: var(--pw-space-5); }
.pw-timepicker__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pw-space-3); }
.pw-timepicker__col { height: 196px; overflow-y: auto; scrollbar-width: thin; padding: var(--pw-space-1); border-radius: var(--pw-radius-md); outline: none; scroll-behavior: smooth; }
.pw-timepicker__col:focus-visible { box-shadow: var(--pw-focus-ring); }
.pw-timepicker__opt { padding: var(--pw-space-3) 0; border-radius: var(--pw-radius-md); text-align: center; font-size: var(--pw-text-sm-size); font-variant-numeric: tabular-nums; color: var(--pw-fg-secondary); cursor: pointer; }
.pw-timepicker__opt:hover { background: var(--pw-bg-hover); color: var(--pw-fg-primary); }
.pw-timepicker__opt.is-selected { background: var(--pw-action-bg); color: var(--pw-action-fg); font-weight: var(--pw-font-weight-semibold); }
.pw-datepicker__presets {
display: flex; flex-direction: column; gap: var(--pw-space-1);
padding-inline-end: var(--pw-space-6);
margin-inline-end: var(--pw-space-6);
border-inline-end: 1px solid var(--pw-border-subtle);
min-width: 140px;
}
.pw-datepicker__preset {
padding: var(--pw-space-3) var(--pw-space-4);
border: 0; border-radius: var(--pw-radius-md);
background: transparent; color: var(--pw-fg-secondary);
font-size: var(--pw-text-sm-size); text-align: start; cursor: pointer;
}
.pw-datepicker__preset:hover { background: var(--pw-bg-hover); color: var(--pw-fg-primary); }
.pw-datepicker__preset.is-active { background: var(--pw-bg-selected); color: var(--pw-fg-brand); font-weight: var(--pw-font-weight-medium); }
.pw-datepicker__footer {
display: flex; align-items: center; justify-content: space-between; gap: var(--pw-space-6);
margin-top: var(--pw-space-6); padding-top: var(--pw-space-6);
border-top: 1px solid var(--pw-border-subtle);
}
.pw-datepicker__readout { font-size: var(--pw-text-sm-size); color: var(--pw-fg-secondary); font-variant-numeric: tabular-nums; font-weight: var(--pw-font-weight-medium); }
.pw-timegrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--pw-space-2); margin-top: var(--pw-space-5); }
.pw-timegrid__slot {
height: 32px; border: 1px solid var(--pw-border-default); border-radius: var(--pw-radius-pill);
background: var(--pw-bg-surface); color: var(--pw-fg-secondary);
font-size: var(--pw-text-sm-size); font-variant-numeric: tabular-nums; cursor: pointer;
font-weight: var(--pw-font-weight-medium);
}
.pw-timegrid__slot:hover { background: var(--pw-bg-hover); }
.pw-timegrid__slot.is-selected { background: var(--pw-action-bg); border-color: transparent; color: var(--pw-action-fg); }
.pw-timegrid__slot:disabled { color: var(--pw-fg-disabled); cursor: not-allowed; background: var(--pw-bg-disabled); }
/* =============================================================================
CARD · SURFACE
============================================================================= */
/* No `overflow: hidden` here. A card that clips would cut off any select
menu, date picker or popover opened from inside it — the same bug the row
group had. Only the media block clips, and it clips itself. */
.pw-card {
display: flex; flex-direction: column;
border: 1px solid var(--pw-border-subtle);
border-radius: var(--pw-radius-lg);
background: var(--pw-bg-surface);
}
/* A card holding an open layer lifts above its neighbours so the menu is not
painted under the next card. */
.pw-card:has(.pw-select[aria-expanded="true"]),
.pw-card:has(.pw-select.is-open),
.pw-card:has([aria-expanded="true"]) { position: relative; z-index: 1; }
.pw-card--raised { box-shadow: var(--pw-shadow-sm); }
/* Never wider than what holds it. A floating surface has a width that suits the
screen it was drawn for, and on a phone that width is bigger than the phone —
which does not make the surface narrower, it makes the PAGE wider, and every
row on it starts scrolling sideways. The cap costs nothing where there is
room and is the whole difference where there is not. */
.pw-card--floating { border-color: transparent; box-shadow: var(--pw-shadow-lg); max-width: 100%; }
.pw-card--flat { border-color: transparent; background: var(--pw-bg-subtle); }
.pw-card--interactive { cursor: pointer; transition: border-color var(--pw-duration-fast) var(--pw-ease-out), box-shadow var(--pw-duration-fast) var(--pw-ease-out); }
.pw-card--interactive:hover { border-color: var(--pw-border-strong); box-shadow: var(--pw-shadow-md); }
.pw-card--selected { border-color: var(--pw-color-brand-500); box-shadow: 0 0 0 1px var(--pw-color-brand-500); }
.pw-card__media {
position: relative; aspect-ratio: 16 / 10; background: var(--pw-bg-muted);
overflow: hidden; /* clips itself, so the card need not */
}
.pw-card > .pw-card__media:first-child {
border-start-start-radius: calc(var(--pw-radius-lg) - 1px);
border-start-end-radius: calc(var(--pw-radius-lg) - 1px);
}
.pw-card > .pw-card__media:last-child {
border-end-start-radius: calc(var(--pw-radius-lg) - 1px);
border-end-end-radius: calc(var(--pw-radius-lg) - 1px);
}
.pw-card__media > img { width: 100%; height: 100%; object-fit: cover; }
.pw-card__header { display: flex; align-items: flex-start; gap: var(--pw-space-6); padding: var(--pw-space-8); }
.pw-card__body { padding: var(--pw-space-8); }
.pw-card__header + .pw-card__body { padding-top: 0; }
.pw-card__footer {
display: flex; align-items: center; gap: var(--pw-space-6);
padding: var(--pw-space-6) var(--pw-space-8);
border-top: 1px solid var(--pw-border-subtle);
background: var(--pw-bg-subtle);
}
.pw-card__title { font-size: var(--pw-text-md-size); line-height: var(--pw-text-md-line); font-weight: var(--pw-font-weight-bold); letter-spacing: var(--pw-tracking-snug); }
.pw-card__subtitle { margin-top: 2px; font-size: var(--pw-text-sm-size); color: var(--pw-fg-tertiary); }
/* Icon medallion used at the head of feature rows and cards.
RULE — a glyph on a coloured background always inverts in dark mode.
Light: pale tint + saturated glyph. Dark: deep translucent tint + light
glyph. Carrying the light tint into dark mode leaves a bright patch on a dark
card and drops the glyph's contrast against it. This applies to every tinted
container in the system: medallions, tags, chips, list marks, badges. */
.pw-medallion {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; flex: 0 0 auto;
border-radius: var(--pw-radius-lg);
background: var(--pw-bg-muted);
color: var(--pw-fg-secondary);
}
.pw-medallion--sm { width: 28px; height: 28px; border-radius: var(--pw-radius-md); }
.pw-medallion--lg { width: 44px; height: 44px; border-radius: var(--pw-radius-xl); }
.pw-medallion--circle { border-radius: var(--pw-radius-circle); }
/* One declaration per tone, and the per-theme values live in the tokens — the
five dark-mode overrides that used to sit here were the same five pairs
written a second time, and every other tinted patch in the system had to
copy them or go without. */
.pw-medallion--brand { background: var(--pw-tint-brand-bg); color: var(--pw-tint-brand-fg); }
.pw-medallion--success { background: var(--pw-tint-success-bg); color: var(--pw-tint-success-fg); }
.pw-medallion--warning { background: var(--pw-tint-warning-bg); color: var(--pw-tint-warning-fg); }
.pw-medallion--danger { background: var(--pw-tint-danger-bg); color: var(--pw-tint-danger-fg); }
.pw-medallion--ai { background: var(--pw-tint-ai-bg); color: var(--pw-tint-ai-fg); }
/* =============================================================================
LIST ROW · SETTING ROW
The workhorse of the settings surfaces and the maps side panels.
============================================================================= */
.pw-row {
display: flex; align-items: center; gap: var(--pw-space-6);
width: 100%;
min-height: 52px;
padding: var(--pw-space-5) var(--pw-space-6);
border: 0;
border-radius: var(--pw-radius-md);
background: transparent;
color: inherit;
text-align: start;
transition: background-color var(--pw-duration-fast) var(--pw-ease-out);
}
.pw-row--interactive { cursor: pointer; }
.pw-row--interactive:hover { background: var(--pw-bg-hover); }
.pw-row--interactive:active { background: var(--pw-bg-active); }
.pw-row.is-selected { background: var(--pw-bg-selected); }
/* Keeps an open select above the rows beneath it. */
.pw-row:has(.pw-select.is-open),
.pw-row:has([aria-expanded="true"]) { position: relative; z-index: 1; }
.pw-row__icon { color: var(--pw-fg-quaternary); flex: 0 0 auto; }
.pw-row__body { flex: 1; min-width: 0; }
.pw-row__title { font-size: var(--pw-text-sm-size); color: var(--pw-fg-primary); font-weight: var(--pw-font-weight-semibold); }
.pw-row__desc { margin-top: 2px; font-size: var(--pw-text-sm-size); line-height: var(--pw-text-sm-line); color: var(--pw-fg-tertiary); }
.pw-row__value { font-size: var(--pw-text-sm-size); color: var(--pw-fg-tertiary); white-space: nowrap; }
.pw-row__end { display: flex; align-items: center; gap: var(--pw-space-4); flex: 0 0 auto; }
.pw-row__chevron { color: var(--pw-fg-quaternary); }
[dir="rtl"] .pw-row__chevron { transform: scaleX(-1); }
/* No `overflow: hidden` — it would clip a select menu or a popover opening out
of a row. The end rows round their own outer corners instead. */
.pw-row-group {
display: flex; flex-direction: column;
border: 1px solid var(--pw-border-subtle);
border-radius: var(--pw-radius-lg);
background: var(--pw-bg-surface);
}
.pw-row-group > .pw-row { border-radius: 0; }
.pw-row-group > :first-child {
border-start-start-radius: calc(var(--pw-radius-lg) - 1px);
border-start-end-radius: calc(var(--pw-radius-lg) - 1px);
}
.pw-row-group > :last-child {
border-end-start-radius: calc(var(--pw-radius-lg) - 1px);
border-end-end-radius: calc(var(--pw-radius-lg) - 1px);
}
.pw-row-group > .pw-row + .pw-row { border-top: 1px solid var(--pw-border-subtle); }
/* A row that carries its own controls is a
, so the title stretches to be
the row's hit area. Never nest a