/* Player profile, v2 (visitor view). Served at /p/{name} while the v2 preview
   switch is on. Everything here uses the colour, type and radius names from
   base.css: no new colours. Sizes in rem, logical properties so right-to-left
   works. Taken from the approved mockup; the owner's parts, Follow and the
   numbers line come back with their own pieces. */

.pf-stage {
  padding-block-start: 56px;   /* the gap below the nav: 56px on desktop; on a phone it equals the side margin, below */
  --pf-avatar: clamp(4.5rem, 10vw, 8rem);
  --pf-pad: clamp(2rem, 3.5vw, 2.75rem);   /* picture's distance from the banner's side */
  --pf-name: clamp(2.25rem, 5.2vw, 3.5rem);
}
.pf-stage [hidden] { display: none !important; }

/* ───── Banner: osu's shape (2000 x 500, so 4 to 1), held at every width ───── */
/* A faint outline that follows the banner's shape, notch included, so a dark banner
   still has an edge on a dark page. */
.pf-banner-wrap {
  position: relative;
  --pf-edge: color-mix(in oklch, var(--ink-300), transparent 30%);
  filter: drop-shadow(0 0 0.6px var(--pf-edge)) drop-shadow(0 0 0.6px var(--pf-edge));   /* even all round, curves included */
}
.pf-banner {
  aspect-ratio: 4 / 1;
  border-radius: var(--rad-lg);
  background-color: var(--ink-100);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
/* The default banner, the same for everyone in this first version. */
.pf-stage[data-banner="none"] .pf-banner {
  background-image: linear-gradient(120deg,
    color-mix(in oklch, var(--red-700), var(--ink-50) 55%), var(--ink-50) 70%);
}
/* in a season, its two tones (the plain one goes muddy brown on light) */
:root[data-season] .pf-stage[data-banner="none"] .pf-banner {
  background-image: linear-gradient(120deg,
    color-mix(in oklch, var(--accent-500), var(--ink-50) 35%),
    color-mix(in oklch, var(--accent-400), var(--ink-50) 55%));
}

/* ───── Who: picture half over the banner, name under it ───── */
.pf-id {
  position: relative; z-index: 1;      /* above the banner, so the picture takes its own clicks */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1.25rem;
  align-items: start;
  padding-inline: var(--pf-pad) 0;
}
.pf-avatar-wrap { position: relative; margin-block-start: calc(var(--pf-avatar) * -0.5); }
.pf-avatar {
  display: block;
  inline-size: var(--pf-avatar);
  block-size: var(--pf-avatar);
  border-radius: 999px;
  background: var(--ink-100);
  object-fit: cover;
}
.pf-who { padding-block-start: 0.875rem; min-inline-size: 0; }
.pf-name-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.875rem; }
.pf-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--pf-name);
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
/* The name and the picture are the way to the player's osu! page. */
.pf-name a { color: inherit; text-decoration: none; transition: color 140ms ease; }
.pf-name a:hover { color: var(--red-400); }
.pf-name a:focus-visible { outline: 2px solid var(--red-400); outline-offset: 4px; border-radius: var(--rad-sm); }
.pf-avatar-link { display: block; border-radius: 999px; }
.pf-avatar-fallback {          /* no picture: the first letter, as the site does elsewhere */
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 900;
  font-size: calc(var(--pf-avatar) * 0.42);
  color: var(--ink-700);
  border: 2px solid var(--ink-300);
}
.pf-avatar-link:hover .pf-avatar { filter: brightness(1.08); }

/* ───── Tabs: the site's underline tab, in the public accent ───── */
.pf-tabs {
  display: flex; gap: 0.25rem;
  margin-block-start: 1.75rem;
  /* the strip's line is a shadow the tabs' own underline paints over, so no tab
     hangs out of the strip: a 1px overhang made the strip scroll, with a scrollbar */
  box-shadow: inset 0 -1px 0 var(--ink-300);
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;             /* still scrolls sideways on a narrow phone */
}
.pf-tabs::-webkit-scrollbar { display: none; }
.pf-tab {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: none; border: 0; cursor: pointer; white-space: nowrap;
  border-block-end: 2px solid transparent;
  font-family: var(--font-mono);
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-500);
}
.pf-tab:hover { color: var(--ink-800); }
.pf-tab.is-active { color: var(--ink-900); border-block-end-color: var(--red-500); }
.pf-tab:focus-visible { outline: 2px solid var(--red-400); outline-offset: -2px; border-radius: var(--rad-sm); }
.pf-dev {
  font-size: 0.625rem; font-weight: 400; letter-spacing: 0.08em;
  padding: 1px 6px;
  border: 1px dashed var(--ink-500);
  border-radius: 4px;
  color: var(--ink-500);
}

/* ───── Home tab: one featured video, then the newest ───── */
.pf-featured { margin-block-start: 1.5rem; }
.pf-section { margin-block-start: 2.5rem; }
.pf-section-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem;
  margin-block-end: 0.875rem;
  min-block-size: 2.5rem;
}
.pf-section-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.875rem;
  line-height: 1;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
.pf-section-more {
  font-family: var(--font-mono);
  font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-500);
  text-decoration: none;
}
.pf-section-more:hover { color: var(--red-400); }
.pf-section .mode-row { margin-block-end: 0; }

/* The wide card: a first take. Same parts as the regular card, in the same corners and the
   same order, with the picture beside the text and a little more said. */
.pf-stage .card.card-wide {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  border-radius: var(--rad-lg);
  animation: none;
}
.pf-stage .card.card-wide .thumb { aspect-ratio: 16 / 9; }
.pf-stage .card.card-wide .body {
  display: flex; flex-direction: column; justify-content: center;
  gap: 0.625rem;
  padding: clamp(1.25rem, 2.6vw, 2.25rem);
}
.pf-stage .card.card-wide .song { font-size: clamp(1.25rem, 2.1vw, 1.75rem); line-height: 1.2; }
.pf-stage .card.card-wide .stats { font-size: 1rem; }
.pf-kicker {
  font-family: var(--font-mono);
  font-size: 0.6875rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--red-400);
}
.pf-more { font-family: var(--font-mono); color: var(--ink-500); }
@media (max-width: 760px) {
  .pf-stage .card.card-wide { grid-template-columns: minmax(0, 1fr); }
}

/* ───── Renders tab ───── */
.pf-stage .gallery-controls { padding-block-start: 1.25rem; }
.pf-empty {
  margin-block-start: 1.5rem;
  padding: 4rem 1rem;
  border: 1px dashed var(--ink-300);
  border-radius: var(--rad-lg);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--ink-500);
}
.pf-empty strong { display: block; margin-block-end: 0.5rem; color: var(--ink-800); font-weight: 600; }

/* On a phone the gap below the nav equals the page's side margin. These are the site's own
   two phone steps (base.css: 18px up to 600 wide, 12px up to 380 wide). */
@media (max-width: 600px) { .pf-stage { padding-block-start: 18px; } }
@media (max-width: 380px) { .pf-stage { padding-block-start: 12px; } }

@media (max-width: 640px) {
  .pf-id { column-gap: 0.875rem; }
  .pf-tab { padding-inline: 0.75rem; }
}

/* ───── The banner's notch ─────
   Generated for the mockup from GAP = 0.06 and FILLET = 0.06 (units of the picture's width).
   The notch is ONE outline (CSS clip-path: shape()): along the banner's bottom edge, up
   through a small arc, over the picture on the notch's circle, and back down through a
   second small arc. Being a single drawn outline, it has no seams to show. */
.pf-banner {
  --pf-cx: calc(var(--pf-pad) + var(--pf-avatar) / 2);      /* the picture's centre, from the banner's side */
  --pf-hole: calc(var(--pf-avatar) * 0.56000);           /* the notch's radius: half the picture plus the gap */
  --pf-round: calc(var(--pf-avatar) * 0.06000);          /* the rounding where the edge turns into the notch */
  --pf-edge-x: calc(var(--pf-avatar) * 0.61709);         /* from the centre to where the rounding leaves the edge */
  --pf-meet-x: calc(var(--pf-avatar) * 0.55737);         /* from the centre to where the rounding meets the circle */
  --pf-meet-y: calc(100% - var(--pf-avatar) * 0.05419);  /* and how high that is */
}
@supports (clip-path: shape(from 0 0, hline to 1px, close)) {
  .pf-banner {
    clip-path: shape(from 0 0, hline to 100%, vline to 100%,
      hline to calc(var(--pf-cx) + var(--pf-edge-x)),
      arc to calc(var(--pf-cx) + var(--pf-meet-x)) var(--pf-meet-y) of var(--pf-round) cw,
      arc to calc(var(--pf-cx) - var(--pf-meet-x)) var(--pf-meet-y) of var(--pf-hole) ccw,
      arc to calc(var(--pf-cx) - var(--pf-edge-x)) 100% of var(--pf-round) cw,
      hline to 0, close);
  }
}
@supports not (clip-path: shape(from 0 0, hline to 1px, close)) {
  /* older browsers: no notch, the picture gets a ring in the page colour */
  .pf-avatar { box-shadow: 0 0 0 calc(var(--pf-avatar) * 0.06000) var(--ink-0); }
}

/* ───── The owner's parts ─────
   What the owner sees and visitors never do sits on one surface, the tray, so it
   is plain which things are theirs alone. Look taken from the mockup. */
.pf-only-you {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-500);
  white-space: nowrap;
}
.pf-owner-row { display: flex; margin-block-start: 1.25rem; }
.pf-tray {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem;
  margin-inline-start: auto;
  padding-block: 0.375rem;
  padding-inline: 0.375rem 0.875rem;
  border: 1px solid color-mix(in oklch, var(--ink-300), transparent 40%);
  border-radius: var(--rad-lg);
  background: color-mix(in oklch, var(--ink-100), transparent 50%);
}
.pf-tray .pf-only-you { margin-inline-start: 0.375rem; }
/* the same chip the gallery controls use; the site scopes that look to its own bar, so it is repeated here */
.pf-tray .chip {
  appearance: none; -webkit-appearance: none;
  font-family: var(--font-mono);
  font-size: 0.6875rem; line-height: 1.2;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-500);
  background: var(--ink-100);
  border: 1px solid var(--ink-300);
  border-radius: 999px;
  padding: 0.375rem 0.75rem;
  cursor: pointer;
}
.pf-tray .chip:hover { color: var(--ink-800); border-color: var(--red-500); }
.pf-tray .chip[aria-pressed="true"] { background: var(--red-500); border-color: var(--red-500); color: var(--ink-0); }
.pf-tray .chip:focus-visible { outline: 2px solid var(--red-400); outline-offset: 2px; }
.pf-stage .chip-n { margin-inline-start: 0.25rem; opacity: 0.75; }

/* Activity: the owner's recent likes and comments, folded until asked for. The rows
   are /me's (base.css), so they look as they do there. */
.pf-activity {
  margin-block-start: 1.25rem;
  border: 1px solid color-mix(in oklch, var(--ink-300), transparent 40%);
  border-radius: var(--rad-md);
  background: color-mix(in oklch, var(--ink-100), transparent 50%);
}
.pf-activity > summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--ink-700);
}
.pf-activity > summary::-webkit-details-marker { display: none; }
.pf-activity > summary::after {
  content: "show";
  margin-inline-start: auto;
  font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-500);
}
.pf-activity[open] > summary::after { content: "hide"; }
.pf-activity > summary:focus-visible { outline: 2px solid var(--red-400); outline-offset: 2px; border-radius: var(--rad-md); }
.pf-activity .me-activity { margin: 0; padding-block: 0 0.5rem; padding-inline: 1rem; }

/* The visibility tag on a card (the same pill My renders draws) */
.pf-stage .card .thumb .vis-pill {
  position: absolute; inset-inline-end: 0.5rem; inset-block-end: 0.5rem; z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase;
  background: color-mix(in oklch, var(--ink-0), transparent 15%);
  color: var(--ink-700);
  border: 1px solid var(--ink-300);
  border-radius: 0.25rem;
  padding: 0.125rem 0.4375rem;
}

/* Deleted videos, and the button that brings one back */
.pf-deleted-note {
  margin-block: 1.25rem 0.875rem;
  font-family: var(--font-mono);
  font-size: 0.75rem; line-height: 1.4;
  color: var(--ink-500);
}
.pf-stage .card[data-vis="deleted"] { opacity: 0.72; }
.pf-stage .card[data-vis="deleted"]:hover { opacity: 1; }
.pf-restore { display: flex; align-items: center; gap: 0.5rem; margin-block-start: 0.5rem; }
.restore-msg { font-size: 0.75rem; color: var(--ink-500); }
.restore-msg.is-error { color: var(--red-400); }
@media (max-width: 760px) {
  .pf-tray { margin-inline-start: 0; }
}

/* ───── An address that asks for the Renders tab ─────
   profile.html.j2 marks the page (data-pf-start) before it is drawn, so the Renders tab
   is the open one from the first paint. profile.js takes the mark off once it has taken
   over the tabs. */
html[data-pf-start="renders"] .pf-stage #pf-panel-home { display: none; }
html[data-pf-start="renders"] .pf-stage #pf-panel-renders { display: block !important; }
html[data-pf-start="renders"] .pf-stage .pf-tab[data-tab="home"] { color: var(--ink-500); border-block-end-color: transparent; }
html[data-pf-start="renders"] .pf-stage .pf-tab[data-tab="renders"] { color: var(--ink-900); border-block-end-color: var(--red-500); }

/* ───── The banner's picture ─────
   The picture sits inside .pf-banner, so the notch's outline cuts it too. */
.pf-banner { overflow: hidden; }
.pf-banner-img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }

/* ───── Customizing (from the mockup): the owner presses Customize, then the banner ─────
   The button sits on the name's line, its far edge on the banner's edge. */
.pf-stage[data-viewer="owner"] .pf-id { grid-template-columns: auto minmax(0, 1fr) auto; padding-inline-end: 0; }
.pf-actions {
  display: flex; align-items: center;
  margin-block-start: 0.875rem;
  block-size: calc(var(--pf-name) * 0.95);
}
.pf-swap-off, .pf-swap-on { grid-area: 1 / 1; white-space: nowrap; }
.pf-edit-toggle { display: inline-grid; justify-items: center; }
.pf-edit-toggle[aria-pressed="false"] .pf-swap-on,
.pf-edit-toggle[aria-pressed="true"] .pf-swap-off { visibility: hidden; }
.pf-edit-toggle[aria-pressed="true"] { background: var(--red-500); border-color: var(--red-500); color: var(--ink-0); }
.pf-stage:not([data-edit="on"]) .pf-edit-banner { display: none; }
.pf-edit-banner {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: flex-start; justify-content: flex-end;
  padding: 0.75rem;
  background: transparent; border: 0; cursor: pointer;
  border-radius: var(--rad-lg);
  transition: background 140ms ease;
}
.pf-edit-banner:hover { background: color-mix(in oklch, var(--ink-0), transparent 78%); }
.pf-edit-chip {
  font-family: var(--font-mono);
  font-size: 0.6875rem; line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--ink-300);
  border-radius: 999px;
  background: color-mix(in oklch, var(--ink-0), transparent 18%);
  color: var(--ink-800);
}
.pf-edit-banner:hover .pf-edit-chip { border-color: var(--red-500); color: var(--ink-900); }
.pf-edit-banner:focus-visible { outline: 2px solid var(--red-400); outline-offset: 2px; }
.pf-menu {
  position: absolute; z-index: 5;
  min-inline-size: 15.5rem;
  padding: 0.375rem;
  border: 1px solid var(--ink-300);
  border-radius: var(--rad-md);
  background: var(--ink-50);
  box-shadow: 0 1.125rem 2.5rem -0.75rem color-mix(in oklch, black 60%, transparent);
}
.pf-menu-banner { inset-block-start: 3.25rem; inset-inline-end: 0.75rem; }
/* The banner's filter creates a stacking context below .pf-id. Lift that
   context while its menu is open, so the name and Done cannot cover it. */
.pf-banner-wrap:has(.pf-menu-banner:not([hidden])) { z-index: 2; }
.pf-menu-title {
  padding: 0.375rem 0.625rem 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-500);
}
.pf-menu button {
  display: flex; align-items: center; gap: 0.5rem;
  inline-size: 100%;
  padding: 0.5rem 0.625rem;
  background: none; border: 0; border-radius: var(--rad-sm);
  font-family: var(--font-body); font-size: 0.875rem; text-align: start;
  color: var(--ink-800);
  cursor: pointer;
}
.pf-menu button:hover:not(:disabled) { background: var(--ink-200); }
.pf-menu button[aria-checked="true"]::after { content: "✓"; margin-inline-start: auto; color: var(--red-400); }
.pf-menu button:disabled { color: var(--ink-500); cursor: default; }
.pf-menu-note {
  margin-inline-start: auto;
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.pf-banner-msg { padding: 0.375rem 0.625rem; font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-700); }
.pf-banner-msg:empty { display: none; }
@media (max-width: 640px) {
  .pf-stage[data-viewer="owner"] .pf-id { grid-template-columns: auto minmax(0, 1fr); }
  .pf-actions { grid-column: 1 / -1; block-size: auto; margin-inline-start: calc(var(--pf-pad) * -1); }
  .pf-actions .btn { inline-size: 100%; justify-content: center; }
}

/* ───── The rest of Customize (from the mockup) ─────
   Everything below shows only while the owner has Customize on. */
.pf-stage:not([data-edit="on"]) .pf-when-editing,
.pf-stage:not([data-edit="on"]) .pf-edit-avatar { display: none; }
.pf-edit-avatar {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  border: 0; border-radius: 999px; cursor: pointer;
  background: color-mix(in oklch, var(--ink-0), transparent 42%);
  color: var(--ink-900);
  font-family: var(--font-mono);
  font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  transition: background 140ms ease;
}
.pf-edit-avatar:hover { background: color-mix(in oklch, var(--ink-0), transparent 25%); }
.pf-edit-avatar:focus-visible { outline: 2px solid var(--red-400); outline-offset: 2px; }
.pf-menu-pic { inset-block-start: 55%; inset-inline-start: calc(100% + 0.75rem); }
.pf-featured > .pf-section-head { margin-block-end: 0.75rem; }
.pf-view { display: inline-flex; gap: 0.25rem; margin-inline-end: 0.375rem; }
.pf-tray .chip.active { background: var(--red-500); border-color: var(--red-500); color: var(--ink-0); }
.pf-tray .chip:disabled { opacity: 0.4; cursor: default; }
.pf-tray .chip:disabled:hover { color: var(--ink-500); border-color: var(--ink-300); }
.pf-move-up::before { content: "\2191"; }
.pf-move-down::before { content: "\2193"; }
.pf-add { display: flex; margin-block-start: 2rem; }
.pf-add .pf-tray { margin-inline-start: 0; }
.pf-tray-note { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--ink-500); }
.pf-empty-slim { margin-block-start: 0; padding-block: 2rem; }

/* The picker: one of the owner's public videos */
.pf-picker {
  inline-size: min(56rem, calc(100vw - 2rem));
  max-block-size: min(40rem, calc(100vh - 4rem));
  padding: 1rem;
  border: 1px solid var(--ink-300);
  border-radius: var(--rad-lg);
  background: var(--ink-50);
  color: var(--ink-900);
}
.pf-picker::backdrop { background: color-mix(in oklch, black 55%, transparent); }
.pf-picker-head { display: flex; align-items: center; gap: 1rem; margin-block-end: 0.875rem; }
.pf-picker-title {
  margin: 0; margin-inline-end: auto;
  font-family: var(--font-display); font-weight: 900; font-size: 1.5rem; text-transform: uppercase;
}
.pf-picker .chip {
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-700); background: var(--ink-100);
  border: 1px solid var(--ink-300); border-radius: 999px;
  padding: 0.375rem 0.75rem; cursor: pointer;
}
.pf-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.75rem; }
.pf-pick {
  display: grid; gap: 0.25rem; padding: 0.375rem; text-align: start;
  background: var(--ink-100); border: 1px solid var(--ink-300); border-radius: var(--rad-md);
  color: var(--ink-800); cursor: pointer;
}
.pf-pick:hover, .pf-pick:focus-visible { border-color: var(--red-500); outline: none; }
.pf-pick[hidden] { display: none; }
.pf-pick img { inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--rad-sm); }
.pf-pick-song { font-size: 0.8125rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-pick-diff { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--ink-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
  .pf-menu-pic { inset-inline-start: 0; inset-block-start: calc(100% + 0.5rem); }
}

/* The picker's search and sort */
.pf-picker-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-block-end: 0.875rem; }
.pf-picker-tools input, .pf-picker-tools select {
  font: inherit; font-size: 0.875rem; color: var(--ink-900); background: var(--ink-100);
  border: 1px solid var(--ink-300); border-radius: var(--rad-sm); padding: 0.4375rem 0.625rem;
}
.pf-picker-tools input { flex: 1 1 14rem; min-inline-size: 0; }
.pf-picker-tools input:focus-visible, .pf-picker-tools select:focus-visible { outline: 2px solid var(--red-400); outline-offset: 2px; }
.pf-picker-count { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-500); }
.pf-picker-tools { position: sticky; inset-block-start: -1rem; z-index: 1; padding-block: 0.5rem; background: var(--ink-50); }