/* PixelBlocker components for pages and the popup (plan 5.2).
   GENERATED from pb_design/pb_tokens.json by `python3 pb_design/generate.py`. Do not edit by hand.
   Edit pb_design/pb_tokens.json, then run the command above from the V3 root.
   Ports iOS DesignSystem.swift. Reads only var(--pb-*) from pb_tokens.css.
   Notched borders: a CSS border loses the diagonal edges, so the outer box is
   filled with the border colour and an inner box 1 px in carries the ground,
   both clipped. Glows: clip-path also clips box-shadow, so a glow goes on a
   wrapper (.pb-glow). iOS clamps a notch to a quarter of the short side; CSS
   cannot, so pick a smaller notch on very small boxes.
*/

/* ---- Ground ---- */
.pb-atmosphere {
  background-color: var(--pb-void);
  background-image:
    radial-gradient(circle 600px at 20% 0%, var(--pb-atmos-red) 30px, transparent 600px),
    radial-gradient(circle 500px at 85% 100%, var(--pb-atmos-cyan) 30px, transparent 500px);
  background-attachment: fixed;
  color: var(--pb-text);
  font-family: var(--pb-font-body);
}
.pb-column { max-width: var(--pb-content-max); margin: 0 auto; padding: 0 var(--pb-gutter) var(--pb-bottom-pad); box-sizing: border-box; }
.pb-stack { display: flex; flex-direction: column; gap: var(--pb-stack); }
.pb-hub { display: flex; flex-direction: column; gap: var(--pb-hub); }

/* ---- The notch ---- */
.pb-notch { --pb-n: var(--pb-notch-card); clip-path: polygon(0 0, calc(100% - var(--pb-n)) 0, 100% var(--pb-n), 100% 100%, var(--pb-n) 100%, 0 calc(100% - var(--pb-n))); border-radius: 0; }
.pb-n-chip { --pb-n: var(--pb-notch-chip); }
.pb-n-browser { --pb-n: var(--pb-notch-browser); }
.pb-n-small { --pb-n: var(--pb-notch-small); }
.pb-n-button { --pb-n: var(--pb-notch-button); }
.pb-n-card { --pb-n: var(--pb-notch-card); }
.pb-n-large { --pb-n: var(--pb-notch-large); }
.pb-n-hero { --pb-n: var(--pb-notch-hero); }

/* ---- Card: notch 10, 1 px border on the notched path, red accent bar ---- */
.pb-card {
  --pb-n: var(--pb-notch-card);
  position: relative; isolation: isolate; box-sizing: border-box;
  padding: var(--pb-card-pad);
  background: var(--pb-card-outline, var(--pb-border));
  clip-path: polygon(0 0, calc(100% - var(--pb-n)) 0, 100% var(--pb-n), 100% 100%, var(--pb-n) 100%, 0 calc(100% - var(--pb-n)));
}
.pb-card::before {
  content: ""; position: absolute; inset: var(--pb-hairline); z-index: -1;
  background: var(--pb-card-ground, var(--pb-card));
  clip-path: polygon(0 0, calc(100% - calc(var(--pb-n) - 0.59px)) 0, 100% calc(var(--pb-n) - 0.59px), 100% 100%, calc(var(--pb-n) - 0.59px) 100%, 0 calc(100% - calc(var(--pb-n) - 0.59px)));
}
.pb-card::after {
  content: ""; position: absolute; top: 0; left: 0; right: var(--pb-accent-bar-inset);
  height: var(--pb-accent-bar); z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, var(--pb-card-accent, var(--pb-accent)), transparent);
  box-shadow: 0 0 4px var(--pb-red-bar-glow);
}
.pb-card--flat::after { display: none; }
.pb-card--selected { --pb-card-outline: var(--pb-selected); }
.pb-card--focus { --pb-card-outline: var(--pb-border-active); }
.pb-card--large { --pb-n: var(--pb-notch-large); }
.pb-card--hero { --pb-n: var(--pb-notch-hero); }
.pb-card--tier-free { --pb-card-accent: var(--pb-tier-free); }
.pb-card--tier-basic { --pb-card-accent: var(--pb-tier-basic); }
.pb-card--tier-premium { --pb-card-accent: var(--pb-tier-premium); }

/* ---- Section label: 01, TITLE, a rule, optional yellow tag ---- */
.pb-section { display: flex; align-items: center; gap: 10px; padding: var(--pb-section-top) 0 var(--pb-section-bottom); }
.pb-section__num { font: 400 10px var(--pb-font-mono); letter-spacing: 2px; color: var(--pb-accent); }
.pb-section__title { font: 700 10px var(--pb-font-display); letter-spacing: 4px; text-transform: uppercase; color: var(--pb-text-2); white-space: nowrap; }
.pb-section__rule { flex: 1; height: var(--pb-hairline); background: linear-gradient(90deg, var(--pb-border-active), transparent); }
.pb-section__tag { font: 400 8px var(--pb-font-mono); letter-spacing: 1.5px; color: var(--pb-tag); border: 1px solid currentColor; padding: 2px 6px; white-space: nowrap; }

/* ---- Page title with // SUBTITLE ---- */
.pb-page-title { text-align: center; padding: var(--pb-title-top) 0 var(--pb-title-bottom); }
.pb-page-title__title { margin: 0; font: 800 18px var(--pb-font-display); letter-spacing: 8px; text-transform: uppercase; color: var(--pb-text); }
.pb-page-title__sub { margin-top: 4px; font: 400 10px var(--pb-font-mono); letter-spacing: 3px; text-transform: uppercase; color: var(--pb-accent); }
.pb-page-title__sub::before { content: "// "; }

/* ---- Status pill: 6 px pulsing dot, mono label, notch 6 ---- */
.pb-pill {
  --pb-n: var(--pb-notch-small);
  --pb-pill-color: var(--pb-red); --pb-pill-ground: var(--pb-red-subtle); --pb-pill-glow: var(--pb-red-dot-glow);
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; box-sizing: border-box;
  font: 400 10px var(--pb-font-mono); letter-spacing: 2px; text-transform: uppercase;
  color: var(--pb-pill-color); background: var(--pb-pill-color);
  clip-path: polygon(0 0, calc(100% - var(--pb-n)) 0, 100% var(--pb-n), 100% 100%, var(--pb-n) 100%, 0 calc(100% - var(--pb-n)));
}
.pb-pill::before {
  content: ""; position: absolute; inset: var(--pb-hairline); z-index: -1;
  background: linear-gradient(var(--pb-pill-ground), var(--pb-pill-ground)), var(--pb-pill-base, var(--pb-card));
  clip-path: polygon(0 0, calc(100% - calc(var(--pb-n) - 0.59px)) 0, 100% calc(var(--pb-n) - 0.59px), 100% 100%, calc(var(--pb-n) - 0.59px) 100%, 0 calc(100% - calc(var(--pb-n) - 0.59px)));
}
.pb-pill__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 4px var(--pb-pill-glow);
  animation: pb-pulse var(--pb-pulse) ease-in-out infinite alternate; }
.pb-pill--static .pb-pill__dot { animation: none; }
.pb-pill--green { --pb-pill-color: var(--pb-green); --pb-pill-ground: var(--pb-green-subtle); --pb-pill-glow: var(--pb-green-subtle); }
.pb-pill--yellow { --pb-pill-color: var(--pb-yellow); --pb-pill-ground: var(--pb-yellow-subtle); --pb-pill-glow: var(--pb-yellow-subtle); }
.pb-pill--off { --pb-pill-color: var(--pb-text-3); --pb-pill-ground: transparent; --pb-pill-glow: transparent; }
.pb-pill--off .pb-pill__dot { animation: none; }
@keyframes pb-pulse { from { opacity: 1; } to { opacity: 0.25; } }

/* ---- Buttons: primary solid red with a dark label; ghost red outline ---- */
.pb-btn {
  --pb-n: var(--pb-notch-button);
  display: flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box;
  padding: 14px 24px; border: 0; cursor: pointer;
  font: 700 12px var(--pb-font-display); letter-spacing: 3px; text-transform: uppercase;
  color: var(--pb-on-accent); background: var(--pb-accent);
  clip-path: polygon(0 0, calc(100% - var(--pb-n)) 0, 100% var(--pb-n), 100% 100%, var(--pb-n) 100%, 0 calc(100% - var(--pb-n)));
  transition: background-color var(--pb-press) ease-in-out;
}
.pb-btn:active { background: var(--pb-red-hot); }
.pb-btn:disabled { background: var(--pb-border-active); color: var(--pb-text-3); cursor: default; }
.pb-btn--ghost {
  --pb-n: var(--pb-notch-small);
  position: relative; isolation: isolate; padding: 12px 22px;
  color: var(--pb-ghost-tint, var(--pb-accent)); background: var(--pb-ghost-tint, var(--pb-accent));
}
.pb-btn--ghost::before {
  content: ""; position: absolute; inset: var(--pb-hairline); z-index: -1;
  background: var(--pb-btn-base, var(--pb-void));
  clip-path: polygon(0 0, calc(100% - calc(var(--pb-n) - 0.59px)) 0, 100% calc(var(--pb-n) - 0.59px), 100% 100%, calc(var(--pb-n) - 0.59px) 100%, 0 calc(100% - calc(var(--pb-n) - 0.59px)));
  transition: background var(--pb-press) ease-in-out;
}
.pb-btn--ghost:active { background: var(--pb-ghost-tint, var(--pb-accent)); color: var(--pb-red-dim); }
.pb-btn--ghost:active::before { background: linear-gradient(var(--pb-red-subtle), var(--pb-red-subtle)), var(--pb-btn-base, var(--pb-void)); }
.pb-btn--ghost:disabled { --pb-ghost-tint: var(--pb-text-3); }
.pb-glow { filter: drop-shadow(0 0 7px var(--pb-red-glow)); }
.pb-glow:active { filter: drop-shadow(0 0 3px var(--pb-red-glow)); }

/* ---- Back button ---- */
.pb-back {
  --pb-n: var(--pb-notch-small);
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 12px; border: 0; cursor: pointer; background: var(--pb-border);
  font: 700 11px var(--pb-font-display); letter-spacing: 2px; text-transform: uppercase; color: var(--pb-text);
  clip-path: polygon(0 0, calc(100% - var(--pb-n)) 0, 100% var(--pb-n), 100% 100%, var(--pb-n) 100%, 0 calc(100% - var(--pb-n)));
}
.pb-back::before { content: ""; position: absolute; inset: var(--pb-hairline); z-index: -1; background: var(--pb-card); clip-path: polygon(0 0, calc(100% - calc(var(--pb-n) - 0.59px)) 0, 100% calc(var(--pb-n) - 0.59px), 100% 100%, calc(var(--pb-n) - 0.59px) 100%, 0 calc(100% - calc(var(--pb-n) - 0.59px))); }

/* ---- Rows ---- */
.pb-row { display: flex; align-items: center; gap: 12px; padding: var(--pb-card-pad); cursor: pointer; }
.pb-row__chip { --pb-n: var(--pb-notch-chip); flex: none; display: grid; place-items: center; width: var(--pb-chip); height: var(--pb-chip);
  background: var(--pb-red-chip); color: var(--pb-accent); clip-path: polygon(0 0, calc(100% - var(--pb-n)) 0, 100% var(--pb-n), 100% 100%, var(--pb-n) 100%, 0 calc(100% - var(--pb-n))); }
.pb-row__chip svg { width: 14px; height: 14px; fill: currentColor; }
.pb-row__title { flex: 1; min-width: 0; font: 500 16px var(--pb-font-body); color: var(--pb-text); }
.pb-row__sub { font: 400 13px var(--pb-font-body); color: var(--pb-text-2); }
.pb-row__detail { font: 400 10px var(--pb-font-mono); letter-spacing: 2px; text-transform: uppercase; color: var(--pb-accent); }
.pb-row__chevron { color: var(--pb-text-3); width: 11px; height: 11px; fill: currentColor; }
.pb-toggle-row { display: flex; align-items: center; gap: 12px; padding: var(--pb-toggle-row-pad) var(--pb-card-pad); }

/* ---- Switch (iOS Toggle tinted red) ---- */
.pb-switch { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 44px; height: 26px; margin: 0;
  border-radius: 13px; background: var(--pb-border-active); cursor: pointer; transition: background var(--pb-press) ease-in-out; }
.pb-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--pb-text); transition: transform var(--pb-press) ease-in-out; }
.pb-switch:checked { background: var(--pb-selected); }
.pb-switch:checked::after { transform: translateX(18px); }
.pb-switch:disabled { opacity: 0.4; cursor: default; }

/* ---- Toggle chip (targets, styles): red outline when selected ---- */
.pb-chip {
  --pb-n: var(--pb-notch-chip);
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border: 0; cursor: pointer; background: var(--pb-border);
  font: 500 13px var(--pb-font-body); color: var(--pb-text-2);
  clip-path: polygon(0 0, calc(100% - var(--pb-n)) 0, 100% var(--pb-n), 100% 100%, var(--pb-n) 100%, 0 calc(100% - var(--pb-n)));
}
.pb-chip::before { content: ""; position: absolute; inset: var(--pb-hairline); z-index: -1; background: var(--pb-input); clip-path: polygon(0 0, calc(100% - calc(var(--pb-n) - 0.59px)) 0, 100% calc(var(--pb-n) - 0.59px), 100% 100%, calc(var(--pb-n) - 0.59px) 100%, 0 calc(100% - calc(var(--pb-n) - 0.59px))); }
.pb-chip[aria-pressed="true"], .pb-chip.is-selected { background: var(--pb-selected); color: var(--pb-text); }
.pb-chip[aria-pressed="true"]::before, .pb-chip.is-selected::before { background: linear-gradient(var(--pb-red-subtle), var(--pb-red-subtle)), var(--pb-input); }

/* ---- Stat cell ---- */
.pb-stat { display: flex; flex-direction: column; gap: 4px; }
.pb-stat__label { font: 400 9px var(--pb-font-mono); letter-spacing: 2px; text-transform: uppercase; color: var(--pb-text-3); }
.pb-stat__value { font: 900 22px var(--pb-font-display); letter-spacing: 1px; color: var(--pb-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pb-stat-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pb-hub); }

/* ---- Inputs ---- */
.pb-input { --pb-n: var(--pb-notch-small); box-sizing: border-box; width: 100%; padding: 10px 14px; border: 1px solid var(--pb-border);
  background: var(--pb-input); color: var(--pb-text); font: 400 14px var(--pb-font-mono); border-radius: 0; outline: none; }
.pb-input:focus { border-color: var(--pb-border-active); }

/* ---- Tab bar: void ground, hairline on top, red selected tint, system-font labels ---- */
.pb-tabbar { display: flex; background: var(--pb-void); border-top: var(--pb-hairline) solid var(--pb-outline); }
.pb-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 8px; border: 0; background: none;
  cursor: pointer; color: var(--pb-text-2); font: 500 10px system-ui, -apple-system, 'Segoe UI', sans-serif; }
.pb-tab svg { width: 24px; height: 24px; fill: currentColor; }
.pb-tab[aria-selected="true"], .pb-tab.is-selected { color: var(--pb-selected); }

/* ---- Type ramp (iOS call sites, Play PbType): .pb-t-<name> ---- */
.pb-t-page-title { font: 800 18px var(--pb-font-display); letter-spacing: 8px; color: var(--pb-text); text-transform: uppercase; }
.pb-t-page-subtitle { font: 400 10px var(--pb-font-mono); letter-spacing: 3px; color: var(--pb-red); text-transform: uppercase; }
.pb-t-section-number { font: 400 10px var(--pb-font-mono); letter-spacing: 2px; color: var(--pb-red); }
.pb-t-section-title { font: 700 10px var(--pb-font-display); letter-spacing: 4px; color: var(--pb-text-2); text-transform: uppercase; }
.pb-t-section-tag { font: 400 8px var(--pb-font-mono); letter-spacing: 1.5px; color: var(--pb-yellow); }
.pb-t-row-title { font: 500 16px var(--pb-font-body); letter-spacing: 0px; color: var(--pb-text); }
.pb-t-row-detail { font: 400 10px var(--pb-font-mono); letter-spacing: 2px; color: var(--pb-red); text-transform: uppercase; }
.pb-t-row-subtitle { font: 400 13px var(--pb-font-body); letter-spacing: 0px; color: var(--pb-text-2); }
.pb-t-body-copy { font: 400 13px var(--pb-font-body); letter-spacing: 0px; color: var(--pb-text-2); }
.pb-t-body-fine { font: 400 11px var(--pb-font-body); letter-spacing: 0px; color: var(--pb-text-3); }
.pb-t-stat-label { font: 400 9px var(--pb-font-mono); letter-spacing: 2px; color: var(--pb-text-3); text-transform: uppercase; }
.pb-t-stat-value { font: 900 22px var(--pb-font-display); letter-spacing: 1px; }
.pb-t-pill-label { font: 400 10px var(--pb-font-mono); letter-spacing: 2px; text-transform: uppercase; }
.pb-t-button-label { font: 700 12px var(--pb-font-display); letter-spacing: 3px; text-transform: uppercase; }
.pb-t-back-label { font: 700 11px var(--pb-font-display); letter-spacing: 2px; color: var(--pb-text); text-transform: uppercase; }
.pb-t-hero-title { font: 800 20px var(--pb-font-display); letter-spacing: 3px; color: var(--pb-text); text-transform: uppercase; }
.pb-t-brand-huge { font: 900 28px var(--pb-font-display); letter-spacing: 8px; color: var(--pb-text); text-transform: uppercase; }

/* ---- Reduced motion: stop never-ending animations, as Play does ---- */
@media (prefers-reduced-motion: reduce) {
  .pb-pill__dot, .pb-anim-infinite { animation: none !important; }
  .pb-btn, .pb-btn--ghost::before, .pb-switch, .pb-switch::after { transition: none !important; }
}

/* ==== The rebuild's parts (unit d0-parts; design-proposal-2026-10-22/assets/pb.css) ====
   Every part the proposal draws, once. Additive: no rule above changes. A proposal block whose
   name a rule above already uses takes the suffix 2 with its modifiers (pb-card2, pb-row2,
   pb-section2, pb-pill2, pb-btn2, pb-back2, pb-switch2, pb-chip2, pb-stat2, pb-input2,
   pb-tabbar2, pb-tab2); every element keeps the proposal's name (pb-row-title, pb-pill-dot).
   Chromium 87 safe (Qt WebEngine 5.15): no color-mix, no :is, :has only in a rule of its own.
   The tints and the switch and scrim colours are --pb-* variables of pb_desktop.css and
   pb_popup.css (pb_tokens.json parts); a page of these parts links one of the two.
   Text rule: no box that holds words has a fixed height or a clamp; display text at
   line-height 1.3, body 1.35, mono 1.4. */

/* ---- Page ground and column ---- */
.pb-page {
  min-height: 100vh; color: var(--pb-text);
  background:
    radial-gradient(circle 600px at 20% 0%, var(--pb-atmos-red) 30px, transparent 600px),
    radial-gradient(circle 500px at 85% 100%, var(--pb-atmos-cyan) 30px, transparent 500px),
    var(--pb-void);
}
.pb-col { max-width: var(--pb-content-max); margin: 0 auto; padding: 0 var(--pb-gutter) var(--pb-bottom-pad); display: flex; flex-direction: column; gap: var(--pb-stack); box-sizing: border-box; }
.pb-col--hub { gap: var(--pb-hub); }

/* ---- Icons: Material Symbols Sharp by ligature name ---- */
/* With no icon font staged, pb_parts.js finds the ligature drawn as words and sets
   html.pb-icon-absent, which hides every icon (its 1em box keeps the layout). */
.pb-icon {
  font-family: var(--pb-font-icon); font-weight: normal; font-style: normal;
  font-size: 20px; line-height: 1; letter-spacing: 0; text-transform: none; text-indent: 0;
  white-space: nowrap; direction: ltr; display: inline-block; flex: none;
  /* a fixed 1em box: the glyph is 1em square, and with no icon font the ligature
     name (radio_button_unchecked) would draw as words and squeeze the text beside it */
  width: 1em; overflow: hidden;
  font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  -webkit-font-smoothing: antialiased; user-select: none;
}
html.pb-icon-absent .pb-icon { visibility: hidden !important; }
.pb-icon--line { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; }

/* ---- Text roles and the wordmark ---- */
.pb-copy { font: 400 13px/1.35 var(--pb-font-body); color: var(--pb-text-2); margin: 0; }
.pb-note { font: 400 11px/1.35 var(--pb-font-body); color: var(--pb-text-3); margin: 0; padding: 0 4px; }
.pb-mono-label { font: 400 9px/1.4 var(--pb-font-mono); letter-spacing: 2px; text-transform: uppercase; color: var(--pb-red); }
.pb-wordmark { font: 900 28px/1.3 var(--pb-font-display); letter-spacing: 8px; text-transform: uppercase; color: var(--pb-text); white-space: nowrap; }
.pb-wordmark b { color: var(--pb-red); font-weight: inherit; }
.pb-wordmark--small { font-size: 16px; letter-spacing: 5px; }

/* ---- The notched shape: the border fills the box (::before), the ground sits 1 px in (::after) ---- */
.pb-card2, .pb-hero, .pb-row2, .pb-toggle, .pb-tile, .pb-homerow, .pb-stat2, .pb-tier,
.pb-pill2, .pb-btn2, .pb-btn-ghost, .pb-chip2, .pb-seg > *, .pb-back2, .pb-sheet-panel,
.pb-input2, .pb-row-icon, .pb-icon-tile {
  --n: var(--pb-notch-card); --_bd: var(--pb-border); --_bg: var(--pb-card);
  --_bar: transparent; --_bar-glow: transparent; --_bar-w: calc(100% - var(--pb-accent-bar-inset));
  position: relative; isolation: isolate; box-sizing: border-box;
}
.pb-card2::before, .pb-hero::before, .pb-row2::before, .pb-toggle::before, .pb-tile::before,
.pb-homerow::before, .pb-stat2::before, .pb-tier::before, .pb-pill2::before, .pb-btn2::before,
.pb-btn-ghost::before, .pb-chip2::before, .pb-seg > *::before, .pb-back2::before,
.pb-sheet-panel::before, .pb-input2::before, .pb-row-icon::before, .pb-icon-tile::before {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -2; pointer-events: none;
  background: var(--_bd);
  clip-path: polygon(0 0, calc(100% - var(--n)) 0, 100% var(--n), 100% 100%, var(--n) 100%, 0 calc(100% - var(--n)));
  transition: background-color var(--pb-press) var(--pb-ease);
}
.pb-card2::after, .pb-hero::after, .pb-row2::after, .pb-toggle::after, .pb-tile::after,
.pb-homerow::after, .pb-stat2::after, .pb-tier::after, .pb-pill2::after, .pb-btn2::after,
.pb-btn-ghost::after, .pb-chip2::after, .pb-seg > *::after, .pb-back2::after,
.pb-sheet-panel::after, .pb-input2::after, .pb-row-icon::after, .pb-icon-tile::after {
  --ni: max(0px, calc(var(--n) - 0.41px));
  content: ''; position: absolute; top: 1px; right: 1px; bottom: 1px; left: 1px; z-index: -1; pointer-events: none;
  background-color: var(--_bg);
  background-image: linear-gradient(90deg, var(--_bar), transparent), linear-gradient(90deg, var(--_bar-glow), transparent);
  background-size: var(--_bar-w) var(--pb-accent-bar), var(--_bar-w) 6px;
  background-repeat: no-repeat;
  clip-path: polygon(0 0, calc(100% - var(--ni)) 0, 100% var(--ni), 100% 100%, var(--ni) 100%, 0 calc(100% - var(--ni)));
  transition: background-color var(--pb-press) var(--pb-ease);
}

/* ---- Card ---- */
.pb-card2 { --_bar: var(--pb-red); --_bar-glow: var(--pb-red-18); padding: var(--pb-card-pad); }
.pb-card2--roomy { padding: 18px; }
.pb-card2--plain { --_bar: transparent; --_bar-glow: transparent; }
.pb-card2--red { --_bd: var(--pb-red-40); }
.pb-card2--yellow { --_bd: var(--pb-yellow-40); --_bar: var(--pb-yellow); --_bar-glow: var(--pb-yellow-18); }
.pb-card2--green { --_bd: var(--pb-green-50); --_bar: var(--pb-green); --_bar-glow: var(--pb-green-18); }
.pb-card2--cyan { --_bar: var(--pb-cyan); --_bar-glow: var(--pb-cyan-18); }

/* ---- Hero (notch 14): head, big value, title ---- */
.pb-hero {
  --n: var(--pb-notch-hero); --_bar: var(--pb-red); --_bd: var(--pb-red-40); --_bar-w: 100%;
  padding: 18px; display: flex; flex-direction: column; gap: 14px;
}
.pb-hero::after {
  background-image: linear-gradient(90deg, transparent, var(--_bar), transparent), linear-gradient(180deg, var(--pb-red-subtle), transparent 50%);
  background-size: 100% var(--pb-accent-bar), 100% 100%;
}
.pb-hero-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pb-hero-title { font: 800 20px/1.3 var(--pb-font-display); letter-spacing: 3px; text-transform: uppercase; margin: 0; color: var(--pb-text); min-width: 0; }
.pb-hero-big { font: 900 28px/1.3 var(--pb-font-display); letter-spacing: 1px; font-variant-numeric: tabular-nums; color: var(--pb-text); }
.pb-hero-sub { font: 400 10px/1.4 var(--pb-font-mono); letter-spacing: 2px; text-transform: uppercase; color: var(--pb-red); margin: -8px 0 0; }

/* ---- Page title ---- */
.pb-title { text-align: center; padding: var(--pb-title-top) 0 var(--pb-title-bottom); display: flex; flex-direction: column; gap: 4px; }
.pb-title h1 { margin: 0; font: 800 18px/1.3 var(--pb-font-display); letter-spacing: 8px; text-indent: 8px; text-transform: uppercase; color: var(--pb-text); }
.pb-title p { margin: 0; font: 400 10px/1.4 var(--pb-font-mono); letter-spacing: 3px; text-indent: 3px; text-transform: uppercase; color: var(--pb-red); }
.pb-title p::before { content: '// '; }

/* ---- Section label: number, title, rule, tag ---- */
.pb-section2 { display: flex; align-items: center; gap: 10px; padding: var(--pb-section-top) 0 var(--pb-section-bottom); }
.pb-section-num { font: 400 10px/1.4 var(--pb-font-mono); letter-spacing: 2px; color: var(--pb-red); flex: none; }
.pb-section-title { font: 700 10px/1.3 var(--pb-font-display); letter-spacing: 4px; text-transform: uppercase; color: var(--pb-text-2); flex: 0 1 auto; min-width: 0; margin: 0; }
.pb-section-rule { flex: 1 1 24px; height: var(--pb-hairline); background: linear-gradient(90deg, var(--pb-border-active), transparent); }
.pb-section-tag { flex: none; white-space: nowrap; font: 400 8px/1.4 var(--pb-font-mono); letter-spacing: 1.5px; color: var(--pb-yellow); border: 1px solid currentColor; padding: 2px 6px; }

/* ---- Row icon chip and icon tile ---- */
.pb-row-icon { --n: var(--pb-notch-chip); --_bd: var(--pb-red-chip); --_bg: transparent; width: var(--pb-chip); height: var(--pb-chip); flex: none; display: grid; place-items: center; color: var(--pb-red); }
.pb-row-icon::after { display: none; }
.pb-row-icon .pb-icon { font-size: 16px; }
.pb-row-icon.is-green { --_bd: var(--pb-green-12); color: var(--pb-green); }
.pb-row-icon.is-yellow { --_bd: var(--pb-yellow-12); color: var(--pb-yellow); }
.pb-row-icon.is-muted { --_bd: var(--pb-border-active); color: var(--pb-text-2); }
.pb-icon-tile { --n: var(--pb-notch-small); --_bd: var(--pb-red-18); --_bg: transparent; width: var(--pb-tile); height: var(--pb-tile); flex: none; display: grid; place-items: center; color: var(--pb-red); }
.pb-icon-tile::after { display: none; }
.pb-icon-tile .pb-icon { font-size: 24px; filter: drop-shadow(0 0 4px var(--pb-red-glow)); }

/* ---- Row: icon chip, title, sub, detail (on and off colours), chevron ---- */
.pb-row2 {
  --_bar: var(--pb-red); --_bar-glow: var(--pb-red-18);
  display: flex; align-items: center; gap: 12px; padding: var(--pb-card-pad); color: inherit; text-decoration: none;
  font: inherit; width: 100%; text-align: start; border: 0; background: none;
}
a.pb-row2, button.pb-row2, label.pb-row2 { cursor: pointer; }
.pb-row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pb-row-title { font: 500 16px/1.3 var(--pb-font-body); color: var(--pb-text); }
.pb-row-sub { font: 400 13px/1.35 var(--pb-font-body); color: var(--pb-text-2); }
.pb-row-detail { flex: none; font: 400 10px/1.4 var(--pb-font-mono); letter-spacing: 2px; text-transform: uppercase; color: var(--pb-red); white-space: nowrap; }
.pb-row-detail--on { color: var(--pb-active); }
.pb-row-detail--off { color: var(--pb-text-3); }
.pb-row-detail--yellow { color: var(--pb-yellow); }
.pb-chevron { color: var(--pb-text-3); font-size: 18px; margin-inline-end: -4px; }
.pb-row2--target { padding-top: var(--pb-target-row-pad); padding-bottom: var(--pb-target-row-pad); }
.pb-row2--target .pb-row-title { font-size: 15px; }
.pb-row2--plain { --_bar: transparent; --_bar-glow: transparent; }

/* ---- Toggle row and switch (iOS Toggle tinted red) ---- */
.pb-toggle { --_bar: var(--pb-red); --_bar-glow: var(--pb-red-18); display: flex; align-items: center; gap: 12px; padding: var(--pb-toggle-row-pad) var(--pb-card-pad); cursor: pointer; }
.pb-switch2 {
  -webkit-appearance: none; appearance: none; margin: 0; flex: none; cursor: pointer;
  width: 51px; height: 31px; border-radius: 16px; position: relative;
  background: var(--pb-switch-track); transition: background-color var(--pb-switch-ms) var(--pb-ease);
}
.pb-switch2::before {
  content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%;
  background: var(--pb-switch-thumb); box-shadow: 0 3px 8px var(--pb-switch-shadow), 0 3px 1px var(--pb-switch-shadow-near);
  transition: transform var(--pb-switch-ms) var(--pb-ease);
}
.pb-switch2:checked { background: var(--pb-red); }
.pb-switch2:checked::before { transform: translateX(20px); }
[dir="rtl"] .pb-switch2::before { left: auto; right: 2px; }
[dir="rtl"] .pb-switch2:checked::before { transform: translateX(-20px); }
.pb-switch2:disabled { opacity: 0.4; cursor: default; }
.pb-switch2:focus-visible { outline: 1px solid var(--pb-red); outline-offset: 2px; }

/* ---- Home row: a big feature ---- */
.pb-homerow { --_bar: var(--pb-red); --_bar-glow: var(--pb-red-18); --_bd: var(--pb-red-40); display: flex; align-items: flex-start; gap: 14px; padding: 16px; color: inherit; text-decoration: none; cursor: pointer; }
.pb-homerow-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pb-homerow-title { font: 800 14px/1.3 var(--pb-font-display); letter-spacing: 3px; text-transform: uppercase; color: var(--pb-text); }
.pb-homerow-copy { font: 400 13px/1.35 var(--pb-font-body); color: var(--pb-text-2); }
.pb-homerow-status { font: 400 10px/1.4 var(--pb-font-mono); letter-spacing: 1px; color: var(--pb-red); }
.pb-homerow > .pb-icon { color: var(--pb-red); font-size: 18px; align-self: flex-start; margin-top: 2px; }
/* locked: the icon tile and the chevron dim, the words keep their contrast (the proposal dimmed the words to 2.6 to 1) */
.pb-homerow.is-locked > .pb-icon-tile, .pb-homerow.is-locked > .pb-icon { opacity: 0.55; }
.pb-homerow > .pb-badge { position: absolute; top: 8px; right: 8px; }
[dir="rtl"] .pb-homerow > .pb-badge { right: auto; left: 8px; }

/* ---- Quick tile ---- */
.pb-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pb-tile { --_bar: var(--pb-red); --_bar-glow: var(--pb-red-18); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px 6px; text-align: center; color: inherit; text-decoration: none; cursor: pointer; border: 0; background: none; font: inherit; min-width: 0; }
.pb-tile .pb-icon { font-size: 26px; color: var(--pb-red); font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24; }
.pb-tile-label { font: 700 9px/1.35 var(--pb-font-display); letter-spacing: 1.5px; text-transform: uppercase; color: var(--pb-text); }
.pb-tile-sub { font: 400 11px/1.35 var(--pb-font-body); color: var(--pb-text-2); }
/* a centred flex column sizes its words to their longest word: bound them to the tile so a long word breaks */
.pb-tile-label, .pb-tile-sub, .pb-empty > *, .pb-dialog-body > * { max-width: 100%; }
.pb-tile--big { padding: 22px 8px; --_bd: var(--pb-red-glow); }
.pb-tile--big .pb-icon { font-size: 34px; }
.pb-tile--big .pb-tile-label { font-size: 12px; letter-spacing: 3px; }

/* ---- Stat cell: red, cyan, green, yellow ---- */
.pb-stat2 { --_bar: var(--pb-red); --_bar-glow: var(--pb-red-18); padding: 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pb-stat-label { font: 400 9px/1.4 var(--pb-font-mono); letter-spacing: 2px; text-transform: uppercase; color: var(--pb-text-3); }
.pb-stat-value { font: 900 22px/1.3 var(--pb-font-display); letter-spacing: 1px; font-variant-numeric: tabular-nums; color: var(--pb-text); white-space: nowrap; }
.pb-stat2--cyan { --_bar: var(--pb-cyan); --_bar-glow: var(--pb-cyan-18); }
.pb-stat2--cyan .pb-stat-value { color: var(--pb-cyan); }
.pb-stat2--yellow { --_bar: var(--pb-yellow); --_bar-glow: var(--pb-yellow-18); }
.pb-stat2--yellow .pb-stat-value { color: var(--pb-yellow); }
.pb-stat2--green { --_bar: var(--pb-green); --_bar-glow: var(--pb-green-18); }
.pb-stat2--green .pb-stat-value { color: var(--pb-green); }
.pb-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

/* ---- Status pill: live, on, tag, off ---- */
.pb-pill2 {
  --n: var(--pb-notch-small); --c: var(--pb-red); --_glow: var(--pb-red-dot-glow);
  --_bd: var(--c); --_bg: var(--pb-red-on-void);
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; flex: none;
  font: 400 10px/1.4 var(--pb-font-mono); letter-spacing: 2px; text-transform: uppercase; color: var(--c); white-space: nowrap;
}
.pb-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 4px var(--_glow); animation: pb-pulse var(--pb-pulse) var(--pb-ease) infinite alternate; }
.pb-pill2--on { --c: var(--pb-active); --_bg: var(--pb-green-on-void); --_glow: var(--pb-green-60); }
.pb-pill2--tag { --c: var(--pb-yellow); --_bg: var(--pb-yellow-on-void); --_glow: var(--pb-yellow-60); }
.pb-pill2--off { --c: var(--pb-text-3); --_bg: var(--pb-text-3-on-void); --_glow: var(--pb-text-3-60); }
.pb-pill2--off .pb-pill-dot, .pb-pill2--still .pb-pill-dot { animation: none; }

/* ---- Badges ---- */
/* the label is dark on the tier colour, as on the primary button: white on brand red reads 3.95 to 1 */
.pb-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 4px; font: 400 8px/1.4 var(--pb-font-mono); letter-spacing: 1.5px; text-transform: uppercase; color: var(--pb-on-accent); background: var(--pb-tier-premium); white-space: nowrap; flex: none; }
.pb-badge .pb-icon { font-size: 10px; }
.pb-badge--basic { background: var(--pb-yellow-85); color: var(--pb-on-accent); }
.pb-badge-line { display: inline-block; font: 400 8px/1.4 var(--pb-font-mono); letter-spacing: 1.5px; text-transform: uppercase; color: var(--pb-yellow); border: 1px solid currentColor; padding: 2px 5px; white-space: nowrap; }

/* ---- Buttons: one primary, the ghost and its quiet, green and inline forms ----
   A label never wraps while the button can grow: the button is at least its label wide
   (min-width: fit-content), and a row of buttons (.pb-actions) puts whole buttons on the
   next line instead. Only a label wider than the whole row wraps, between words. */
.pb-btn2, .pb-btn-ghost {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-width: fit-content; max-width: 100%;
  border: 0; background: none; cursor: pointer; text-decoration: none; text-align: center;
  font: 700 12px/1.3 var(--pb-font-display); letter-spacing: 3px; text-transform: uppercase;
  white-space: normal; overflow-wrap: normal; word-break: normal;
  transition: color var(--pb-press) var(--pb-ease), filter var(--pb-press) var(--pb-ease);
}
.pb-btn2 { --n: var(--pb-notch-button); --_bd: var(--pb-red); --_bg: var(--pb-red); padding: 14px 24px; color: var(--pb-on-accent); filter: drop-shadow(0 0 7px var(--pb-red-glow)); }
.pb-btn-ghost { --n: var(--pb-notch-small); --t: var(--pb-red); --_t-tint: var(--pb-red-on-void); --_t-press: var(--pb-red-70); --_bd: var(--t); --_bg: var(--pb-void); padding: 12px 22px; color: var(--t); }
.pb-btn-ghost--quiet { --t: var(--pb-text); --_bd: var(--pb-border-active); --_t-tint: var(--pb-text-on-void); --_t-press: var(--pb-text-70); }
.pb-btn-ghost--green { --t: var(--pb-active); --_t-tint: var(--pb-green-on-void); --_t-press: var(--pb-green-70); }
.pb-btn2--inline { width: auto; display: inline-flex; }
.pb-btn2 .pb-icon, .pb-btn-ghost .pb-icon { font-size: 18px; }
@media (hover: hover) {
  .pb-btn2:hover { --_bg: var(--pb-red-hot); --_bd: var(--pb-red-hot); filter: drop-shadow(0 0 11px var(--pb-red-glow)); }
  .pb-btn-ghost:hover { --_bg: var(--_t-tint); }
}
.pb-btn2:active { --_bg: var(--pb-red-hot); --_bd: var(--pb-red-hot); filter: drop-shadow(0 0 3px var(--pb-red-glow)); }
.pb-btn-ghost:active { --_bg: var(--_t-tint); color: var(--_t-press); }
.pb-btn2:disabled, .pb-btn-ghost:disabled, .pb-btn2.is-disabled { opacity: 0.4; cursor: default; filter: none; }

/* ---- Action row: whole buttons wrap to a new line before a label is cut ---- */
.pb-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.pb-actions > * { flex: 1 1 140px; width: auto; min-width: fit-content; max-width: 100%; }
.pb-actions--end { justify-content: flex-end; }
.pb-actions--end > * { flex: 0 1 auto; }

/* ---- Tick chip and chip grid (pb_parts.js keeps .is-selected in step with the tick) ---- */
.pb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pb-chips--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.pb-chips--grid > .pb-chip2 { width: 100%; }
.pb-chip2 {
  --n: var(--pb-notch-chip); --_bd: var(--pb-border-active); --_bg: var(--pb-input);
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; min-height: 38px;
  cursor: pointer; user-select: none; color: var(--pb-text); font: 600 15px/1.3 var(--pb-font-body);
}
.pb-chip-label { min-width: 0; }
.pb-chip2 input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.pb-chip-box { width: 18px; height: 18px; flex: none; display: grid; place-items: center; border: 1.5px solid var(--pb-text-2); color: transparent; box-sizing: border-box; }
.pb-chip-box .pb-icon { font-size: 16px; font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 20; }
.pb-chip2.is-selected { --_bd: var(--pb-selected); --_bg: var(--pb-red-on-card); }
.pb-chip2.is-selected .pb-chip-box { background: var(--pb-selected); border-color: var(--pb-selected); color: var(--pb-on-accent); }
.pb-chip2:has(input:checked) { --_bd: var(--pb-selected); --_bg: var(--pb-red-on-card); }
.pb-chip2:has(input:checked) .pb-chip-box { background: var(--pb-selected); border-color: var(--pb-selected); color: var(--pb-on-accent); }
.pb-chip2.is-disabled { opacity: 0.4; cursor: default; }
.pb-chip2.is-focus { outline: 1px solid var(--pb-red); outline-offset: 2px; }
@media (hover: hover) { .pb-chip2:hover { --_bd: var(--pb-text-3); } .pb-chip2.is-selected:hover { --_bd: var(--pb-red-hot); } }

/* ---- Segment: one of a few ---- */
.pb-seg { display: flex; gap: 6px; }
.pb-seg > * {
  --n: var(--pb-notch-chip); --_bd: var(--pb-border-active); --_bg: var(--pb-input);
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 6px; border: 0; background: none; cursor: pointer; color: var(--pb-text); text-align: center;
  font: 700 10px/1.3 var(--pb-font-display); letter-spacing: 1.5px; text-transform: uppercase;
}
.pb-seg > * small { font: 400 8px/1.4 var(--pb-font-mono); letter-spacing: 0.5px; text-transform: none; }
.pb-seg > .is-selected, .pb-seg > [aria-pressed="true"] { --_bd: var(--pb-selected); --_bg: var(--pb-selected); color: var(--pb-on-accent); }

/* ---- Text input ---- */
.pb-input2 { --n: var(--pb-notch-small); --_bd: var(--pb-border); --_bg: var(--pb-input); display: flex; align-items: center; padding: 10px 12px; min-width: 0; }
.pb-input2 input { -webkit-appearance: none; appearance: none; border: 0; outline: 0; background: transparent; padding: 0; margin: 0; flex: 1; min-width: 0; font: 400 13px/1.4 var(--pb-font-mono); color: var(--pb-text); caret-color: var(--pb-red); }
.pb-input2 input::placeholder { color: var(--pb-text-3); }
.pb-input2:focus-within { --_bd: var(--pb-red); }

/* ---- Back control and its band ---- */
.pb-back2 {
  --n: var(--pb-notch-small); --_bd: var(--pb-border); --_bg: var(--pb-card-92);
  display: inline-flex; align-items: center; gap: 5px; padding: 8px 12px; cursor: pointer;
  border: 0; background: none; color: var(--pb-text); text-decoration: none; align-self: flex-start;
  font: 700 11px/1.3 var(--pb-font-display); letter-spacing: 2px; text-transform: uppercase;
}
.pb-back2 .pb-icon { font-size: 16px; font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 20; }
[dir="rtl"] .pb-back2 .pb-icon, [dir="rtl"] .pb-chevron { transform: scaleX(-1); }
.pb-back-band { padding: 4px 0 2px; padding-inline-start: 14px; }

/* ---- Tab bar and tab ---- */
.pb-tabbar2 { display: flex; justify-content: space-around; align-items: stretch; background: var(--pb-void); border-top: 1px solid var(--pb-border); padding: 6px 8px 8px; }
.pb-tab2 {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 4px 2px; color: var(--pb-text-2); text-decoration: none; cursor: pointer; border: 0; background: none;
  font: 500 11px/1.3 var(--pb-font-system); text-align: center;
}
.pb-tab2 .pb-icon { font-size: 26px; }
.pb-tab-label { max-width: 100%; }
.pb-tab2.is-selected, .pb-tab2[aria-current="page"] { color: var(--pb-selected); }
@media (hover: hover) { .pb-tab2:hover { color: var(--pb-text); } .pb-tab2.is-selected:hover { color: var(--pb-red-hot); } }

/* ---- Dialog and sheet: scrim, inline scrim, panel, head, title, close, body ---- */
.pb-scrim { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: var(--pb-scrim); display: grid; place-items: center; padding: var(--pb-gutter); }
.pb-scrim--inline { position: relative; top: auto; right: auto; bottom: auto; left: auto; min-height: 100%; }
.pb-sheet-panel { --n: var(--pb-notch-button); --_bd: var(--pb-border-active); --_bg: var(--pb-deep); width: 100%; max-width: 440px; display: flex; flex-direction: column; }
.pb-sheet-head { position: relative; display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; gap: 8px; padding: 18px; }
.pb-sheet-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--pb-border-active), transparent); }
.pb-sheet-title { grid-column: 2; margin: 0; text-align: center; font: 700 13px/1.3 var(--pb-font-display); letter-spacing: 4px; text-indent: 4px; text-transform: uppercase; color: var(--pb-text); min-width: 0; }
.pb-sheet-close { grid-column: 3; width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; background: var(--pb-card); color: var(--pb-text-2); display: grid; place-items: center; padding: 0; }
.pb-sheet-close .pb-icon { font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 20; }
.pb-sheet-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.pb-dialog-body { padding: 24px 18px 18px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.pb-dialog-title { margin: 0; font: 700 15px/1.3 var(--pb-font-display); letter-spacing: 3px; text-transform: uppercase; color: var(--pb-text); }
.pb-dialog-body .pb-actions { width: 100%; margin-top: 6px; }

/* ---- Tier card and compare grid ---- */
.pb-tier { --_bar: transparent; display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; border: 0; background: none; color: inherit; width: 100%; text-align: start; font: inherit; }
.pb-tier.is-selected, .pb-tier[aria-checked="true"] { --_bd: var(--pb-selected); --_bar: var(--pb-red); --_bar-glow: var(--pb-red-18); }
.pb-tier-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pb-tier-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 700 13px/1.3 var(--pb-font-display); letter-spacing: 2px; text-transform: uppercase; color: var(--pb-text); }
.pb-tier-price { font: 400 12px/1.4 var(--pb-font-mono); color: var(--pb-text-2); }
.pb-tier > .pb-icon { font-size: 24px; color: var(--pb-text-3); font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.pb-tier.is-selected > .pb-icon { color: var(--pb-red); font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.pb-compare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(48px, max-content) minmax(52px, max-content) minmax(68px, max-content); gap: 12px; align-items: center; }
.pb-compare-head { font: 800 10px/1.3 var(--pb-font-display); letter-spacing: 1.5px; text-transform: uppercase; text-align: center; }
.pb-compare-head--free { color: var(--pb-on-tier); }
.pb-compare-head--basic { color: var(--pb-tier-basic); }
.pb-compare-head--premium { color: var(--pb-tier-premium); }
.pb-compare-row { font: 400 13px/1.35 var(--pb-font-body); color: var(--pb-text); min-width: 0; }
.pb-compare-cell { text-align: center; color: var(--pb-text); }
.pb-compare-cell .pb-icon { font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 20; }
.pb-compare-cell--no { color: var(--pb-text-3); }
.pb-compare-rule { grid-column: 1 / -1; height: 1px; background: linear-gradient(90deg, transparent, var(--pb-compare-rule), transparent); }

/* ---- Empty state ---- */
.pb-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 24px 40px; }
.pb-empty .pb-icon-tile { --n: var(--pb-notch-button); --_bd: var(--pb-card); width: 70px; height: 70px; color: var(--pb-text-3); }
.pb-empty .pb-icon-tile .pb-icon { font-size: 30px; filter: none; }
.pb-empty-title { margin: 0; font: 700 13px/1.3 var(--pb-font-display); letter-spacing: 3px; text-transform: uppercase; color: var(--pb-text); }
.pb-empty-inline { padding: 24px 14px; text-align: center; font: 400 10px/1.4 var(--pb-font-mono); letter-spacing: 2px; text-transform: uppercase; color: var(--pb-text-3); }
.pb-empty-inline::before { content: '// '; }

/* ---- Progress line ---- */
.pb-progress { height: 2px; background: var(--pb-border); position: relative; }
.pb-progress > i { position: absolute; top: 0; bottom: 0; left: 0; background: var(--pb-red-60); }

/* ---- Key and value rows: a list (the popup's Status rows) and a grid of three (the desktop) ---- */
.pb-kv { display: flex; flex-direction: column; }
.pb-kv-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--pb-border); }
.pb-kv-row:last-child { border-bottom: 0; padding-bottom: 0; }
.pb-kv-row:first-child { padding-top: 0; }
.pb-kv-k { font: 400 10px/1.4 var(--pb-font-mono); letter-spacing: 2px; text-transform: uppercase; color: var(--pb-text-2); flex: 0 1 auto; min-width: 0; }
.pb-kv-v { font: 600 15px/1.3 var(--pb-font-body); color: var(--pb-text); text-align: right; min-width: 0; overflow-wrap: anywhere; }
[dir="rtl"] .pb-kv-v { text-align: start; }
.pb-kv-v--num { font: 700 16px/1.3 var(--pb-font-body); font-variant-numeric: tabular-nums; }
.pb-kv-v--on { color: var(--pb-active); }
.pb-kv-v--off { color: var(--pb-text-3); }
.pb-kv-v--yellow { color: var(--pb-yellow); }
.pb-kv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pb-kv-grid > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pb-kv-label { font: 400 9px/1.4 var(--pb-font-mono); letter-spacing: 2px; text-transform: uppercase; color: var(--pb-text-3); }
.pb-kv-value { font: 500 15px/1.3 var(--pb-font-body); color: var(--pb-text); overflow-wrap: anywhere; }
.pb-rule { height: 1px; background: linear-gradient(90deg, var(--pb-border-active), transparent); }

/* ---- A word longer than its line breaks inside rather than spill (buttons excepted: they grow); with the page lang set it breaks at a hyphen where the engine has a dictionary ---- */
.pb-title h1, .pb-title p, .pb-hero-title, .pb-hero-sub, .pb-section-title, .pb-row-title, .pb-row-sub,
.pb-homerow-title, .pb-homerow-copy, .pb-homerow-status, .pb-tile-label, .pb-tile-sub, .pb-stat-label,
.pb-tier-name, .pb-tier-price, .pb-compare-row, .pb-compare-head, .pb-sheet-title, .pb-dialog-title,
.pb-empty-title, .pb-empty-inline, .pb-kv-k, .pb-kv-label, .pb-copy, .pb-note, .pb-mono-label,
.pb-chip2, .pb-tab2, .pb-seg > * { overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }

/* ---- Focus rings (one rule per part: no :is in Chromium 87) ---- */
.pb-row2:focus-visible, .pb-toggle:focus-visible, .pb-homerow:focus-visible, .pb-tile:focus-visible,
.pb-tier:focus-visible, .pb-btn2:focus-visible, .pb-btn-ghost:focus-visible, .pb-back2:focus-visible,
.pb-seg > *:focus-visible, .pb-tab2:focus-visible, .pb-sheet-close:focus-visible { outline: 1px solid var(--pb-red); outline-offset: 2px; }

/* ---- Under the pointer ---- */
@media (hover: hover) {
  a.pb-row2:hover, button.pb-row2:hover, label.pb-row2:hover, .pb-toggle:hover, .pb-homerow:hover, .pb-tile:hover { --_bg: var(--pb-card-hover); }
}

/* ---- Grey scopes: .pb-greys-ios is the extension's (decision 18) and lives in pb_popup.css;
   the desktop's lifted greys are the :root default (pb_tokens.css). ---- */

@media (prefers-reduced-motion: reduce) {
  .pb-pill-dot { animation: none !important; }
  .pb-card2::before, .pb-card2::after, .pb-row2::before, .pb-row2::after, .pb-btn2, .pb-btn-ghost,
  .pb-btn2::before, .pb-btn2::after, .pb-btn-ghost::before, .pb-btn-ghost::after,
  .pb-switch2, .pb-switch2::before, .pb-toggle::after, .pb-tile::after, .pb-homerow::after,
  .pb-chip2::before, .pb-chip2::after { transition: none !important; }
}