/* Passbook -- the Funess design system.

   The one place a colour, a type size, a radius or a spacing value is named.
   Direction "1a Passbook" from funess-app-redesign-strategy/: paper, hairlines,
   tabular figures, sentences under every action, rows rather than cards, and
   motion that is close to still. docs-overhaul/internal/05-design-handoff.md
   has every token below with its source.

   Three families with strict roles, and the roles are the system:
     Newsreader       -- the voice: titles, section heads, quoted terms
     Spline Sans      -- prose, labels, buttons
     Spline Sans Mono -- every figure, every eyebrow, the tab labels
   Money is always mono. If a number is in sans, it is a bug.

   Two colours carry meaning and nothing else does: green is in your favour
   (owed to you, savings, a loosened rule) and clay is against you (you owe, a
   restriction, a destructive act). There is no red anywhere; an error is clay,
   and direction is always said in words as well ("owes you" / "you owe"),
   because colour alone is not an answer for anyone who cannot see it.

   Phone first, and the phone is the real layout. Above 993px the column stays a
   column -- centred, at most --column wide -- and the tab bar moves to the top.
   There is one breakpoint, and it changes where the navigation lives, not what
   the page says. */

/* ---------------------------------------------------------------- tokens */

:root {
    --bg: #F6F4EE;
    --panel: #FCFBF7;
    --tile: #FFFFFF;
    --ink: #191712;
    --sub: rgba(25, 23, 18, .62);
    --sub2: rgba(25, 23, 18, .50);
    --line: rgba(25, 23, 18, .12);
    --line2: rgba(25, 23, 18, .22);
    --line3: rgba(25, 23, 18, .26);
    --bline: rgba(25, 23, 18, .35);
    --green: #3E6B4F;
    --clay: #A4543F;
    --tint-green: rgba(62, 107, 79, .09);
    --tint-clay: rgba(164, 84, 63, .09);
    --toggle-off: rgba(25, 23, 18, .18);
    --scrim: rgba(20, 18, 12, .5);
    --desk: #E9E6DE;

    --serif: 'Newsreader', Georgia, serif;
    --sans: 'Spline Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: 'Spline Sans Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    --gutter: 22px;
    --column: 600px;
    --tabbar-h: 62px;

    --r-btn: 8px;
    --r-field: 9px;
    --r-panel: 11px;
    --r-sheet: 14px;
    --r-pill: 20px;

    color-scheme: light;
}

/* Dark: chosen explicitly, or followed from the system when nothing was chosen.
   Written twice because a media query cannot be combined with a selector list
   that also has to work outside it. */
:root[data-theme="dark"] {
    --bg: #171410;
    --panel: #1E1A14;
    --tile: #241F17;
    --ink: #EDE9DF;
    --sub: rgba(237, 233, 223, .66);
    --sub2: rgba(237, 233, 223, .48);
    --line: rgba(237, 233, 223, .13);
    --line2: rgba(237, 233, 223, .22);
    --line3: rgba(237, 233, 223, .28);
    --bline: rgba(237, 233, 223, .40);
    --green: #8FB89B;
    --clay: #CE9077;
    --tint-green: rgba(143, 184, 155, .12);
    --tint-clay: rgba(206, 144, 119, .12);
    --toggle-off: rgba(237, 233, 223, .2);
    --desk: #100E0B;
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #171410;
        --panel: #1E1A14;
        --tile: #241F17;
        --ink: #EDE9DF;
        --sub: rgba(237, 233, 223, .66);
        --sub2: rgba(237, 233, 223, .48);
        --line: rgba(237, 233, 223, .13);
        --line2: rgba(237, 233, 223, .22);
        --line3: rgba(237, 233, 223, .28);
        --bline: rgba(237, 233, 223, .40);
        --green: #8FB89B;
        --clay: #CE9077;
        --tint-green: rgba(143, 184, 155, .12);
        --tint-clay: rgba(206, 144, 119, .12);
        --toggle-off: rgba(237, 233, 223, .2);
        --desk: #100E0B;
        color-scheme: dark;
    }
}

/* ------------------------------------------------------------------ base */

/* The attribute is only `display: none` in the UA sheet, so any rule here that
   sets `display` on the same element beats it. Toggling `hidden` from script is
   how things are shown and hidden in this app; keep the general form. */
[hidden] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--ink); }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
img, svg { display: block; }
table { border-collapse: collapse; }
strong, b { font-weight: 600; }

/* Focus rings stay. The prototype set `outline: none` on inputs; a keyboard
   user then has no idea where they are. */
:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
    border-radius: 3px;
}

.pb-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- layout */

.pb-main {
    flex: 1 0 auto;
    width: 100%;
    max-width: var(--column);
    margin: 0 auto;
    padding: 0 var(--gutter) 18px;
    animation: pb-fade-in .18s ease;
}

/* A band runs edge to edge, so its hairline does too, while its content keeps
   the gutter. Home's stacked sections are bands. */
.pb-band {
    margin: 0 calc(-1 * var(--gutter));
    padding: 13px var(--gutter) 14px;
    border-bottom: 1px solid var(--line);
}
.pb-band--last { border-bottom: 0; }

.pb-section { padding-top: 16px; }
.pb-section--tight { padding-top: 10px; }
.pb-section--loose { padding-top: 22px; }

.pb-stack > * + * { margin-top: 10px; }

.pb-split { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pb-split--center { align-items: center; }
.pb-split > .pb-eyebrow { flex: none; white-space: nowrap; }
.pb-split > .pb-small { text-align: right; }

.pb-center { text-align: center; }

/* ------------------------------------------------------------ typography */

.pb-wordmark {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.005em;
    color: var(--ink);
}

.pb-masthead {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 14px;
}

.pb-title {
    font-family: var(--serif);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.005em;
}
.pb-title--md { font-size: 25px; }
.pb-title--lg { font-size: 28px; line-height: 1.1; }
.pb-title--xl { font-size: 27px; }

.pb-screen-head { padding-top: 14px; }
.pb-screen-head .pb-lede { margin-top: 3px; }

.pb-h2 {
    font-family: var(--serif);
    font-size: 17.5px;
    font-weight: 600;
    line-height: 1.25;
}
.pb-h3 {
    font-family: var(--serif);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.25;
}

.pb-eyebrow {
    display: block;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--sub2);
}
.pb-eyebrow--step { font-size: 10px; letter-spacing: .14em; }
.pb-eyebrow--warn { font-size: 10px; letter-spacing: .12em; color: var(--clay); }

.pb-lede { font-size: 13px; color: var(--sub); line-height: 1.5; }
.pb-lede--sm { font-size: 12.5px; }
.pb-body { font-size: 13px; line-height: 1.55; }
.pb-small { font-size: 11.5px; color: var(--sub); line-height: 1.45; }
.pb-note { font-size: 11px; color: var(--sub2); line-height: 1.5; }
.pb-note--rule { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 12px; }
.pb-muted { color: var(--sub); }
.pb-faint { color: var(--sub2); }
.pb-ink { color: var(--ink); }
.pb-green { color: var(--green); }
.pb-clay { color: var(--clay); }

.pb-mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.pb-fig {
    font-family: var(--mono);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.pb-fig--hero { font-size: 44px; letter-spacing: -.02em; line-height: 1.1; }
.pb-fig--xl { font-size: 36px; }
.pb-fig--lg { font-size: 31px; }
.pb-fig--md { font-size: 26px; }
.pb-fig--sm { font-size: 22px; }
.pb-fig--xs { font-size: 20px; }
.pb-unit { font-family: var(--sans); font-size: 12px; font-weight: 400; color: var(--sub); }
.pb-per { font-size: 11px; font-weight: 400; color: var(--sub); }
.pb-strike {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--sub2);
    text-decoration: line-through;
}

.pb-serif-i {
    font-family: var(--serif);
    font-style: italic;
    color: var(--sub);
}

/* A tertiary action is words with an underline, not a third button. */
.pb-link {
    font-size: 12.5px;
    color: var(--sub);
    text-decoration: underline;
    text-underline-offset: 3px;
    background: none;
    border: 0;
    /* Inline, so vertical padding moves no line and only widens the hit area:
       12.5px text alone is a 15px target, and 24px is the floor. */
    padding: 5px 0;
    cursor: pointer;
}
.pb-link:hover { color: var(--ink); }
.pb-links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 9px; }

/* Hit areas. The drawing stays small where the design draws it small; the
   target does not. Inline links get vertical padding (no layout change), a
   block link gets padding and a matching negative margin. */
a.pb-row__name, .pb-row__name > a { padding: 3px 0; margin: -3px 0; }
.pb-auth a, .pb-small a, .pb-note a, .pb-quote a, .pb-prose a, .pb-sources a { padding: 5px 0; }

.pb-more {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    background: none;
    border: 0;
    padding: 4px 0;
    cursor: pointer;
}

.pb-back {
    display: inline-block;
    padding: 12px 0 2px;
    font-size: 13px;
    color: var(--sub);
}
.pb-back:hover { color: var(--ink); }

/* ---------------------------------------------------------------- rows */

.pb-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
}
a.pb-row:hover .pb-row__name { text-decoration: underline; text-underline-offset: 3px; }
.pb-row--tight { padding: 10px 0; gap: 11px; }
.pb-row--top { align-items: flex-start; }
.pb-row--base { align-items: baseline; justify-content: space-between; }
.pb-row--flat { border-bottom: 0; padding: 6px 0; gap: 10px; }
.pb-row__main { flex: 1; min-width: 0; }
.pb-row__name { display: block; font-size: 14px; font-weight: 600; }
.pb-row__name--sm { font-size: 13.5px; }
.pb-row__note { font-size: 11.5px; font-weight: 400; color: var(--sub); }
.pb-row__meta { display: block; font-size: 11.5px; color: var(--sub); margin-top: 1px; }
.pb-row__end { flex: none; text-align: right; font-family: var(--mono); }
.pb-row__end-top { display: block; }
.pb-row__fig { display: block; font-size: 14px; font-weight: 600; }
.pb-row__sub { display: block; font-size: 10px; color: var(--sub2); }
.pb-row__date {
    flex: none;
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--sub2);
    text-transform: uppercase;
}

/* -------------------------------------------------------------- buttons */

.pb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 9px 14px;
    border-radius: var(--r-btn);
    border: 1px solid transparent;
    font-family: var(--sans);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: transform .08s ease, opacity .15s ease;
    -webkit-user-select: none;
    user-select: none;
}
.pb-btn:active { transform: scale(.985); }
.pb-btn[disabled], .pb-btn[aria-disabled="true"] { opacity: .45; cursor: default; transform: none; }
.pb-btn--block { display: flex; width: 100%; }
.pb-btn--primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pb-btn--primary:hover { color: var(--bg); opacity: .92; }
.pb-btn--secondary { background: transparent; color: var(--ink); border-color: var(--bline); }
.pb-btn--strong { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.pb-btn--danger { background: transparent; color: var(--clay); border-color: var(--clay); }
.pb-btn--danger:hover { color: var(--clay); }
.pb-btn--quiet {
    background: none;
    border: 0;
    min-height: 32px;
    font-weight: 400;
    font-size: 13px;
    color: var(--sub);
}
.pb-btn--quiet:hover { color: var(--ink); }
.pb-btn--lg { min-height: 44px; font-size: 14px; border-radius: var(--r-field); }
.pb-btn--sm { min-height: 32px; padding: 6px 11px; font-size: 12px; }

.pb-btns { display: flex; gap: 10px; }
.pb-btns > * { flex: 1; }
.pb-actions { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }

/* A finished state where a button was: dashed, quiet, not clickable. */
.pb-done {
    margin-top: 7px;
    padding: 9px 12px;
    border: 1px dashed var(--line2);
    border-radius: var(--r-btn);
    text-align: center;
    font-size: 12.5px;
    color: var(--sub);
}

/* -------------------------------------------------------------- panels */

.pb-panel {
    border: 1px solid var(--line3);
    border-radius: var(--r-panel);
    background: var(--panel);
    padding: 13px 15px;
}
.pb-panel--strong { border: 1.5px solid var(--ink); padding: 13px 14px; }
.pb-panel--flush { padding: 0; }
.pb-panel + .pb-panel { margin-top: 10px; }

.pb-dashed {
    border: 1px dashed var(--line2);
    border-radius: var(--r-panel);
    padding: 16px;
    text-align: center;
}
.pb-dashed--left { text-align: left; padding: 11px 13px; }

.pb-callout {
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px dashed var(--line2);
    border-radius: var(--r-btn);
    font-size: 12px;
    color: var(--sub);
    line-height: 1.45;
}

/* The settle card: a panel with a 3px edge in the direction the money goes. */
.pb-settle { border-left: 3px solid var(--edge, var(--line3)); }
.pb-settle--owed { --edge: var(--green); }
.pb-settle--owing { --edge: var(--clay); }
.pb-settle__head { display: flex; align-items: center; gap: 10px; }
.pb-settle__sentence { display: block; font-size: 13.5px; }
.pb-settle__state { font-size: 12px; color: var(--sub); margin-top: 7px; line-height: 1.45; }

/* The subscription you're on, on its service page. */
.pb-mine__top { padding: 12px 14px 11px; }
.pb-mine__tabs { display: flex; border-top: 1px solid var(--line); }
.pb-mine__tab {
    flex: 1;
    padding: 10px 4px;
    background: none;
    border: 0;
    border-right: 1px solid var(--line);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sub);
    cursor: pointer;
    text-align: center;
}
.pb-mine__tab:last-child { border-right: 0; }
.pb-mine__tab[aria-selected="true"] { color: var(--ink); }
.pb-mine__panel { border-top: 1px solid var(--line); padding: 11px 14px 12px; }
.pb-mine__owner { border-top: 1px solid var(--line); padding: 9px 14px 11px; }

/* ------------------------------------------------- pills, chips, segments */

.pb-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pb-pills--scroll { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding-bottom: 2px; }
.pb-pills--scroll::-webkit-scrollbar { display: none; }
.pb-pills--center { justify-content: center; }
.pb-pill {
    display: inline-flex;
    align-items: center;
    flex: none;
    min-height: 28px;
    padding: 4px 12px;
    border: 1px solid var(--line3);
    border-radius: var(--r-pill);
    background: transparent;
    font-family: var(--sans);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--sub);
    cursor: pointer;
    white-space: nowrap;
}
.pb-pill--plain { font-weight: 400; }
.pb-pill:hover { color: var(--ink); }
.pb-pill[aria-current="true"], .pb-pill[aria-current="page"], .pb-pill[aria-pressed="true"],
.pb-pill.is-on, input:checked + .pb-pill {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--bg);
    font-weight: 600;
}
.pb-pill--strong { border-color: var(--ink); color: var(--ink); }
.pb-pill-input { position: absolute; opacity: 0; pointer-events: none; }
input:focus-visible + .pb-pill { outline: 2px solid var(--ink); outline-offset: 2px; }

.pb-chip {
    display: inline-block;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--sub2);
    border: 1px solid var(--line3);
    border-radius: var(--r-pill);
    padding: 2px 8px;
    white-space: nowrap;
}
.pb-chip--green { color: var(--green); border-color: var(--green); }
.pb-chip--clay { color: var(--clay); border-color: var(--clay); }
.pb-chip--sm { padding: 1px 7px; margin-left: 4px; vertical-align: 1px; }

/* A balance pill: tinted, never bordered, mono. */
.pb-tag {
    flex: none;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--sub);
    border-radius: 12px;
    padding: 4px 9px;
    white-space: nowrap;
}
.pb-tag--green { color: var(--green); background: var(--tint-green); }
.pb-tag--clay { color: var(--clay); background: var(--tint-clay); }

.pb-seg {
    display: flex;
    margin-top: 12px;
    border: 1px solid var(--line3);
    border-radius: var(--r-field);
    overflow: hidden;
}
.pb-seg > * {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 6px 4px;
    border: 0;
    background: transparent;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    color: var(--sub);
    cursor: pointer;
    text-align: center;
}
.pb-seg > * + * { border-left: 1px solid var(--line3); }
.pb-seg > [aria-current="page"], .pb-seg > [aria-pressed="true"], .pb-seg > .is-on {
    background: var(--ink);
    color: var(--bg);
}
.pb-seg--narrow { width: 200px; margin-top: 8px; }

/* --------------------------------------------------------------- stepper */

.pb-stepper {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--mono);
    font-size: 13px;
}
.pb-stepper__btn {
    position: relative;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bline);
    border-radius: 50%;
    background: transparent;
    font-family: var(--mono);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    color: var(--ink);
}
/* The drawn circle is 28px; the thing a thumb has to hit should not be. */
.pb-stepper__btn::after { content: ''; position: absolute; inset: -8px; }
.pb-stepper__btn[aria-disabled="true"], .pb-stepper__btn:disabled { opacity: .35; }
.pb-stepper__n { font-weight: 600; min-width: 1ch; text-align: center; }

/* --------------------------------------------------------------- seats */

.pb-seats { display: inline-flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; vertical-align: middle; }
.pb-seat {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1px solid var(--bline);
}
.pb-seat--on { background: var(--ink); border-color: var(--ink); }
.pb-seats--lg .pb-seat { width: 8px; height: 8px; }

/* ----------------------------------------------------- tiles and avatars */

/* A vendor is a letter on a tile in its own colour. No logos: there are 93 PNGs
   in the repo, unrationalised and of uneven quality, and the trademark question
   they raise is not one this product needs to answer. */
.pb-tile {
    flex: none;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--tile);
    border: 1px solid var(--line);
    color: var(--tile-c, var(--ink));
    font-family: var(--sans);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -.02em;
}
.pb-tile--sm { width: 34px; height: 34px; font-size: 14px; }
.pb-tile--md { width: 38px; height: 38px; font-size: 16px; }
.pb-tile--lg { width: 46px; height: 46px; border-radius: 11px; font-size: 20px; }
/* Brand colours are chosen to sit on white. On the dark tile, lift them. */
:root[data-theme="dark"] .pb-tile { color: color-mix(in srgb, var(--tile-c, var(--ink)) 70%, white); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .pb-tile { color: color-mix(in srgb, var(--tile-c, var(--ink)) 70%, white); }
}

.pb-avatar {
    flex: none;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--av-c, #4E7A9B);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .01em;
}
.pb-avatar--xs { width: 30px; height: 30px; font-size: 11px; }
.pb-avatar--sm { width: 32px; height: 32px; font-size: 12px; }
.pb-avatar--md { width: 34px; height: 34px; font-size: 12px; }
.pb-avatar--lg { width: 40px; height: 40px; font-size: 13px; }
.pb-avatar--xl { width: 44px; height: 44px; font-size: 15px; }
.pb-avatar--empty {
    background: transparent;
    border: 1.5px dashed var(--bline);
    color: var(--sub);
    font-size: 15px;
    font-weight: 400;
}
.pb-faces { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 13px; }
.pb-face { text-align: center; }
.pb-face .pb-avatar { margin: 0 auto; }
.pb-face__name { display: block; font-size: 10.5px; margin-top: 4px; color: var(--sub); }

.pb-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
}

/* ----------------------------------------------------------- the record */

.pb-source {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--sub2);
    border: 1px solid var(--line3);
    border-radius: var(--r-pill);
    padding: 3px 9px;
    white-space: nowrap;
}

.pb-quote {
    border-left: 2px solid var(--line3);
    padding: 2px 0 2px 11px;
    margin: 7px 0 0;
    font-family: var(--serif);
    font-style: italic;
    font-size: 13px;
    line-height: 1.5;
    color: var(--sub);
}
.pb-quote cite { display: block; margin-top: 4px; font-family: var(--sans); font-style: normal; font-size: 11px; color: var(--sub2); }

.pb-bench {
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px dashed var(--line2);
    font-family: var(--serif);
    font-style: italic;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--sub);
}

/* <details> as a disclosure: the summary is the control, the marker is ours. */
.pb-disclose > summary {
    list-style: none;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    margin-top: 3px;
    padding: 4px 0;
}
.pb-disclose > summary::-webkit-details-marker { display: none; }
.pb-disclose > summary::after { content: ' \203A'; }
.pb-disclose[open] > summary::after { content: ' \25BE'; }

.pb-table { width: 100%; margin-top: 8px; font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.pb-table th, .pb-table td { padding: 7px 0; border-bottom: 1px solid var(--line); text-align: right; font-weight: 400; vertical-align: baseline; }
.pb-table thead th {
    padding: 8px 0 5px;
    font-size: 10px;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--sub2);
    border-bottom-color: var(--line3);
}
.pb-table th:first-child, .pb-table td:first-child { text-align: left; font-family: var(--sans); padding-right: 8px; }
.pb-table thead th:first-child { font-family: var(--mono); }
.pb-table th + th, .pb-table td + td { padding-left: 8px; }
.pb-table tr.is-on td, .pb-table tr.is-on th { color: var(--ink); font-weight: 600; }
.pb-table--dim tbody td, .pb-table--dim tbody th { color: var(--sub); }
.pb-table-scroll { overflow-x: auto; overflow-y: hidden; }

.pb-spark { overflow: visible; margin-top: 8px; width: 100%; height: auto; }
.pb-spark polyline { fill: none; stroke: var(--spark, var(--ink)); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.pb-spark circle { fill: var(--spark, var(--ink)); }
.pb-spark--green { --spark: var(--green); }

/* ---------------------------------------------------------------- forms */

.pb-field { margin-top: 12px; }
.pb-field:first-child { margin-top: 0; }
.pb-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--sub);
    margin-bottom: 5px;
}
.pb-help { display: block; font-size: 11.5px; color: var(--sub2); margin-top: 5px; line-height: 1.45; }

.pb-input,
.pb-form input[type="text"], .pb-form input[type="email"], .pb-form input[type="password"],
.pb-form input[type="number"], .pb-form input[type="tel"], .pb-form input[type="url"],
.pb-form input[type="search"], .pb-form input[type="date"], .pb-form select, .pb-form textarea {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 11px 13px;
    border: 1px solid var(--bline);
    border-radius: var(--r-field);
    background: var(--tile);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.3;
    -webkit-appearance: none;
    appearance: none;
}
.pb-form textarea { min-height: 110px; resize: vertical; }
.pb-form select {
    background-image: linear-gradient(45deg, transparent 50%, var(--sub) 50%),
                      linear-gradient(135deg, var(--sub) 50%, transparent 50%);
    background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 34px;
}
.pb-input::placeholder, .pb-form ::placeholder { color: var(--sub2); }
.pb-input:focus, .pb-form input:focus, .pb-form select:focus, .pb-form textarea:focus {
    border-color: var(--ink);
    outline: none;
    box-shadow: 0 0 0 1px var(--ink);
}
.pb-input--money { font-family: var(--mono); font-size: 15px; font-variant-numeric: tabular-nums; }
.pb-input--money-lg { font-family: var(--mono); font-size: 19px; }
.pb-input--inline { width: 110px; flex: none; min-height: 40px; padding: 8px 11px; }
.pb-form input[type="checkbox"], .pb-form input[type="radio"] { accent-color: var(--ink); width: 16px; height: 16px; }
.pb-check { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; margin-top: 10px; }
.pb-check input { margin-top: 2px; flex: none; }

.pb-inline-form { display: flex; gap: 8px; align-items: stretch; margin-top: 12px; }
.pb-inline-form > .pb-btn { flex: 1; }

/* The two shared error includes keep their class names; only the paint is new.
   An error is clay, never red, and never orange (orange was the old accent). */
.f-field-error {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--clay);
}
.f-alert {
    margin: 10px 0 4px;
    padding: 10px 12px;
    border: 1px solid var(--clay);
    border-radius: var(--r-field);
    background: var(--tint-clay);
    color: var(--clay);
    font-size: 12.5px;
    line-height: 1.45;
}
.f-alert ul { margin: 0; padding: 0; }
.f-alert li + li { margin-top: 4px; }
.f-alert i { display: none; }

/* A switch is a checkbox. It submits as one, and reads as one to a screen reader. */
.pb-toggle, .pb-form input.pb-toggle {
    flex: none;
    position: relative;
    width: 40px;
    height: 23px;
    margin: 0;
    border-radius: 14px;
    background: var(--toggle-off);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: background .2s ease;
}
.pb-toggle::before {
    content: '';
    position: absolute;
    top: 2.5px;
    left: 2.5px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: left .2s ease;
}
.pb-toggle:checked, .pb-form input.pb-toggle:checked { background: var(--green); }
.pb-toggle:checked::before, .pb-form input.pb-toggle:checked::before { left: 19.5px; }
.pb-toggle:disabled, .pb-form input.pb-toggle:disabled { opacity: .45; cursor: default; }
.pb-switch-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    font-size: 13px;
    cursor: pointer;
}

/* --------------------------------------------------------------- tab bar */

/* Four tabs, words only, no icons. On a phone it sits at the bottom where a
   thumb is; above 993px it becomes the top bar, with the wordmark beside it. */
.pb-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    align-items: stretch;
    background: var(--bg);
    border-top: 1px solid var(--line3);
    padding: 4px 10px calc(10px + env(safe-area-inset-bottom));
}
.pb-tabbar__brand { display: none; }
.pb-tabbar__tabs { display: flex; flex: 1; max-width: var(--column); margin: 0 auto; }
.pb-tab {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .07em;
    color: var(--sub);
}
.pb-tab__word { border-bottom: 2px solid transparent; padding-bottom: 5px; padding-top: 7px; }
.pb-tab[aria-current="page"] { color: var(--ink); }
.pb-tab[aria-current="page"] .pb-tab__word { border-bottom-color: var(--ink); }
.pb-tab__dot {
    position: absolute;
    top: 9px;
    margin-left: 54px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--green);
}
body.has-tabbar { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }

/* The signed-out header: wordmark, Sign in, Sign up free. No tab bar. */
.pb-pubhead {
    width: 100%;
    max-width: var(--column);
    margin: 0 auto;
    padding: 12px var(--gutter) 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.pb-pubhead .pb-wordmark { font-size: 20px; }
.pb-pubhead__actions { display: flex; align-items: center; gap: 8px; }
.pb-pubhead__signin { font-size: 12px; color: var(--sub); padding: 8px 4px; }
.pb-pubhead__signup {
    font-size: 12px;
    font-weight: 600;
    border: 1.5px solid var(--ink);
    border-radius: var(--r-btn);
    padding: 6px 11px;
}

/* ---------------------------------------------------------------- sheets */

/* Every dialog is a bottom sheet: a native <dialog> opened with showModal(), so
   focus is trapped, Esc closes it and the backdrop is the scrim, for free. */
dialog.pb-sheet {
    position: fixed;
    inset: auto 0 20px 0;
    margin: 0 auto;
    width: calc(100% - 32px);
    max-width: 520px;
    max-height: calc(100dvh - 60px);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 17px 17px 15px;
    border: 1.5px solid var(--ink);
    border-radius: var(--r-sheet);
    background: var(--panel);
    color: var(--ink);
    box-shadow: 0 18px 50px rgba(20, 18, 12, .25);
}
dialog.pb-sheet[open] { animation: pb-fade-up .2s ease; }
dialog.pb-sheet::backdrop { background: var(--scrim); animation: pb-fade-in .16s ease; }
.pb-sheet__title { font-family: var(--serif); font-size: 19px; font-weight: 600; line-height: 1.25; }
.pb-sheet__body { font-size: 12.5px; color: var(--sub); margin-top: 6px; line-height: 1.5; }
.pb-sheet__eyebrow + .pb-sheet__title { margin-top: 4px; }
.pb-sheet__actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.pb-sheet__close {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 6px 0;
    background: none;
    border: 0;
    font-size: 13px;
    color: var(--sub);
    text-align: center;
    cursor: pointer;
}
.pb-sheet__close:hover { color: var(--ink); }
body.has-sheet { overflow: hidden; }

/* The shared-login reveal. */
.pb-cred {
    margin-top: 11px;
    padding: 10px 12px;
    border: 1px solid var(--line3);
    border-radius: var(--r-field);
    background: var(--tile);
    font-family: var(--mono);
    font-size: 12.5px;
}
.pb-cred__row { display: flex; justify-content: space-between; gap: 12px; }
.pb-cred__row + .pb-cred__row { margin-top: 7px; }
.pb-cred__k { color: var(--sub2); }
.pb-cred__v { word-break: break-all; text-align: right; }

/* ---------------------------------------------------------------- toasts */

/* Confirmation is a toast, and it goes away on its own. Timed in CSS, so a
   message shows even if the scripts never load. */
.pb-toasts {
    position: fixed;
    left: 24px;
    right: 24px;
    bottom: calc(var(--tabbar-h) + 24px + env(safe-area-inset-bottom));
    z-index: 70;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    max-width: 520px;
    margin: 0 auto;
}
body:not(.has-tabbar) .pb-toasts { bottom: 24px; }
.pb-toast {
    background: var(--ink);
    color: var(--bg);
    border-radius: 10px;
    padding: 11px 15px;
    font-size: 12.5px;
    line-height: 1.45;
    box-shadow: 0 10px 30px rgba(20, 18, 12, .3);
    pointer-events: auto;
    animation: pb-fade-up .22s ease, pb-toast-out .3s ease 5s forwards;
}

/* ---------------------------------------------------------------- footer */

/* The design draws no footer; the legal pages and the one sentence about never
   holding money need one anyway. Small, mono, out of the way. */
.f-footer {
    width: 100%;
    max-width: var(--column);
    margin: 28px auto 0;
    padding: 14px var(--gutter) 22px;
    border-top: 1px solid var(--line);
    font-size: 11px;
    color: var(--sub2);
}
.f-footer__inner { display: flex; flex-direction: column; gap: 9px; }
.f-footer__wordmark { font-family: var(--serif); font-size: 15px; font-weight: 600; color: var(--sub); }
.f-footer__nav, .f-footer__legal { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.f-footer__nav a, .f-footer__legal a {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .04em;
    color: var(--sub);
    padding: 5px 0;
}
.f-footer__nav a:hover, .f-footer__legal a:hover { color: var(--ink); }
.f-footer__trust { line-height: 1.5; }
.f-footer__bar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; }

/* ------------------------------------------------------------- page wait */

/* page_progress.js: a bar at the very top the moment something is tapped, and
   a veil after a hold (none at all on the known-slow pages). See the file for
   when each state is applied, and funess.css's old copy of these rules for why
   the bar's keyframes are shaped the way they are. */
.page-progress {
    position: fixed;
    inset: 0;
    z-index: 90;
    pointer-events: none;
    visibility: hidden;
}
.page-progress.is-running { visibility: visible; }
.page-progress__bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: var(--ink);
    opacity: 0;
}
.page-progress.is-running .page-progress__bar {
    opacity: 1;
    animation: page-progress-bar 10s linear forwards;
}
@keyframes page-progress-bar {
    0%    { width: 15%; }
    1.5%  { width: 72%; }
    3%    { width: 85%; }
    10%   { width: 92%; }
    100%  { width: 98%; }
}
.page-progress__veil {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--bg) 60%, transparent);
    opacity: 0;
    transition: opacity .12s ease-out;
}
.page-progress.is-waiting .page-progress__veil { opacity: 1; }
.page-progress__spinner {
    width: 28px;
    height: 28px;
    border: 2px solid var(--line3);
    border-top-color: var(--ink);
    border-radius: 50%;
    animation: pb-spin .8s linear infinite;
}
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- motion */

@keyframes pb-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pb-fade-up {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes pb-toast-out { to { opacity: 0; transform: translateY(6px); visibility: hidden; } }
@keyframes pb-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .pb-main, dialog.pb-sheet[open], dialog.pb-sheet::backdrop { animation: none; }
    .pb-toast { animation: pb-toast-out .01s linear 5s forwards; }
    .pb-btn, .pb-toggle, .pb-toggle::before { transition: none; }
    .page-progress.is-running .page-progress__bar { animation: none; width: 80%; }
    .page-progress__spinner { animation-duration: 2.4s; }
}

/* --------------------------------------------------------------- desktop */

@media (min-width: 993px) {
    body { background: var(--desk); }
    body.has-tabbar { padding-bottom: 0; }

    /* The column is the page. Paper on a slightly darker desk, so a 600px
       column on a 1440px window reads as a page and not as a phone mock-up. */
    .pb-shell {
        width: 100%;
        max-width: calc(var(--column) + 2px);
        margin: 0 auto;
        flex: 1 0 auto;
        display: flex;
        flex-direction: column;
        background: var(--bg);
        border-left: 1px solid var(--line);
        border-right: 1px solid var(--line);
    }

    .pb-tabbar {
        position: sticky;
        top: 0;
        bottom: auto;
        border-top: 0;
        border-bottom: 1px solid var(--line3);
        padding: 0 var(--gutter);
        align-items: center;
        gap: 18px;
    }
    .pb-tabbar__brand { display: block; font-size: 20px; padding: 14px 0; }
    /* The top bar carries the wordmark here; Home's masthead keeps only Alerts. */
    .pb-masthead { justify-content: flex-end; }
    .pb-masthead .pb-wordmark { display: none; }
    .pb-tabbar__tabs { margin: 0 0 0 auto; flex: 0 1 360px; }
    .pb-tab { min-height: 56px; }
    .pb-tab__dot { top: 15px; }

    .pb-toasts { bottom: 28px; }
    .pb-pills--scroll { flex-wrap: wrap; overflow-x: visible; overflow-y: visible; }
    body.has-tabbar .pb-toasts { bottom: 28px; }
    .f-footer { margin-bottom: 0; }
}

/* ------------------------------------------------------- install prompt */

/* In the flow, never a modal: it waits until the account has something to lose
   by missing a reminder (see _install_prompt.html). */
.pb-install { margin-top: 12px; }
.pb-install__sub { margin-top: 5px; }
.pb-install__steps { list-style: decimal; padding-left: 18px; margin-top: 8px; font-size: 12.5px; line-height: 1.5; }
.pb-install__steps li + li { margin-top: 6px; }
.pb-install__aside { display: block; font-size: 11.5px; color: var(--sub2); }
.pb-install__go { margin-top: 10px; }
.pb-install__dismiss { display: block; margin-top: 9px; }

/* ------------------------------------------------------------------ home */

.pb-home-alerts { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sub); padding: 6px 0; }
.pb-hero-band { padding-top: 20px; padding-bottom: 16px; }
.pb-hero { display: flex; align-items: baseline; gap: 7px; margin-top: 2px; }
.pb-hero__unit { font-size: 14px; color: var(--sub); }

.pb-moneypair { display: block; color: var(--ink); }
.pb-moneypair:hover { color: var(--ink); }
.pb-moneypair__cols { display: flex; align-items: stretch; }
.pb-moneypair__col { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pb-moneypair__col--right { padding-left: 16px; }
.pb-moneypair__rule { width: 1px; background: var(--line); }
.pb-moneypair__who { font-size: 11.5px; color: var(--sub); }
.pb-moneypair__go { align-self: center; padding-left: 10px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.pb-moneypair__rate {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--line2);
    font-size: 11.5px;
    color: var(--sub);
}
.pb-moneypair__rate-fig { font-size: 12.5px; color: var(--ink); }

.pb-welcome { text-align: center; padding: 26px 0 8px; }
.pb-welcome .pb-lede { margin-top: 8px; padding: 0 14px; font-size: 13.5px; }
.pb-addjoin { margin-top: 4px; }
.pb-addjoin .pb-btn { font-size: 14px; border-radius: var(--r-field); }
.pb-addjoin__note { margin-top: 8px; }
.pb-carried { margin-top: 12px; }
.pb-carried__line { margin-top: 5px; font-size: 12.5px; }
.pb-carried__go { display: inline-block; margin-top: 7px; }
.pb-waiting { margin-top: 14px; }
.pb-waiting .pb-row:last-child { border-bottom: 0; }
.pb-waiting__actions { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.pb-invite-nudge { margin-top: 12px; }
.pb-invite-nudge__body { margin-top: 5px; }
.pb-filter-note { margin-top: 6px; }
.pb-record { padding-bottom: 8px; }
.pb-record__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 9px 0 0;
    font-size: 12.5px;
}
.pb-record__spark { width: 64px; height: 16px; margin: 0; flex: none; }

/* ----------------------------------------------------------------- money */

.pb-venmo-ask { margin-top: 14px; }
.pb-venmo-ask__title { margin-top: 3px; }
.pb-venmo-ask__body { margin-top: 5px; }
.pb-venmo-ask__go { margin-top: 10px; }
.pb-settle-list .pb-settle { margin-top: 10px; }
.pb-settle__amt { display: block; margin-top: 1px; }
.pb-settle__state + .pb-settle__state { margin-top: 4px; }
.pb-statement-amt { margin-top: 2px; }
.pb-history .pb-row { padding: 10px 0; }
.pb-history__label { display: block; font-size: 13px; }
.pb-history__date { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--sub2); margin-top: 2px; }
.pb-history__amt { display: block; font-size: 13px; font-weight: 600; }
.pb-history__bal { display: block; font-size: 10.5px; color: var(--sub2); margin-top: 2px; }
.pb-net { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0 8px; }
.pb-sheet__input { margin-top: 11px; }
.pb-sheet__hint { margin-top: 6px; }
.pb-sheet__label { margin-top: 12px; }
.pb-section-gap { margin-top: 14px; }
.pb-dashed .pb-small { margin-top: 5px; }
.pb-dashed__go { display: inline-block; margin-top: 9px; }
.pb-row__name--sm { font-size: 13.5px; font-weight: 600; }
.pb-row__note--md { font-size: 13.5px; }
.pb-net__fig { font-size: 15px; }
.pb-statement-dispute { margin-top: 12px; }
.pb-statement-dispute__body { margin-top: 5px; }
.pb-statement-dispute__go { margin-top: 10px; }
.pb-statement-mute { margin-top: 12px; }
.pb-history__amt { white-space: nowrap; }

/* --------------------------------------------------------- alerts, you */

.pb-alerts__done { padding-top: 0; }
.pb-alerts__blurb { margin-top: 10px; }
.pb-alert { padding: 13px 0; gap: 11px; }
.pb-alert__text { display: block; font-size: 12.5px; line-height: 1.45; }
.pb-alert--new .pb-alert__text { font-weight: 600; }
.pb-alert__meta { display: block; font-family: var(--mono); font-size: 10px; color: var(--sub2); margin-top: 3px; }
.pb-alert__go { color: var(--ink); font-weight: 600; }
.pb-alerts__empty { text-align: center; padding: 36px 20px; color: var(--sub); font-size: 13px; }
.pb-pager { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0 0; }

.pb-you__id { padding: 14px 0 12px; }
.pb-you__name { font-size: 15px; }
.pb-you__block { padding: 12px 0 10px; border-bottom: 1px solid var(--line); }
.pb-you__block--last { border-bottom: 0; padding-top: 14px; }
.pb-you__line { margin-top: 6px; }
.pb-you__line + .pb-small { margin-top: 3px; }
.pb-you__block .pb-switch-row:first-of-type { margin-top: 2px; }
.pb-you__tz { margin-top: 12px; }
.pb-you__save { margin-top: 10px; }
.pb-you__theme > button { font-family: var(--sans); }
.pb-you__links .pb-row:last-child { border-bottom: 0; }
.pb-you__close { display: inline-block; margin-top: 14px; font-size: 12.5px; text-decoration: none; color: var(--clay); }
.pb-you__close + .pb-note { margin-top: 3px; }

/* --------------------------------------------------------------- service */

/* "Read from tampabay.com · 19 Aug 2026" is wider than "Read from netflix.com"; the
   back link keeps its line and the chip drops below it rather than the reverse. */
.pb-service__top { padding-top: 0; flex-wrap: wrap; row-gap: 6px; }
.pb-service__top .pb-back { flex: none; white-space: nowrap; }
.pb-service__top .pb-source { flex: none; margin-left: auto; text-transform: none; letter-spacing: .03em; }
.pb-service__top .pb-source a { text-decoration: underline; text-underline-offset: 2px; }
.pb-service__head { display: flex; align-items: center; gap: 12px; padding: 14px 0 12px; }
.pb-service__cat { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .11em; color: var(--sub2); }
.pb-mine + .pb-mine { margin-top: 10px; }
.pb-mine__top .pb-split { margin-top: 4px; }
.pb-mine__seats { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 9px; }
.pb-mine__seats .pb-seats { margin-top: 0; }
.pb-mine__person { font-size: 13px; font-weight: 600; }
.pb-mine__person-share { font-size: 12.5px; }
.pb-mine__invite { padding-top: 8px; }
.pb-mine__note { margin-top: 6px; }
.pb-mine__cred-open { margin-top: 10px; }
.pb-mine__charge { font-size: 12.5px; padding: 6px 0; }
.pb-cred__wait { padding: 12px 0; }
.pb-sheet__rowbtn { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line); text-align: left; cursor: pointer; }
.pb-sheet__rowbtn:hover .pb-row__name { text-decoration: underline; text-underline-offset: 3px; }

.pb-calc-panel { padding: 13px 14px; }
.pb-calc-panel > .pb-body { margin-bottom: 10px; }
.pb-calc .pb-pills { margin-top: 8px; }
.pb-calc__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 11px; }
.pb-calc__row--center { flex-direction: column; text-align: center; gap: 8px; }
.pb-calc__row--center .pb-fig--lg { font-size: 36px; }
.pb-calc__detail { display: block; margin-top: 1px; }
.pb-calc__cta { margin-top: 11px; }
.pb-calc__stack { display: block; text-align: center; margin-top: 8px; font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; }
.pb-offers { margin-top: 8px; }
.pb-offers li + li { margin-top: 3px; }
.pb-ent li + li { margin-top: 5px; }
.pb-verdict { font-size: 14px; font-weight: 600; margin-top: 6px; }
.pb-verdict + .pb-lede { margin-top: 2px; }
.pb-verdict__meta { margin-top: 6px; }
.pb-disclose--inline { display: inline; }
.pb-disclose--inline > summary { display: inline; font-weight: 400; color: var(--sub); text-decoration: underline; text-underline-offset: 3px; margin: 0; }
.pb-disclose--quiet > summary { font-weight: 400; color: var(--sub); font-size: 12px; }
.pb-tips__topic { margin-top: 12px; }
.pb-tip { padding: 10px 0; border-bottom: 1px solid var(--line); }
.pb-tip > * + * { margin-top: 4px; }
.pb-facts li + li { margin-top: 5px; }
.pb-service__method { margin-top: 12px; }

/* ------------------------------------------------------ catalog, rules */

.pb-catalog-row { }
.pb-catalog__search { margin-top: 12px; }
.pb-catalog__search .pb-input { font-size: 13px; min-height: 40px; padding: 9px 12px; }
.pb-catalog__count { margin-top: 8px; }
.pb-catalog__foot { padding: 10px 0; }
.pb-rule { padding: 12px 0; border-bottom: 1px solid var(--line); }
.pb-rule .pb-row__name { font-size: 14px; }
.pb-rule__line { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.pb-index__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pb-index__move { font-size: 12px; }
.pb-compare td.pb-compare__text { font-family: var(--sans); }
.pb-compare td.pb-compare__win { font-weight: 600; }
.pb-compare__summary { margin-top: 4px; }

/* The price index chart. Hand-rolled: no chart library, because one would cost
   resident memory on a 384 MiB instance at every cold start. Tick labels are
   HTML over the SVG, not <text> in it -- text in a scaled viewBox scales with
   the box and a 13px label renders at 6px on a phone. `--index-gutter` is the
   one number both axes share, so a year label lands under its own gridline. */
.index-chart { --index-gutter: 2.6rem; margin: 12px 0 8px; }
.index-chart__title { margin-left: var(--index-gutter); font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.index-chart__body { position: relative; padding-left: var(--index-gutter); }
.index-chart__plot { position: relative; height: 200px; }
.index-chart__svg { display: block; width: 100%; height: 100%; }
.index-chart__grid line { stroke: var(--line); stroke-width: 1; }
.index-chart__line { stroke: var(--green); stroke-width: 1.5; }
.index-chart__line--thin { opacity: .55; stroke-dasharray: 4 3; }
.index-chart__ytick, .index-chart__xtick {
    position: absolute;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--sub2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.index-chart__ytick { right: 100%; margin-right: .4rem; transform: translateY(-50%); }
.index-chart__xaxis { position: relative; height: 1.4rem; }
.index-chart__xtick { top: .3rem; }
.index-chart__xtick--middle { transform: translateX(-50%); }
.index-chart__xtick--end { transform: translateX(-100%); }

/* A real <details>, not a collapsible <div>: the thing you tap is a control
   and the keyboard can reach it. Every explanation on the index page is one. */
.f-disclose { margin-top: 14px; border-top: 1px solid var(--line); }
.f-disclose > summary {
    display: flex; align-items: center; gap: 8px;
    cursor: pointer; padding: 12px 0; list-style: none;
    font-size: 12.5px; font-weight: 600; color: var(--sub);
}
.f-disclose > summary::-webkit-details-marker { display: none; }
.f-disclose > summary::before { content: '\203A'; display: inline-block; width: 10px; transition: transform .18s ease; }
.f-disclose[open] > summary::before { transform: rotate(90deg); }
.f-disclose > summary a { margin-left: auto; font-weight: 400; }
.f-disclose__body { padding-bottom: 12px; }
.f-disclose__body p { margin: 0 0 10px; font-size: 12.5px; color: var(--sub); line-height: 1.55; }
.f-disclose__body p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ join */

.pb-join .pb-panel + .pb-panel { margin-top: 10px; }
.pb-join__price { display: flex; justify-content: space-between; align-items: center; margin-top: 11px; }
.pb-join__price .pb-seats { margin-top: 0; }
.pb-join__theypay { display: block; }
.pb-join__youpay { display: block; font-family: var(--mono); font-size: 16px; font-weight: 600; }
.pb-join__meta { margin-top: 6px; }
.pb-join__ask { margin-top: 11px; }
.pb-join__filters { margin-top: 10px; }

@media (min-width: 993px) {
    .index-chart { --index-gutter: 3rem; }
    .index-chart__plot { height: 260px; }
}

/* ----------------------------------------------------------------- stack */

.pb-stack__totals { display: flex; margin-top: 14px; padding: 13px 0; }
.pb-stack__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.pb-stack__line { margin-top: 10px; gap: 12px; flex-wrap: wrap; }
/* The element qualifier is what used to win this against Materialize's bare
   input[type=number]; it stays so a test can find it. */
.stack-party input.stack-party__input { width: 64px; min-height: 36px; padding: 6px 8px; text-align: center; font-family: var(--mono); }
.pb-stack__recalc { margin-top: 10px; }
.pb-stack__table .stack-plan, .pb-stack__table .stack-short { display: block; font-family: var(--sans); font-size: 9.5px; color: var(--sub2); }
/* The service name in a stack row is a link set in 13px text; inline padding
   lifts its hit area past 24px without moving the row. */
.pb-stack__table a { padding: 5px 0; }
.pb-stack__table .stack-short { color: var(--clay); }
.pb-stack__group { margin-top: 10px; font-weight: 600; }
.pb-stack__carry { margin-top: 7px; margin-bottom: 10px; }

/* ------------------------------------------------------------------ auth */

.pb-auth { padding-top: 22px; }
.pb-auth__brand { display: block; margin-bottom: 18px; }
.pb-auth__card { }
.pb-auth__below { margin-top: 18px; }
.step-label { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--sub2); }
.auth-title { font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1.15; margin-top: 4px; }
.auth-lede, .auth-text { font-size: 13px; color: var(--sub); line-height: 1.55; margin-top: 8px; }
.auth-text.f-help { font-size: 11.5px; color: var(--sub2); }
.auth-actions { margin-top: 14px; }
.auth-actions .btn-large, .auth-actions button, .auth-actions .pb-btn {
    display: flex; width: 100%; align-items: center; justify-content: center;
    min-height: 44px; border-radius: var(--r-field); border: 1px solid var(--ink);
    background: var(--ink); color: var(--bg); font-family: var(--sans); font-size: 14px; font-weight: 600; cursor: pointer;
}
.auth-fineprint, .auth-aside { font-size: 11.5px; color: var(--sub2); line-height: 1.5; margin-top: 10px; }
.auth-aside a, .auth-fineprint a { color: var(--sub); text-decoration: underline; text-underline-offset: 3px; }
.auth-aside + .auth-aside { margin-top: 6px; }
.auth-alert { margin: 10px 0 4px; padding: 10px 12px; border: 1px solid var(--clay); border-radius: var(--r-field); background: var(--tint-clay); color: var(--clay); font-size: 12.5px; }
.auth-alert p { margin: 0; }
.auth-remember { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-top: 10px; }
.auth-remember label { display: flex; align-items: center; gap: 8px; }
/* Allauth pages still using the floating-label markup get a block label. */
.pb-form .input-field { position: relative; margin-top: 12px; display: flex; flex-direction: column-reverse; }
.pb-form .input-field > label { position: static; display: block; font-size: 12px; font-weight: 600; color: var(--sub); margin-bottom: 5px; transform: none; }
.pb-form .field-help { font-size: 11.5px; color: var(--sub2); margin-top: 5px; }
.pb-form .left-align { text-align: left; }
.pb-form .btn-large, .pb-form .btn.f-primary {
    display: flex; width: 100%; align-items: center; justify-content: center; margin-top: 14px;
    min-height: 44px; border-radius: var(--r-field); border: 1px solid var(--ink);
    background: var(--ink); color: var(--bg); font-family: var(--sans); font-size: 14px; font-weight: 600; cursor: pointer;
}
.pb-form .btn-flat, .pb-form .f-quiet { background: none; border: 0; color: var(--sub); font-size: 13px; padding: 8px 0; cursor: pointer; }
.pb-hub__lede { margin-top: 8px; }
.pb-hub__cta { margin-top: 14px; }
.pb-hub__list { counter-reset: none; }
.pb-hub__rank { flex: none; width: 14px; font-family: var(--mono); font-size: 11px; color: var(--sub2); }
.pb-hub__steps { list-style: decimal; padding-left: 18px; font-size: 13px; line-height: 1.55; color: var(--sub); margin-top: 8px; }
.pb-hub__steps li + li { margin-top: 8px; }
.pb-hub__steps strong { color: var(--ink); }

/* ----------------------------------------------------- prose, explain */

.pb-prose h2 { font-family: var(--serif); font-size: 17.5px; font-weight: 600; margin-top: 22px; }
.pb-prose h3 { font-size: 13.5px; font-weight: 600; margin-top: 16px; }
.pb-prose p, .pb-prose li { font-size: 13.5px; line-height: 1.6; color: var(--ink); margin-top: 8px; }
.pb-prose ul, .pb-prose ol { padding-left: 18px; margin-top: 6px; }
.pb-prose ul { list-style: disc; }
.pb-prose ol { list-style: decimal; }
.pb-prose a { text-decoration: underline; text-underline-offset: 3px; }
.pb-prose .policy-toc { font-size: 12.5px; }
.pb-steps { list-style: none; padding: 0; }
.pb-steps__item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pb-steps__n { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--bline); display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px; margin-top: 2px; }
.pb-steps__item .pb-lede { margin-top: 3px; }
.pb-video { display: block; width: 100%; border-radius: var(--r-panel); border: 1px solid var(--line3); background: #000; }

/* ------------------------------------------------- legacy class layer */

/* Pages that still carry the old shell's class names render through these
   until each is rewritten. Every rule here is a mapping onto a Passbook
   component, not a design of its own; delete a rule when its last user goes. */
.page-title { font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1.15; margin-top: 10px; }
.page-subtitle, .f-help, .grid-lede { font-size: 12.5px; color: var(--sub); line-height: 1.5; margin-top: 4px; }
.edit-card__title, .close-card__title { font-family: var(--serif); font-size: 17.5px; font-weight: 600; margin-top: 18px; }
.container, .row { margin: 0; padding: 0; width: auto; }
.center, .center-align { text-align: center; }
.section { height: 12px; }
.f-prose p { font-size: 13.5px; line-height: 1.6; margin-top: 8px; }
.edit-form { margin-top: 8px; }
.edit-card, .close-card { border: 1px solid var(--line3); border-radius: var(--r-panel); background: var(--panel); padding: 13px 15px; margin-top: 12px; }
.edit-card .edit-card__title, .close-card .close-card__title { margin-top: 0; }
.edit-card p, .close-card p { font-size: 13px; line-height: 1.55; margin-top: 6px; }
.edit-actions, .button-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.input-field { position: relative; margin-top: 12px; display: flex; flex-direction: column-reverse; }
.input-field > label { position: static; display: block; font-size: 12px; font-weight: 600; color: var(--sub); margin-bottom: 5px; transform: none; }
.input-field input, .input-field textarea, .input-field select, .edit-form input[type="text"], .edit-form input[type="number"],
.edit-form input[type="email"], .edit-form input[type="tel"], .edit-form input[type="url"], .edit-form input[type="password"],
.edit-form textarea, .edit-form select, .browser-default {
    display: block; width: 100%; min-height: 44px; padding: 11px 13px; border: 1px solid var(--bline); border-radius: var(--r-field);
    background: var(--tile); color: var(--ink); font-family: var(--sans); font-size: 14px; -webkit-appearance: none; appearance: none;
}
.edit-form textarea, .f-textarea { min-height: 110px; resize: vertical; }
.edit-form input:focus, .edit-form textarea:focus, .edit-form select:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 1px var(--ink); }
.f-field { margin-top: 12px; }
.f-field__label { display: block; font-size: 12px; font-weight: 600; color: var(--sub); margin-bottom: 5px; }
.f-textarea { display: block; width: 100%; padding: 11px 13px; border: 1px solid var(--bline); border-radius: var(--r-field); background: var(--tile); color: var(--ink); font-family: var(--sans); font-size: 14px; }
.btn, .btn-large, .btn-small, .btn-flat {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 9px 14px;
    border-radius: var(--r-btn); border: 1px solid var(--bline); background: transparent; color: var(--ink);
    font-family: var(--sans); font-size: 13.5px; font-weight: 600; line-height: 1.2; cursor: pointer; text-transform: none; box-shadow: none;
}
.btn-large { min-height: 44px; font-size: 14px; border-radius: var(--r-field); }
.btn-small { min-height: 32px; padding: 6px 11px; font-size: 12px; }
.btn.f-primary, .btn-large.f-primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn.f-danger, .btn-large.f-danger, .f-danger-flat { background: transparent; color: var(--clay); border-color: var(--clay); }
.btn-flat, .f-quiet, .f-danger-quiet { border: 0; font-weight: 400; font-size: 13px; color: var(--sub); min-height: 32px; padding: 6px 4px; }
.btn[disabled], .btn-large[disabled], .btn.disabled { opacity: .45; cursor: default; }
.choice-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
/* A fieldset draws a groove border and floats its legend into it by default;
   here the legend is the pills' shared label, written like any other label. */
.choice-set { display: block; border: 0; padding: 0; margin: 12px 0 0; min-width: 0; }
.choice-set__legend { display: block; float: none; padding: 0; margin-bottom: 5px; font-size: 12px; font-weight: 600; color: var(--sub); }
.choice-row__input { position: absolute; opacity: 0; pointer-events: none; }
.choice-row__pill { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 12px; border: 1px solid var(--line3); border-radius: var(--r-pill); font-size: 11.5px; font-weight: 600; color: var(--sub); cursor: pointer; }
.choice-row__input:checked + .choice-row__pill { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.choice-row__input:focus-visible + .choice-row__pill { outline: 2px solid var(--ink); outline-offset: 2px; }
.collection, .f-collection { margin-top: 8px; }
.collection-item, .settings-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--ink); }
.settings-row--danger { color: var(--clay); }
.circle { border-radius: 50%; }
img.circle { width: 36px; height: 36px; object-fit: cover; }
.statement-link { text-decoration: underline; text-underline-offset: 3px; }
.f-money { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.f-money--positive { color: var(--green); }
.f-money--negative { color: var(--clay); }
.f-unit { font-size: 11px; color: var(--sub); }
.right { margin-left: auto; }
.left-align { text-align: left; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.f-empty { font-size: 13px; color: var(--sub); line-height: 1.5; margin-top: 10px; }
.auth-subtitle { font-family: var(--serif); font-size: 17.5px; font-weight: 600; margin-top: 18px; }
.email-list .email-row { flex-wrap: wrap; }
.auth-address { display: block; font-family: var(--mono); font-size: 13px; margin-top: 6px; }
.pb-friends__summary { cursor: pointer; list-style: none; padding: 4px 0; }
.pb-friends__summary::-webkit-details-marker { display: none; }
.pb-friends__summary::after { content: ' \203A'; }
details[open] > .pb-friends__summary::after { content: ' \25BE'; }
.pb-chip-item { gap: 6px; }
.pb-chip-item__x { background: none; border: 0; padding: 0 0 0 2px; font-size: 14px; line-height: 1; color: var(--sub); cursor: pointer; }
.pb-fieldset, .f-fieldset { border: 0; padding: 0; margin: 0; }
.f-legend { font-size: 12px; font-weight: 600; color: var(--sub); margin-bottom: 6px; padding: 0; }
.edit-form input[type="radio"], .edit-form input[type="checkbox"] { accent-color: var(--ink); width: 16px; height: 16px; }
.edit-form label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.f-fieldset p { margin-top: 8px; }
.day-slider { margin-top: 10px; }
.day-slider input[type="range"] { width: 100%; accent-color: var(--ink); }
.people-row { display: flex; flex-direction: column; margin-top: 6px; }
.edit-card__hint { font-size: 12.5px; color: var(--sub); }
.edit-card__gain { color: var(--green); font-family: var(--mono); }