/* Design tokens of Аромаполка (docs/design-system.md). Three levels: primitives (raw OKLCH), the semantic
   --ap-* tokens that every component uses, and surfaces: data-surface="wine" redefines the semantic tokens,
   so one component reads right on the wine stage and on paper. Raw colours and colour mixes exist only in this
   file; modules take every size, weight, leading, tracking, radius, duration, offset and layer from here.
   Breakpoints cannot be custom properties: modules use only 380, 420, 480, 640, 740, 900, 960 (dossier container), 1023/1024, 1100 and 1279/1280 px. */
@layer tokens, base, layout, components, sections, pages, utilities;

@font-face {
  font-family: Onest;
  src: url('/assets/fonts/Onest-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Onest;
  src: url('/assets/fonts/Onest-SemiBold.woff2') format('woff2');
  font-weight: 500 800;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: Literata;
  src: url('/assets/fonts/Literata.woff2') format('woff2');
  font-weight: 400 600;
  font-display: swap;
}

@layer tokens {
  :root {
    /* Primitives: wine (hue 8), rose-tinted neutrals (hue 10), text on wine, states */
    --wine-950: oklch(0.26 0.06 8);
    --wine-900: oklch(0.30 0.075 8);
    --wine-800: oklch(0.33 0.085 8);
    --wine-700: oklch(0.37 0.095 8);
    --wine-600: oklch(0.42 0.11 8);
    --wine-500: oklch(0.47 0.12 8);
    --wine-300: oklch(0.78 0.08 8);
    --wine-200: oklch(0.88 0.045 8);
    --wine-100: oklch(0.93 0.03 8);
    --neutral-0: oklch(0.995 0.003 10);
    --neutral-50: oklch(0.955 0.008 10);
    --neutral-100: oklch(0.93 0.01 10);
    --neutral-200: oklch(0.905 0.01 10);
    --neutral-300: oklch(0.85 0.012 10);
    --neutral-400: oklch(0.62 0.015 10);
    --neutral-500: oklch(0.5 0.02 10);
    --neutral-700: oklch(0.38 0.025 10);
    --neutral-900: oklch(0.22 0.025 10);
    --white: oklch(1 0 0);
    --on-wine: oklch(0.97 0.012 10);
    --on-wine-muted: oklch(0.84 0.035 10);
    --on-wine-faint: oklch(0.72 0.045 10);
    --sage-600: oklch(0.46 0.07 145);
    --sage-500: oklch(0.6 0.07 145);
    --sage-300: oklch(0.8 0.07 145);
    --sage-100: oklch(0.94 0.025 140);
    --brick-500: oklch(0.56 0.17 30);
    --brick-300: oklch(0.85 0.06 30);
    --brick-200: oklch(0.82 0.1 30);
    --brick-100: oklch(0.96 0.02 30);
    --shade: oklch(0.2 0.08 8);
    --gold-300: oklch(0.82 0.09 78);
    --gold-700: oklch(0.48 0.085 70);
    --ivory: oklch(0.965 0.014 75);

    /* Fixed colours that do not follow the surface: dialog backdrop, photographic covers, masks */
    --ap-backdrop: color-mix(in oklch, var(--shade) 45%, transparent);
    --ap-cover-base: var(--wine-950);
    /* The cover photo fades into the wine from the copy side (stage cover, editorial hero, trend chapters) */
    --ap-cover-fade: linear-gradient(90deg, color-mix(in oklch, var(--ap-cover-base) 85%, transparent),
      color-mix(in oklch, var(--ap-cover-base) 25%, transparent) 75%);
    --ap-cover-fade-strong: linear-gradient(90deg, color-mix(in oklch, var(--ap-cover-base) 85%, transparent),
      color-mix(in oklch, var(--ap-cover-base) 35%, transparent));
    --ap-cover-fade-editorial: linear-gradient(90deg, var(--ap-cover-base),
      color-mix(in oklch, var(--ap-cover-base) 70%, transparent) 30%, color-mix(in oklch, var(--ap-cover-base) 15%, transparent) 72%);
    --ap-cover-fade-bottom: linear-gradient(180deg, transparent 40%, color-mix(in oklch, var(--ap-cover-base) 50%, transparent));

    --ap-landing-scrim: linear-gradient(90deg, color-mix(in oklch, var(--ap-cover-base) 65%, transparent), transparent 72%),
      linear-gradient(180deg, color-mix(in oklch, var(--ap-cover-base) 45%, transparent), transparent 28%);
    --ap-landing-scrim-mobile: linear-gradient(180deg, color-mix(in oklch, var(--ap-cover-base) 65%, transparent),
      color-mix(in oklch, var(--ap-cover-base) 25%, transparent) 55%, transparent 75%);

    /* Editorial taste-report accents (Trend), on the existing wine and ivory surfaces */
    --ap-trend-gold: var(--gold-300);
    --ap-trend-metal: var(--gold-700);
    --ap-trend-ivory: var(--ivory);
    --ap-trend-gold-wash: color-mix(in oklch, var(--gold-300) 12%, transparent);
    --ap-trend-gold-line: color-mix(in oklch, var(--gold-300) 20%, transparent);
    --ap-trend-gold-fill: color-mix(in oklch, var(--gold-300) 22%, transparent);
    --ap-trend-gold-edge: color-mix(in oklch, var(--gold-300) 30%, transparent);
    --ap-trend-halo: 0 0 0 60px color-mix(in oklch, var(--gold-300) 3%, transparent),
      0 0 0 120px color-mix(in oklch, var(--gold-300) 2%, transparent);
    --ap-trend-glow: drop-shadow(0 0 5px var(--ap-trend-gold-line));

    /* Type: families, one ordered size scale, fluid display sizes by role, weights, leading, tracking */
    --ap-display: Literata, Georgia, serif;
    --ap-body: Onest, system-ui, sans-serif;
    --ap-mono: 'JetBrains Mono', ui-monospace, monospace;
    --ap-text-chart: 10px;
    --ap-text-xs: 12px;
    --ap-text-sm: 13px;
    --ap-text-md: 14px;
    --ap-text-base: 15px;
    --ap-text-lg: 16px;
    --ap-text-xl: 17px;
    --ap-text-2xl: 18px;
    --ap-text-3xl: 20px;
    --ap-text-4xl: 22px;
    --ap-text-5xl: 24px;
    --ap-text-6xl: 28px;
    --ap-text-7xl: 32px;
    --ap-text-relative-sm: 0.9em;
    --ap-text-relative-half: 0.5em;
    --ap-input-text: 16px;
    --ap-text-section: clamp(22px, 2.3vw, 32px);
    --ap-text-feature-sm: clamp(26px, 2.6vw, 34px);
    --ap-text-stage: clamp(30px, 3.4vw, 40px);
    --ap-text-feature: clamp(32px, 3.6vw, 48px);
    --ap-text-perfume: clamp(38px, 4.4vw, 64px);
    --ap-text-hero: clamp(44px, 6vw, 80px);
    --ap-text-score: clamp(64px, 6.4vw, 96px);
    --ap-text-trend-hero: clamp(64px, 8.2vw, 118px);
    --ap-weight-regular: 400;
    --ap-weight-medium: 500;
    --ap-weight-semibold: 600;
    --ap-leading-display: 0.95;
    --ap-leading-none: 1;
    --ap-leading-tight: 1.1;
    --ap-leading-heading: 1.2;
    --ap-leading-snug: 1.3;
    --ap-leading-normal: 1.5;
    --ap-leading-relaxed: 1.65;
    --ap-leading-loose: 1.8;
    --ap-tracking-tightest: -0.065em;
    --ap-tracking-tighter: -0.045em;
    --ap-tracking-tight: -0.025em;
    --ap-tracking-snug: -0.01em;
    --ap-tracking-wide: 0.06em;
    --ap-tracking-caps: 0.14em;
    --ap-underline-offset: 3px;
    --ap-underline-offset-lg: 4px;

    /* Space: 4pt scale; the -a-b steps sit between two neighbours */
    --space-2xs: 2px;
    --space-xs: 4px;
    --space-xs-sm: 6px;
    --space-sm: 8px;
    --space-sm-md: 10px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-lg-xl: 20px;
    --space-xl: 24px;
    --space-2xl: 32px;
    --space-2xl-3xl: 40px;
    --space-3xl: 48px;
    --space-4xl: 64px;
    --space-5xl: 96px;

    /* Shape: controls 10, plates and cards 14, panels 18, chips pill */
    --ap-radius-2xs: 4px;
    --ap-radius-xs: 6px;
    --ap-radius-sm: 8px;
    --ap-radius-md: 10px;
    --ap-radius-lg: 14px;
    --ap-radius-xl: 18px;
    --ap-round: 50%;
    --ap-pill: 999px;

    /* Strokes, focus ring, translucency */
    --ap-stroke: 1.5px;
    --ap-stroke-bold: 2px;
    --ap-stroke-heavy: 3px;
    --ap-focus-width: 2px;
    --ap-focus-offset: 2px;
    --ap-focus-offset-lg: 4px;
    --ap-opacity-ghost: 0.35;
    --ap-opacity-disabled: 0.5;
    --ap-opacity-soft: 0.7;
    --ap-opacity-dim: 0.82;

    /* Controls: heights of interactive elements; --ap-control grows to --ap-touch on touch screens */
    --ap-control-2xs: 24px;
    --ap-control-xs: 28px;
    --ap-control-sm: 34px;
    --ap-control-md: 36px;
    --ap-control: 42px;
    --ap-touch: 44px;
    --ap-control-lg: 48px;
    --ap-control-xl: 56px;
    --ap-search-action-room: 170px;
    --ap-chat-input-max: 140px;

    /* Icons and marks: SVG icons, illustrations, bottle thumbnails, small dots and the thickness of progress bars */
    --ap-icon-xs: 12px;
    --ap-icon-sm: 14px;
    --ap-icon-md: 16px;
    --ap-icon: 18px;
    --ap-icon-lg: 20px;
    --ap-icon-xl: 22px;
    --ap-icon-2xl: 24px;
    --ap-art-sm: 32px;
    --ap-art: 40px;
    --ap-art-lg: 48px;
    --ap-thumb-xs: 28px;
    --ap-thumb-sm: 40px;
    --ap-thumb-md: 52px;
    --ap-thumb-lg: 72px;
    --ap-thumb-xl: 120px;
    --ap-dot: 7px;
    --ap-dot-lg: 8px;
    --ap-bar-thin: 4px;
    --ap-bar: 6px;

    /* Readable measures of text blocks and centred columns */
    --ap-measure-xs: 280px;
    --ap-measure-sm: 480px;
    --ap-measure: 640px;
    --ap-measure-md: 720px;
    --ap-measure-lg: 820px;
    --ap-measure-xl: 960px;

    /* Depth */
    --ap-shadow-sm: 0 1px 2px color-mix(in oklch, var(--shade) 10%, transparent);
    --ap-shadow-knob: 0 1px 4px color-mix(in oklch, var(--shade) 20%, transparent);
    --ap-shadow-lg: 0 24px 64px -24px color-mix(in oklch, var(--shade) 55%, transparent);
    --ap-shadow-plate: 0 10px 22px -16px color-mix(in oklch, var(--shade) 60%, transparent);
    /* Motion: easing, durations and the distances things travel */
    --ap-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ap-ease-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ap-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ap-ease: var(--ap-ease-out);
    --ap-dur-none: 0s;
    --ap-dur-reduced: 0.01ms;
    --ap-dur-press: 120ms;
    --ap-dur-stagger: 150ms;
    --ap-dur-hover: 200ms;
    --ap-dur-state: 350ms;
    --ap-dur-enter: 600ms;
    --ap-dur-spin: 900ms;
    --ap-dur-pulse: 1.5s;
    --ap-dur-wave: 26s;
    --ap-nudge: 2px;
    --ap-lift: 4px;
    --ap-lift-lg: 6px;
    --ap-rise: 12px;
    --ap-rise-lg: 20px;
    --ap-press-scale: 0.97;
    --ap-pop-scale: 1.15;
    --ap-hover-scale: 1.025;

    /* Layout */
    --ap-content: 1200px;
    --ap-content-wide: 1280px;
    --ap-gutter: 40px;
    --ap-header: 64px;
    --ap-logo-h: 34px;
    --ap-subnav-offset: 72px;
    /* Floating elements in the lower corner: their inset and the height a visible compare tray takes */
    --ap-float-inset: var(--space-xl);
    --ap-float-stack: 64px;
    /* Liquid edge between wine and paper (stages, the guest hero, the perfume band): the wave shape, its height,
       the room a block keeps for it and the paper colour of the page, which wine surfaces do not redefine. */
    --ap-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 56' preserveAspectRatio='none'%3E%3Cpath d='M0 28C180 6 360 6 540 24S900 52 1080 30S1260 50 1440 28V56H0Z'/%3E%3C/svg%3E");
    --ap-wave-h: clamp(28px, 4.2vw, 60px);
    --ap-page: var(--white);
    /* Marks inside filter check boxes */
    --ap-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2.5 6.2 2.3 2.3 4.7-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --ap-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3 3 6 6M9 3 3 9' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");

    /* Layers: local stacking inside a block, then the page-wide order */
    --z-back: -2;
    --z-below: -1;
    --z-raised: 1;
    --z-above: 2;
    --z-sticky: 20;
    --z-header: 30;
    --z-chat-launcher: 35;
    --z-tray: 40;
    --z-popover: 45;
    --z-chat: 50;
    --z-toast: 60;
    --z-skip: 100;
  }

  /* Paper: white, the working surface and the default for the whole document (10 October 2026: photos with white
     backgrounds melt into it); raised blocks without a line take --ap-sunk, plates have no edge. */
  :root,
  [data-surface='paper'] {
    --ap-paper: var(--white);
    --ap-surface: var(--neutral-0);
    --ap-sunk: var(--neutral-50);
    --ap-well: var(--neutral-100);
    --ap-line: var(--neutral-200);
    --ap-line-strong: var(--neutral-300);
    --ap-field-line: var(--neutral-400);
    --ap-ink: var(--neutral-900);
    --ap-ink-soft: var(--neutral-700);
    --ap-muted: var(--neutral-500);
    --ap-faint: var(--neutral-500);
    --ap-accent: var(--wine-900);
    --ap-accent-hover: var(--wine-600);
    --ap-accent-soft: var(--wine-100);
    --ap-accent-line: var(--wine-200);
    --ap-accent-ink: var(--on-wine);
    --ap-sage: var(--sage-600);
    --ap-sage-soft: var(--sage-100);
    --ap-danger: var(--brick-500);
    --ap-danger-soft: var(--brick-100);
    --ap-danger-line: var(--brick-300);
    --ap-plate: var(--white);
    --ap-plate-shadow: color-mix(in oklch, var(--shade) 28%, transparent);
    --ap-stage-glow: color-mix(in oklch, var(--wine-700) 30%, transparent);
    --ap-stage-deep: var(--wine-900);
    --ap-focus: 0 0 0 3px color-mix(in oklch, var(--wine-700) 60%, transparent);
    --ap-ledge-top: var(--neutral-200);
    --ap-ledge-front: var(--neutral-100);
    --ap-ledge-shade: color-mix(in oklch, var(--shade) 8%, transparent);
    --ap-eyebrow: var(--ap-muted);
    color-scheme: light;
  }

  /* Wine: the stage at the top of every page and the header. The accent turns light, ink turns pale. */
  [data-surface='wine'] {
    --ap-paper: var(--wine-950);
    --ap-surface: color-mix(in oklch, var(--wine-600) 55%, transparent);
    --ap-sunk: color-mix(in oklch, var(--wine-950) 40%, transparent);
    --ap-well: color-mix(in oklch, var(--wine-950) 55%, transparent);
    --ap-line: color-mix(in oklch, var(--on-wine) 16%, transparent);
    --ap-line-strong: color-mix(in oklch, var(--on-wine) 32%, transparent);
    --ap-field-line: color-mix(in oklch, var(--on-wine) 45%, transparent);
    --ap-ink: var(--on-wine);
    --ap-ink-soft: var(--on-wine-muted);
    --ap-muted: var(--on-wine-faint);
    --ap-faint: var(--on-wine-faint);
    --ap-accent: var(--on-wine);
    --ap-accent-hover: var(--white);
    --ap-accent-soft: color-mix(in oklch, var(--on-wine) 14%, transparent);
    --ap-accent-line: color-mix(in oklch, var(--on-wine) 30%, transparent);
    --ap-accent-ink: var(--wine-800);
    --ap-sage: var(--sage-300);
    --ap-sage-soft: color-mix(in oklch, var(--sage-500) 28%, transparent);
    --ap-danger: var(--brick-200);
    --ap-danger-soft: color-mix(in oklch, var(--brick-500) 25%, transparent);
    --ap-danger-line: color-mix(in oklch, var(--brick-200) 50%, transparent);
    --ap-focus: 0 0 0 3px color-mix(in oklch, var(--on-wine) 45%, transparent);
    --ap-ledge-top: color-mix(in oklch, var(--wine-300) 55%, transparent);
    --ap-ledge-front: var(--wine-500);
    --ap-ledge-shade: color-mix(in oklch, var(--wine-950) 60%, transparent);
    --ap-eyebrow: var(--gold-300);
    color-scheme: dark;
  }

  /* Derived from the semantic tokens of the nearest surface. Declared on every surface root, so a wine block
     inside paper (and back) recomputes them from its own ink, line and accent. */
  :root,
  [data-surface] {
    --ap-ring: inset 0 0 0 1px var(--ap-line);
    --ap-ring-muted: inset 0 0 0 var(--ap-stroke) var(--ap-muted);
    --ap-ring-accent: inset 0 0 0 var(--ap-stroke) var(--ap-accent);
    --ap-ring-accent-bold: inset 0 0 0 var(--ap-stroke-bold) var(--ap-accent);
    --ap-outline-line: 0 0 0 1px var(--ap-line);
    --ap-outline-strong: 0 0 0 1px var(--ap-line-strong);
    --ap-hairline-below: 0 1px 0 var(--ap-line);
    --ap-halo: 0 0 0 var(--ap-stroke-heavy) var(--ap-surface);
    --ap-radio-ring: inset 0 0 0 3.5px var(--ap-surface);
    --ap-hover-wash: color-mix(in oklch, var(--ap-ink) 10%, transparent);
    --ap-surface-glass: color-mix(in oklch, var(--ap-surface) 85%, transparent);
    --ap-surface-wash: color-mix(in oklch, var(--ap-surface) 12%, transparent);
    --ap-sunk-glass: color-mix(in oklch, var(--ap-sunk) 90%, transparent);
    --ap-line-soft: color-mix(in oklch, var(--ap-line) 70%, transparent);
    --ap-accent-wash: color-mix(in oklch, var(--ap-accent) 19%, transparent);
    --ap-accent-tint-1: color-mix(in oklch, var(--ap-accent) 8%, var(--ap-surface));
    --ap-accent-tint-2: color-mix(in oklch, var(--ap-accent) 18%, var(--ap-surface));
    --ap-accent-tint-3: color-mix(in oklch, var(--ap-accent) 32%, var(--ap-surface));
    --ap-accent-mid: color-mix(in oklch, var(--ap-accent) 45%, var(--ap-line));
    --ap-sage-hover: color-mix(in oklch, var(--ap-sage-soft), var(--ap-sage) 12%);
    --ap-sage-track: color-mix(in oklch, var(--ap-sage) 30%, transparent);
    /* Wine glow behind the stage and the wine cards: from the upper corner */
    --ap-wine-glow: radial-gradient(80% 70% at 85% -10%, var(--ap-stage-glow), transparent 65%),
      radial-gradient(60% 60% at 0% 110%, var(--ap-stage-deep), transparent 70%), var(--ap-paper);
    --ap-accent-glow: radial-gradient(120% 140% at 100% 0%, var(--ap-accent-soft), transparent 55%), var(--ap-surface);
  }

  @media (max-width: 1023px), (pointer: coarse) {
    :root {
      --ap-control: var(--ap-touch);
    }
  }
  @media (max-width: 740px) {
    :root {
      --ap-gutter: 16px;
      --ap-header: 56px;
      --ap-logo-h: 28px;
      --ap-float-inset: var(--space-md);
    }
  }
}

/* Base: element defaults and the application shell (top header, one content width). */
@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--ap-header) + var(--space-lg));
  }
  body {
    margin: 0;
    min-height: 100dvh;
    color: var(--ap-ink);
    font: var(--ap-weight-regular) var(--ap-text-base) / var(--ap-leading-normal) var(--ap-body);
    background: var(--ap-paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  button,
  input,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }
  button,
  a,
  input,
  select,
  textarea,
  summary {
    -webkit-tap-highlight-color: transparent;
  }
  button {
    cursor: pointer;
    border: 0;
    background: none;
    padding: 0;
  }
  button:disabled {
    cursor: not-allowed;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
  /* A link inside running text differs from it by more than colour (WCAG 1.4.1); components style their own. */
  :where(p, dd, td) a:not([class]) {
    text-decoration: underline;
    text-underline-offset: var(--ap-underline-offset);
  }
  img,
  svg {
    display: block;
    max-width: 100%;
  }
  h1,
  h2,
  h3,
  h4 {
    margin: 0;
    font-family: var(--ap-display);
    font-weight: var(--ap-weight-semibold);
    line-height: var(--ap-leading-heading);
    letter-spacing: var(--ap-tracking-tight);
    text-wrap: balance;
  }
  p {
    margin: 0;
    text-wrap: pretty;
  }
  :focus-visible {
    outline: var(--ap-focus-width) solid var(--ap-accent);
    outline-offset: var(--ap-focus-offset);
  }
  ::selection {
    background: var(--ap-accent-soft);
  }
  [hidden] {
    display: none !important;
  }
  /* A surface brings its own ink: text inside a wine block reads light without each component asking. */
  [data-surface] {
    color: var(--ap-ink);
  }
  .ap-skip {
    position: fixed;
    top: var(--space-sm);
    left: var(--space-sm);
    z-index: var(--z-skip);
    padding: var(--space-sm-md) var(--space-lg);
    border-radius: var(--ap-radius-sm);
    background: var(--ap-ink);
    color: var(--ap-surface);
    transform: translateY(-160%);
    transition: transform var(--ap-dur-hover) var(--ap-ease);
  }
  .ap-skip:focus {
    transform: none;
  }
  .ap-noscript {
    margin: var(--space-3xl);
  }

  h1,
  h2,
  h3,
  h4,
  p,
  dd,
  .ap-form-message {
    overflow-wrap: anywhere;
  }
  /* Reduced motion: every animation and transition ends at once, site-wide; modules do not repeat this. */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: var(--ap-dur-reduced) !important;
      animation-iteration-count: 1 !important;
      transition-duration: var(--ap-dur-reduced) !important;
      scroll-behavior: auto !important;
    }
  }
}

/* Layout: the application shell (wine header, main, footer) and page-level stacks. docs/design-system.md */
@layer layout {
  /* The header floats over the page: main starts under it, and wine stages run up behind it. */
  :root {
    --ap-main-top: calc(var(--space-2xl) + var(--ap-header));
  }
  body {
    overflow-x: clip;
  }
  /* Wine cover headers gradually become opaque on scroll (main.js). */
  .ap-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: color-mix(in oklch, var(--ap-paper) calc(var(--ap-header-fill, 1) * 100%), transparent);
    border-bottom: 1px solid color-mix(in oklch, var(--ap-line) calc(var(--ap-header-fill, 1) * 100%), transparent);
    transition: background var(--ap-dur-state), border-color var(--ap-dur-state);
    margin-bottom: calc(var(--ap-header) * -1);
  }
  .ap-header[data-menu] { --ap-header-fill: 1 !important; }
  .ap-nav-toggle {
    display: none;
    flex-shrink: 0;
    place-items: center;
    width: var(--ap-touch);
    height: var(--ap-touch);
    border-radius: var(--ap-round);
    color: var(--ap-ink);
  }
  .ap-nav-toggle:hover {
    background: var(--ap-accent-soft);
  }
  .ap-header-inner {
    display: flex;
    align-items: center;
    gap: var(--space-2xl);
    max-width: calc(var(--ap-content) + 2 * var(--ap-gutter));
    height: var(--ap-header);
    margin: 0 auto;
    padding: 0 var(--ap-gutter);
  }
  .ap-brand {
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }
  .ap-brand-logo {
    width: auto;
    height: var(--ap-logo-h);
  }
  [data-surface='wine'] .ap-brand-logo {
    filter: invert(1);
  }
  .ap-navigation {
    display: flex;
    align-self: stretch;
    gap: var(--space-xl);
  }
  .ap-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-xs-sm);
    color: var(--ap-ink-soft);
    font-size: var(--ap-text-base);
    font-weight: var(--ap-weight-medium);
    white-space: nowrap;
    transition: color var(--ap-dur-hover) var(--ap-ease-quart);
  }
  .ap-nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: var(--ap-stroke-bold);
    border-radius: var(--ap-radius-2xs);
    background: var(--ap-accent);
    transform: scaleX(0);
    transition: transform var(--ap-dur-state) var(--ap-ease-out);
  }
  .ap-nav-link:hover {
    color: var(--ap-ink);
  }
  .ap-nav-link:hover::after {
    transform: scaleX(0.4);
  }
  .ap-nav-link[aria-current='page'] {
    color: var(--ap-ink);
    font-weight: var(--ap-weight-semibold);
  }
  .ap-nav-link[aria-current='page']::after {
    transform: scaleX(1);
  }
  /* Quick add for signed-in owners (shelf.js quickFind) between the sections and the account. */
  .ap-header-find {
    flex: 0 1 260px;
    min-width: 0;
    margin-left: auto;
  }
  .ap-header-find:not([hidden]) + .ap-header-account {
    margin-left: 0;
  }
  /* The search field takes the free width; the account block and the guest «Войти» keep theirs. */
  .ap-header-account {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--space-sm);
    margin-left: auto;
  }
  .ap-account { display: flex; align-items: center; gap: var(--space-md); }
  .ap-account-quota { display: flex; align-items: baseline; gap: var(--space-xs-sm); text-align: right; color: var(--ap-ink); text-decoration: none; white-space: nowrap; font-size: var(--ap-text-xs); line-height: var(--ap-leading-heading); }
  .ap-account-quota > span:first-child { color: var(--ap-muted); }
  .ap-account-quota strong { font-weight: var(--ap-weight-semibold); }
  .ap-account-link {
    display: block;
    border-radius: var(--ap-round);
  }
  .ap-avatar {
    display: grid;
    place-items: center;
    width: var(--ap-control-md);
    height: var(--ap-control-md);
    border-radius: var(--ap-round);
    background: var(--ap-accent-soft);
    color: var(--ap-accent);
    font-size: var(--ap-text-base);
    font-weight: var(--ap-weight-semibold);
    transition: background var(--ap-dur-hover);
  }
  .ap-account-link:hover .ap-avatar {
    background: var(--ap-accent-line);
  }
  .ap-main {
    max-width: calc(var(--ap-content) + 2 * var(--ap-gutter));
    margin: 0 auto;
    padding: var(--ap-main-top) var(--ap-gutter) var(--space-5xl);
    outline: none;
  }
  .ap-loading {
    padding: var(--space-5xl) 0;
    color: var(--ap-muted);
    text-align: center;
  }
  /* Full-bleed band inside the centred main: the background spans the window, the content keeps one width. */
  .ap-bleed {
    margin-inline: calc(50% - 50vw);
    padding-inline: max(var(--ap-gutter), calc(50vw - var(--ap-content) / 2));
  }
  .ap-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4xl);
  }
  .ap-footer {
    border-top: 1px solid var(--ap-line);
  }
  .ap-footer-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-lg);
    max-width: calc(var(--ap-content) + 2 * var(--ap-gutter));
    margin: 0 auto;
    padding: var(--space-2xl) var(--ap-gutter) var(--space-3xl);
    color: var(--ap-muted);
    font-size: var(--ap-text-sm);
  }
  .ap-footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xl);
  }
  .ap-footer a:hover {
    color: var(--ap-ink);
  }

  /* Narrow desktops keep every section in the row and still leave the quick add a usable width. */
  @media (min-width: 1024px) and (max-width: 1279px) {
    .ap-header-inner,
    .ap-navigation {
      gap: var(--space-lg);
    }
    .ap-header-find {
      flex-basis: 220px;
    }
  }
  /* Tablets and phones: the sections fold into a solid wine sheet under the header, opened by the menu button. */
  @media (max-width: 1023px) {
    .ap-header-find {
      flex: 1 1 auto;
    }
    .ap-nav-toggle {
      display: inline-grid;
      order: 3;
      margin-left: var(--space-xs);
    }
    .ap-navigation {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      flex-direction: column;
      max-height: calc(100dvh - var(--ap-header));
      overflow-y: auto;
      overscroll-behavior: contain;
      gap: 0;
      padding: var(--space-sm) var(--ap-gutter) var(--space-lg);
      background: var(--ap-paper);
      border-bottom: 1px solid var(--ap-line);
      box-shadow: var(--ap-shadow-lg);
      visibility: hidden;
      opacity: 0;
      translate: 0 calc(var(--ap-lift-lg) * -1);
      transition:
        opacity var(--ap-dur-hover) var(--ap-ease-quart),
        translate var(--ap-dur-state) var(--ap-ease-out),
        visibility var(--ap-dur-none) var(--ap-dur-state);
    }
    .ap-header[data-menu] .ap-navigation {
      visibility: visible;
      opacity: 1;
      translate: 0;
      transition-delay: var(--ap-dur-none);
    }
    .ap-nav-link {
      min-height: var(--ap-control-lg);
      font-size: var(--ap-text-xl);
      border-bottom: 1px solid var(--ap-line);
    }
    .ap-nav-link:last-child {
      border-bottom: 0;
    }
    .ap-nav-link::after {
      top: var(--space-md);
      bottom: var(--space-md);
      left: calc(var(--space-md) * -1);
      right: auto;
      width: var(--ap-stroke-heavy);
      height: auto;
      transform: scaleY(0);
    }
    .ap-nav-link[aria-current='page']::after {
      transform: none;
    }
  }
  @media (max-width: 740px) {
    .ap-header-inner {
      gap: var(--space-md);
    }
    .ap-brand-logo {
      flex-shrink: 0;
    }
    :root {
      --ap-main-top: calc(var(--space-xl) + var(--ap-header));
    }
    .ap-main {
      padding-bottom: var(--space-4xl);
    }
  }

  /* The narrowest phones give the header room to quick add; the AI balance stays in Profile → AI и приватность. */
  @media (max-width: 420px) {
    .ap-header-account .ap-account-quota {
      display: none;
    }
  }
  @media (max-width: 1023px), (pointer: coarse) {
    .ap-account-link {
      display: grid;
      place-items: center;
      min-width: var(--ap-touch);
      min-height: var(--ap-touch);
    }
  }
}

/* Shared UI: controls. */
@layer components {
  /* Buttons */
  .ap-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    min-height: var(--ap-control);
    padding: var(--space-sm) var(--space-lg-xl);
    border: 1px solid var(--ap-line-strong);
    border-radius: var(--ap-radius-md);
    background: transparent;
    color: var(--ap-ink);
    font-size: var(--ap-text-md);
    font-weight: var(--ap-weight-semibold);
    white-space: normal;
    max-width: 100%;
    overflow-wrap: anywhere;
    transition:
      background var(--ap-dur-hover) var(--ap-ease-quart),
      border-color var(--ap-dur-hover) var(--ap-ease-quart),
      color var(--ap-dur-hover) var(--ap-ease-quart),
      transform var(--ap-dur-press) var(--ap-ease-quart);
  }
  .ap-button svg {
    width: var(--ap-icon);
    height: var(--ap-icon);
    flex-shrink: 0;
    transition: transform var(--ap-dur-state) var(--ap-ease-out);
  }
  .ap-button:hover:not(:disabled) svg {
    transform: translateX(var(--ap-nudge));
  }
  .ap-button:hover:not(:disabled) {
    border-color: var(--ap-muted);
  }
  .ap-button:active:not(:disabled) {
    transform: scale(var(--ap-press-scale));
  }
  .ap-button:disabled {
    opacity: var(--ap-opacity-disabled);
  }
  .ap-button-primary {
    border-color: var(--ap-accent);
    background: var(--ap-accent);
    color: var(--ap-accent-ink);
  }
  .ap-button-primary:hover:not(:disabled) {
    border-color: var(--ap-accent-hover);
    background: var(--ap-accent-hover);
  }
  .ap-button-secondary {
    background: var(--ap-surface);
  }
  .ap-button-ghost {
    border-color: transparent;
    background: transparent;
  }
  .ap-button-ghost:hover:not(:disabled) {
    background: var(--ap-sunk);
    border-color: transparent;
  }
  .ap-button-danger {
    border-color: var(--ap-danger-line);
    background: var(--ap-surface);
    color: var(--ap-danger);
  }
  .ap-button-danger:hover:not(:disabled) {
    border-color: var(--ap-danger);
    background: var(--ap-danger-soft);
  }
  .ap-button-small {
    min-height: var(--ap-control-sm);
    padding: 0 var(--space-lg);
    border-radius: var(--ap-radius-sm);
    font-size: var(--ap-text-sm);
  }
  .ap-button-block {
    width: 100%;
  }
  .ap-icon-button {
    display: inline-grid;
    place-items: center;
    width: var(--ap-control-md);
    height: var(--ap-control-md);
    border-radius: var(--ap-round);
    color: var(--ap-muted);
    transition:
      background var(--ap-dur-hover),
      color var(--ap-dur-hover);
  }
  .ap-icon-button:hover:not(:disabled) {
    background: var(--ap-sunk);
    color: var(--ap-ink);
  }
  .ap-icon-button svg {
    width: var(--ap-icon-lg);
    height: var(--ap-icon-lg);
  }
  .ap-icon-button:disabled,
  .ap-segmented button:disabled {
    opacity: var(--ap-opacity-disabled);
  }
  .ap-text-button,
  .ap-text-link {
    display: inline;
    padding: 0;
    color: var(--ap-ink-soft);
    font-size: var(--ap-text-sm);
    text-decoration: underline;
    text-decoration-color: var(--ap-line-strong);
    text-underline-offset: var(--ap-underline-offset);
  }
  .ap-text-button:hover,
  .ap-text-link:hover {
    color: var(--ap-ink);
    text-decoration-color: currentColor;
  }
  /* Reference link inside running facts (brand, perfumer, note, accord, source): keeps the surrounding type and colour,
     a faint underline marks it, hover strengthens it. */
  .ap-ref-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--ap-line);
    text-decoration-thickness: 1px;
    text-underline-offset: var(--ap-underline-offset);
  }
  .ap-ref-link:hover {
    text-decoration-color: currentColor;
  }
  .ap-back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs-sm);
    min-height: var(--ap-control-md);
    padding: 0 var(--space-md) 0 var(--space-sm);
    border-radius: var(--ap-pill);
    color: var(--ap-ink-soft);
    font-size: var(--ap-text-sm);
  }
  .ap-back:hover {
    background: var(--ap-sunk);
    color: var(--ap-ink);
  }
  .ap-back svg {
    width: var(--ap-icon);
    height: var(--ap-icon);
  }
  /* Chips, segmented control, tabs */
  .ap-chip-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-xs-sm);
  }
  .ap-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs-sm);
    min-height: var(--ap-control-sm);
    padding: 0 var(--space-lg);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-pill);
    background: var(--ap-surface);
    color: var(--ap-ink-soft);
    font-size: var(--ap-text-sm);
    white-space: nowrap;
    transition:
      background var(--ap-dur-hover),
      border-color var(--ap-dur-hover),
      color var(--ap-dur-hover);
  }
  .ap-chip svg {
    width: var(--ap-icon-md);
    height: var(--ap-icon-md);
  }
  .ap-chip:hover:not(:disabled) {
    border-color: var(--ap-line-strong);
    color: var(--ap-ink);
  }
  .ap-chip[aria-pressed='true'] {
    border-color: var(--ap-accent);
    background: var(--ap-accent);
    color: var(--ap-accent-ink);
  }
  .ap-chip:disabled {
    opacity: var(--ap-opacity-disabled);
  }
  .ap-chip-quiet {
    border-color: transparent;
    background: transparent;
    color: var(--ap-muted);
  }
  .ap-segmented {
    display: inline-flex;
    padding: var(--space-xs);
    border-radius: var(--ap-radius-md);
    background: var(--ap-sunk);
  }
  .ap-segmented button {
    min-height: var(--ap-control-sm);
    padding: 0 var(--space-lg);
    border-radius: var(--ap-radius-sm);
    color: var(--ap-ink-soft);
    font-size: var(--ap-text-sm);
    transition:
      background var(--ap-dur-hover),
      color var(--ap-dur-hover),
      box-shadow var(--ap-dur-hover);
  }
  .ap-segmented button:hover:not(:disabled) {
    color: var(--ap-ink);
  }
  .ap-segmented button[aria-pressed='true'] {
    background: var(--ap-accent);
    color: var(--ap-accent-ink);
    font-weight: var(--ap-weight-semibold);
  }
  /* One visual language for route tabs and in-page section navigation. */
  :is(.ap-tabs, .ap-subnav-track) {
    display: flex;
    gap: var(--space-xs);
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .ap-tabs { margin-bottom: var(--space-2xl); }
  :is(.ap-tab, .ap-subnav-track > a) {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    min-height: var(--ap-touch);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--ap-pill);
    color: var(--ap-ink-soft);
    font-size: var(--ap-text-md);
    font-weight: var(--ap-weight-medium);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--ap-dur-state) var(--ap-ease-out), background var(--ap-dur-state) var(--ap-ease-out);
  }
  :is(.ap-tab, .ap-subnav-track > a):hover {
    background: var(--ap-hover-wash);
    color: var(--ap-ink);
  }
  /* Keep keyboard focus inside the pill: horizontal scroll tracks clip outer outlines. */
  :is(.ap-tab, .ap-subnav-track > a):focus-visible {
    outline: var(--ap-focus-width) solid currentColor;
    outline-offset: calc(var(--ap-focus-offset-lg) * -1);
  }
  :is(.ap-tab, .ap-subnav-track > a):is([aria-current='page'], [aria-current='true'], [aria-pressed='true'], [aria-selected='true']) {
    background: var(--ap-ink);
    color: var(--ap-paper);
    font-weight: var(--ap-weight-semibold);
  }

  /* Touch controls keep a real hit area; informational tags are unaffected. */
  @media (max-width: 1023px), (pointer: coarse) {
    .ap-button,
    .ap-button-small,
    .ap-chip,
    .ap-segmented button,
    .ap-back,
    .ap-tab {
      min-height: var(--ap-touch);
    }
    .ap-icon-button {
      width: var(--ap-touch);
      height: var(--ap-touch);
      flex-shrink: 0;
    }
    .ap-segmented {
      max-width: 100%;
    }
    .ap-segmented button {
      min-width: 0;
      padding-inline: var(--space-md);
    }
    .ap-text-button {
      display: inline-flex;
      align-items: center;
      min-height: var(--ap-touch);
    }
    .ap-chip {
      white-space: normal;
      overflow-wrap: anywhere;
    }
  }
}

/* Shared UI: forms. */
@layer components {
  /* Fields */
  .ap-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
  }
  .ap-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: var(--space-lg);
  }
  .ap-field {
    display: grid;
    min-width: 0;
    gap: var(--space-xs-sm);
    color: var(--ap-ink-soft);
    font-size: var(--ap-text-sm);
    font-weight: var(--ap-weight-semibold);
  }
  .ap-field input,
  .ap-field select,
  .ap-field textarea,
  .ap-input {
    width: 100%;
    min-height: var(--ap-control);
    padding: var(--space-sm) var(--space-lg);
    border: 1px solid var(--ap-field-line);
    border-radius: var(--ap-radius-sm);
    background: var(--ap-surface);
    color: var(--ap-ink);
    font-size: var(--ap-text-base);
    font-weight: var(--ap-weight-regular);
    transition:
      border-color var(--ap-dur-hover),
      box-shadow var(--ap-dur-hover);
  }
  .ap-field textarea {
    min-height: 112px;
    line-height: var(--ap-leading-normal);
    resize: vertical;
  }
  .ap-field input[type='file'] {
    padding: var(--space-sm);
  }
  .ap-field input:focus,
  .ap-field select:focus,
  .ap-field textarea:focus,
  .ap-input:focus {
    outline: none;
    border-color: var(--ap-accent);
    box-shadow: var(--ap-focus);
  }
  ::placeholder {
    color: var(--ap-faint);
  }
  /* Raw import data: the class outranks .ap-field textarea without !important. */
  .ap-field .ap-code-field,
  .ap-code-field {
    min-height: 180px;
    font: var(--ap-text-sm) / var(--ap-leading-normal) var(--ap-mono);
  }
  .ap-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    color: var(--ap-ink-soft);
    font-size: var(--ap-text-sm);
    line-height: var(--ap-leading-normal);
    cursor: pointer;
  }
  .ap-checkbox input {
    flex-shrink: 0;
    width: var(--ap-icon);
    height: var(--ap-icon);
    margin: var(--space-2xs) 0 0;
    accent-color: var(--ap-accent);
  }
  .ap-checkbox strong {
    color: var(--ap-ink);
  }
  .ap-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
  }
  .ap-form-message {
    padding: var(--space-sm-md) var(--space-lg);
    border-radius: var(--ap-radius-sm);
    background: var(--ap-sage-soft);
    color: var(--ap-ink-soft);
    font-size: var(--ap-text-sm);
    white-space: pre-line;
  }
  .ap-form-message[data-error='true'] {
    background: var(--ap-danger-soft);
    color: var(--ap-danger);
  }
  .ap-search-field {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
  }
  .ap-search-field svg {
    position: absolute;
    left: var(--space-lg);
    width: var(--ap-icon-lg);
    height: var(--ap-icon-lg);
    color: var(--ap-muted);
    pointer-events: none;
  }
  .ap-search-field input {
    width: 100%;
    min-height: var(--ap-control-lg);
    padding: 0 var(--space-lg-xl) 0 var(--space-3xl);
    border: 1px solid var(--ap-field-line);
    border-radius: var(--ap-pill);
    background: var(--ap-surface);
    font-size: var(--ap-text-xl);
    transition:
      border-color var(--ap-dur-hover),
      box-shadow var(--ap-dur-hover);
  }
  .ap-search-field input:focus {
    outline: none;
    border-color: var(--ap-accent);
    box-shadow: var(--ap-focus);
  }
  /* Radio chips: native radios stay for keyboard and screen readers. */
  .ap-choice {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .ap-choice legend {
    margin-bottom: var(--space-sm);
    padding: 0;
    color: var(--ap-ink-soft);
    font-size: var(--ap-text-sm);
    font-weight: var(--ap-weight-semibold);
  }
  .ap-choice-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs-sm);
  }
  .ap-choice label {
    position: relative;
    cursor: pointer;
  }
  .ap-choice label input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }
  .ap-choice label > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--ap-control-md);
    padding: 0 var(--space-lg);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-pill);
    background: var(--ap-surface);
    color: var(--ap-ink-soft);
    font-size: var(--ap-text-sm);
    user-select: none;
    transition:
      background var(--ap-dur-press),
      border-color var(--ap-dur-press),
      color var(--ap-dur-press);
  }
  .ap-choice label:hover > span {
    border-color: var(--ap-line-strong);
    color: var(--ap-ink);
  }
  .ap-choice label input:focus-visible + span {
    outline: var(--ap-focus-width) solid var(--ap-accent);
    outline-offset: var(--ap-focus-offset);
  }
  .ap-choice label input:checked + span {
    border-color: var(--ap-accent);
    background: var(--ap-accent);
    color: var(--ap-accent-ink);
  }
  .ap-choice-rating .ap-choice-row {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: var(--space-xs-sm);
    max-width: var(--ap-measure-sm);
  }
  .ap-choice-rating label > span {
    width: 100%;
    min-height: var(--ap-control);
    padding: 0;
    border-radius: var(--ap-radius-sm);
    font: var(--ap-weight-semibold) var(--ap-text-base) var(--ap-display);
    font-variant-numeric: tabular-nums;
  }
  .ap-choice-rating input:checked + span {
    border-color: var(--ap-accent);
    background: var(--ap-accent);
    color: var(--ap-accent-ink);
  }
  .ap-choice-hint {
    display: flex;
    justify-content: space-between;
    max-width: var(--ap-measure-sm);
    margin: var(--space-xs-sm) 0 0;
    color: var(--ap-muted);
    font-size: var(--ap-text-xs);
  }
  /* «Найти через AI» sits inside a search field on the right when nothing was found (catalog, shelf). */
  .ap-search-ai {
    position: absolute;
    top: 50%;
    right: var(--space-xs-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs-sm);
    min-height: var(--ap-control-md);
    padding: 0 var(--space-lg);
    border-radius: var(--ap-pill);
    background: var(--ap-accent);
    color: var(--ap-accent-ink);
    font-size: var(--ap-text-sm);
    font-weight: var(--ap-weight-semibold);
    white-space: nowrap;
    /* The entrance animates transform; translate keeps the action vertically centred. */
    translate: 0 -50%;
    animation: ap-rise var(--ap-dur-hover) var(--ap-ease);
  }
  .ap-search-ai:hover {
    background: var(--ap-accent-hover);
  }
  .ap-search-field .ap-search-ai svg {
    position: static;
    width: var(--ap-icon-md);
    height: var(--ap-icon-md);
    color: currentColor;
  }
  .ap-search-field:has(.ap-search-ai:not([hidden])) input {
    padding-right: var(--ap-search-action-room);
  }
  @media (max-width: 740px) {
    .ap-search-field:has(.ap-search-ai:not([hidden])) input {
      padding-right: calc(var(--ap-touch) + var(--space-lg));
    }
    .ap-search-ai {
      width: var(--ap-touch);
      padding: 0;
      justify-content: center;
    }
    .ap-search-ai span {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
  }

  @media (max-width: 1023px), (pointer: coarse) {
    .ap-field input,
    .ap-field select,
    .ap-field textarea,
    .ap-input,
    .ap-search-field input {
      font-size: var(--ap-input-text);
    }
    .ap-choice label > span {
      min-height: var(--ap-touch);
    }
    .ap-checkbox {
      min-height: var(--ap-touch);
      align-items: center;
    }
    .ap-checkbox input {
      margin-top: 0;
    }
    .ap-search-ai {
      min-width: var(--ap-touch);
      min-height: var(--ap-touch);
    }
  }
  @media (max-width: 640px) {
    .ap-choice-rating .ap-choice-row {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
}

/* Shared UI: cards. */
@layer components {
  /* Benefits as a thread: icon nodes on one vertical hairline, plain text beside them; no boxes. Works on paper and photographic wine. */
  .ap-benefits {
    --node: var(--ap-art-lg);
    display: grid;
    gap: var(--space-xl);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ap-benefits > li {
    position: relative;
    display: grid;
    grid-template-columns: var(--node) minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: start;
  }
  .ap-benefits > li:not(:last-child)::before {
    content: '';
    position: absolute;
    top: var(--node);
    bottom: calc(var(--space-xl) * -1);
    left: calc(var(--node) / 2);
    border-left: 1px solid var(--ap-trend-gold-edge);
  }
  .ap-benefits > li > svg {
    box-sizing: border-box;
    width: var(--node);
    height: var(--node);
    padding: var(--space-md);
    border: 1px solid var(--ap-trend-gold-edge);
    border-radius: var(--ap-round);
    background: var(--ap-trend-gold-wash);
    color: var(--ap-eyebrow);
  }
  .ap-benefits h2 { margin: var(--space-xs) 0 0; font-family: var(--ap-body); font-size: var(--ap-text-3xl); font-weight: var(--ap-weight-medium); line-height: var(--ap-leading-snug); }
  .ap-benefits p { max-width: 52ch; margin: var(--space-2xs) 0 0; color: var(--ap-ink-soft); font-size: var(--ap-text-lg); line-height: var(--ap-leading-normal); }
  @media (max-width: 740px) {
    .ap-benefits { --node: var(--ap-art); gap: var(--space-lg); }
    .ap-benefits > li { gap: var(--space-md); }
    .ap-benefits > li > svg { padding: var(--space-sm); }
    .ap-benefits > li:not(:last-child)::before { bottom: calc(var(--space-lg) * -1); }
    .ap-benefits h2 { font-size: var(--ap-text-2xl); }
    .ap-benefits p { font-size: var(--ap-text-md); }
  }

  /* Tags and accords */
  .ap-accords {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs-sm);
  }
  .ap-accord,
  .ap-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs-sm);
    min-height: var(--ap-control-2xs);
    padding: 0 var(--space-sm-md);
    border-radius: var(--ap-pill);
    background: var(--ap-sunk);
    color: var(--ap-ink-soft);
    font-size: var(--ap-text-xs);
    white-space: normal;
    max-width: 100%;
  }
  .ap-tag {
    font-weight: var(--ap-weight-semibold);
  }
  .ap-rating {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2xs);
    color: var(--ap-muted);
    font-size: var(--ap-text-xs);
  }
  .ap-rating strong {
    color: var(--ap-accent);
    font: var(--ap-weight-semibold) var(--ap-text-xl)/var(--ap-leading-none) var(--ap-display);
    font-variant-numeric: lining-nums;
  }
  /* Monochrome icon drawn in the text colour from a mask (--icon): vote answers, note groups, accords. */
  .ap-vote-icon {
    width: var(--ap-icon-xl);
    height: var(--ap-icon-xl);
    background: currentColor;
    mask: var(--icon) center / contain no-repeat;
  }
  /* Accord icons (accordChip): the note-group icon of the accord, smaller than the vote icons. */
  .ap-accord .ap-vote-icon {
    flex: none;
    width: var(--ap-icon-md);
    height: var(--ap-icon-md);
    margin-left: calc(var(--space-2xs) * -1);
  }
  /* Plate: every bottle stands on a light plate. White-background photos melt into it via multiply;
  cut-outs (data-cutout) get a soft contact shadow; no photo shows the bottle silhouette. */
  .ap-plate {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1.08;
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--ap-radius-lg);
    background: var(--ap-plate);
  }
  .ap-plate img {
    width: 80%;
    height: 80%;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform var(--ap-dur-state) var(--ap-ease-out);
  }
  .ap-plate[data-cutout]::after {
    content: '';
    position: absolute;
    left: 24%;
    right: 24%;
    bottom: 8%;
    height: 6%;
    z-index: var(--z-below);
    border-radius: var(--ap-round);
    background: radial-gradient(closest-side, var(--ap-plate-shadow), transparent);
  }
  .ap-plate[data-cutout] img {
    mix-blend-mode: normal;
  }
  .ap-plate[data-size='sm'] {
    border-radius: var(--ap-radius-md);
  }
  .ap-plate[data-size='xs'] {
    border-radius: var(--ap-radius-sm);
  }
  [data-surface='wine'] .ap-plate {
    box-shadow: var(--ap-shadow-plate);
  }
  /* Silhouette for perfumes without a photo: wishlist bottles are drawn as a dashed outline. */
  .ap-bottle-shape {
    width: 62%;
    height: 80%;
  }
  .ap-bottle-body {
    fill: var(--ap-well);
    stroke: var(--ap-line-strong);
    stroke-width: var(--ap-stroke);
  }
  .ap-bottle-cap {
    fill: var(--ap-ink-soft);
  }
  .ap-bottle-shape text {
    font: var(--ap-weight-semibold) var(--ap-text-chart) var(--ap-display);
    fill: var(--ap-muted);
  }
  .is-ghost .ap-bottle-body,
  .is-ghost .ap-bottle-cap {
    fill: none;
    stroke: var(--ap-faint);
    stroke-dasharray: 4 4;
  }
  /* Perfume card */
  .ap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(208px, 1fr));
    gap: var(--space-xl) var(--space-lg);
  }
  .ap-grid-wide {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
  .ap-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .ap-card-link {
    display: flex;
    flex-direction: column;
    border-radius: var(--ap-radius-lg);
  }
  .ap-card-visual {
    position: relative;
  }
  .ap-card-link:hover .ap-plate img,
  .ap-card-link:focus-visible .ap-plate img {
    transform: translateY(calc(var(--ap-lift) * -1)) scale(var(--ap-hover-scale));
  }
  .ap-card-body {
    grid-template-columns: minmax(0, 1fr);
    display: grid;
    gap: var(--space-2xs);
    padding: var(--space-md) var(--space-2xs) 0;
  }
  .ap-card-brand {
    overflow: hidden;
    color: var(--ap-muted);
    font-size: var(--ap-text-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ap-card h3 {
    font-size: var(--ap-text-lg);
    line-height: var(--ap-leading-snug);
    letter-spacing: var(--ap-tracking-snug);
  }
  .ap-card-link:hover h3 {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: var(--ap-underline-offset-lg);
  }
  .ap-card-meta {
    color: var(--ap-muted);
    font-size: var(--ap-text-sm);
  }
  .ap-card-accords { margin-top: var(--space-sm); gap: var(--space-xs); }
  .ap-card-accords .ap-accord { min-height: 0; padding: var(--space-xs-sm) var(--space-sm); font-size: var(--ap-text-xs); background: var(--ap-sunk); }
  /* The leading accord is filled everywhere; declared after the card variant so it keeps the fill there. */
  .ap-accord[data-lead] {
    background: var(--ap-accent);
    color: var(--ap-accent-ink);
    font-weight: var(--ap-weight-semibold);
  }
  /* An accord chip that is a link to its reference page (/accords/{slug}/): the label underlines on hover. */
  a.ap-accord:hover {
    text-decoration: underline;
    text-underline-offset: var(--ap-underline-offset);
  }
  .ap-card-bottom {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-sm-md);
    padding: var(--space-sm-md) var(--space-2xs) 0;
    border-top: 1px solid var(--ap-line);
  }
  .ap-card-mine {
    color: var(--ap-ink-soft);
    font-size: var(--ap-text-xs);
  }
  .ap-card-mine::before {
    content: '';
    display: inline-block;
    width: var(--ap-dot);
    height: var(--ap-dot);
    margin-right: var(--space-xs-sm);
    border-radius: var(--ap-round);
    background: var(--ap-accent);
    vertical-align: 1px;
  }
  .ap-card-mine[data-group='wishlist']::before {
    background: transparent;
    box-shadow: var(--ap-ring-accent);
  }
  .ap-card-mine[data-group='none']::before {
    background: var(--ap-sage);
  }
  .ap-card-bottom .ap-rating {
    margin-left: auto;
  }
  .ap-card-unrated {
    margin-left: auto;
    color: var(--ap-faint);
    font-size: var(--ap-text-xs);
  }
  .ap-card-fav {
    display: inline-flex;
    color: var(--ap-accent);
  }
  .ap-card-fav svg {
    width: var(--ap-icon-md);
    height: var(--ap-icon-md);
    fill: currentColor;
  }
  .ap-card-compare {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    width: var(--ap-control-sm);
    height: var(--ap-control-sm);
    background: var(--ap-surface-glass);
    opacity: 0;
    transition:
      opacity var(--ap-dur-hover),
      background var(--ap-dur-hover),
      color var(--ap-dur-hover);
  }
  .ap-card:hover .ap-card-compare,
  .ap-card-compare:focus-visible,
  .ap-card-compare[aria-pressed='true'] {
    opacity: 1;
  }
  .ap-card-compare[aria-pressed='true'] {
    background: var(--ap-accent);
    color: var(--ap-accent-ink);
  }
  .ap-card-compare svg {
    width: var(--ap-icon);
    height: var(--ap-icon);
  }
  @media (hover: none) {
    .ap-card-compare {
      opacity: 1;
    }
  }
  .ap-card-missing span {
    color: var(--ap-muted);
    font-size: var(--ap-text-sm);
  }
  .ap-card-external .ap-card-visual {
    aspect-ratio: auto;
    min-height: 140px;
    border: 1px dashed var(--ap-line-strong);
    background: transparent;
  }
  @media (max-width: 740px) {
    .ap-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-xl) var(--space-md);
    }
    .ap-grid-wide {
      grid-template-columns: 1fr;
    }
    .ap-card h3 {
      font-size: var(--ap-text-base);
    }
  }
}

/* Shared UI: components. */
@layer components {
  /* Panels, lists, tables */
  .ap-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
    align-content: start;
    padding: var(--space-xl);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius-xl);
    background: var(--ap-surface);
  }
  .ap-panel + .ap-panel {
    margin-top: var(--space-lg);
  }
  .ap-panel h2 {
    font-size: var(--ap-text-2xl);
  }
  .ap-panel h3 {
    font-size: var(--ap-text-lg);
  }
  .ap-panel > summary {
    cursor: pointer;
    font-weight: var(--ap-weight-semibold);
  }
  .ap-panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: var(--space-lg);
    align-items: start;
  }
  .ap-panels > .ap-panel {
    margin-top: 0;
  }
  .ap-danger-panel {
    border-color: var(--ap-danger-line);
  }
  .ap-list {
    display: grid;
    gap: var(--space-md);
  }
  .ap-list-item {
    padding: var(--space-lg);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius-lg);
    background: var(--ap-paper);
  }
  .ap-list-item p {
    color: var(--ap-muted);
    font-size: var(--ap-text-sm);
  }
  .ap-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
  }
  .ap-row small {
    color: var(--ap-muted);
  }
  .ap-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius-lg);
  }
  .ap-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ap-text-sm);
  }
  .ap-table th,
  .ap-table td {
    padding: var(--space-sm-md) var(--space-lg);
    border-bottom: 1px solid var(--ap-line);
    text-align: left;
    vertical-align: top;
  }
  .ap-table th {
    background: var(--ap-sunk);
    color: var(--ap-muted);
    font-size: var(--ap-text-xs);
    font-weight: var(--ap-weight-semibold);
  }
  .ap-table tr:last-child td {
    border-bottom: 0;
  }
  .ap-table-details {
    max-height: 320px;
    overflow: auto;
    padding: var(--space-md);
    border-radius: var(--ap-radius-sm);
    background: var(--ap-sunk);
    font: var(--ap-text-xs)/var(--ap-leading-normal) var(--ap-mono);
    white-space: pre-wrap;
  }
  .ap-usage-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: 0 var(--space-xl);
    margin: 0;
  }
  .ap-usage-summary div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-sm-md) 0;
    border-bottom: 1px solid var(--ap-line);
  }
  .ap-usage-summary dt {
    color: var(--ap-muted);
    font-size: var(--ap-text-sm);
  }
  .ap-usage-summary dd {
    margin: 0;
    font: var(--ap-text-sm) var(--ap-body);
    text-align: right;
    overflow-wrap: anywhere;
  }
  .ap-status {
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--ap-radius-lg);
    background: var(--ap-sunk);
    color: var(--ap-ink-soft);
    font-size: var(--ap-text-sm);
  }
  .ap-claim {
    display: grid;
    gap: var(--space-xs-sm);
    padding: var(--space-sm-md) 0;
    border-top: 1px solid var(--ap-line);
    font-size: var(--ap-text-sm);
    justify-items: start;
  }
  .ap-evidence {
    color: var(--ap-muted);
    font-size: var(--ap-text-xs);
  }
  /* Empty state */
  .ap-empty {
    display: grid;
    justify-items: center;
    gap: var(--space-sm-md);
    max-width: var(--ap-measure-sm);
    margin: var(--space-xl) auto;
    padding: var(--space-3xl) var(--space-xl);
    text-align: center;
  }
  .ap-empty-art {
    width: min(var(--ap-measure-xs), 100%);
    height: auto;
    max-height: 180px;
    object-fit: contain;
  }
  .ap-empty-icon {
    display: grid;
    place-items: center;
    width: var(--ap-control-xl);
    height: var(--ap-control-xl);
    margin-bottom: var(--space-xs-sm);
    border-radius: var(--ap-round);
    background: var(--ap-sunk);
    color: var(--ap-muted);
  }
  .ap-empty h2 {
    font-size: var(--ap-text-4xl);
  }
  .ap-empty p {
    color: var(--ap-muted);
  }
  .ap-empty-actions {
    margin-top: var(--space-sm-md);
  }
  /* Progress toward the portrait */
  .ap-progress {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
    padding: var(--space-lg) var(--space-lg-xl);
    border-radius: var(--ap-radius-lg);
    background: var(--ap-sage-soft);
    color: var(--ap-ink);
    transition: background var(--ap-dur-hover);
  }
  .ap-progress:hover {
    background: var(--ap-sage-hover);
  }
  .ap-progress > span:nth-child(2) {
    display: grid;
    flex: 1;
    gap: var(--space-2xs);
  }
  .ap-progress strong {
    font-size: var(--ap-text-base);
  }
  .ap-progress small {
    color: var(--ap-ink-soft);
    font-size: var(--ap-text-sm);
  }
  .ap-progress > svg {
    width: var(--ap-icon);
    flex-shrink: 0;
    color: var(--ap-sage);
  }
  .ap-progress-steps {
    display: flex;
    gap: var(--space-xs);
  }
  .ap-progress-steps i {
    width: var(--ap-icon-xl);
    height: var(--ap-bar);
    border-radius: var(--ap-radius-2xs);
    background: var(--ap-sage-track);
  }
  .ap-progress-steps i.is-done {
    background: var(--ap-sage);
  }
  /* Submit buttons keep their own width inside grid forms. */
  .ap-form > .ap-button,
  .ap-form > button {
    justify-self: start;
  }
  /* Waiting indicator */
  .ap-spinner {
    flex-shrink: 0;
    width: var(--ap-control-xs);
    height: var(--ap-control-xs);
    border: var(--ap-stroke-heavy) solid var(--ap-line);
    border-top-color: var(--ap-accent);
    border-radius: var(--ap-round);
    animation: ap-spin var(--ap-dur-spin) linear infinite;
  }
  .ap-spinner-sm {
    width: var(--ap-icon-2xl);
    height: var(--ap-icon-2xl);
    border-width: var(--ap-stroke-bold);
  }
  /* Shared continuous data scale; --value is a clamped percentage. */
  .ap-bar-track {
    height: var(--ap-bar);
    border-radius: var(--ap-radius-2xs);
    background: var(--ap-line);
    overflow: hidden;
  }
  .ap-bar-track > span {
    width: var(--value, 0%);
    display: block;
    height: 100%;
    border-radius: var(--ap-radius-2xs);
    background: var(--ap-accent);
    transition: width var(--ap-dur-state) var(--ap-ease);
  }

  @keyframes ap-pulse {
    50% {
      opacity: var(--ap-opacity-ghost);
    }
  }
  @keyframes ap-spin {
    to {
      transform: rotate(360deg);
    }
  }
  @media (max-width: 740px) {
    .ap-panel {
      padding: var(--space-lg);
    }
  }
}

/* Shared UI: overlays (dialog, sign-in, comparison, compare tray, toast). */
@layer components {
  /* Dialog: a centred card on wide screens, a bottom sheet on phones */
  .ap-dialog {
    width: min(560px, calc(100vw - 2 * var(--space-lg)));
    max-height: calc(100dvh - var(--space-3xl));
    padding: var(--space-2xl);
    border: 0;
    border-radius: var(--ap-radius-xl);
    background: var(--ap-surface);
    color: var(--ap-ink);
    box-shadow: var(--ap-shadow-lg);
    overscroll-behavior: contain;
  }
  .ap-dialog:has(.ap-compare-grid) {
    width: min(1040px, calc(100vw - 2 * var(--space-lg)));
  }
  .ap-dialog[open] {
    animation: ap-rise var(--ap-dur-state) var(--ap-ease);
  }
  .ap-dialog::backdrop {
    background: var(--ap-backdrop);
    backdrop-filter: blur(var(--space-2xs));
  }
  .ap-dialog-close {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
  }
  .ap-dialog-content > h2 {
    margin: 0 var(--space-2xl-3xl) var(--space-xs-sm) 0;
    font-size: var(--ap-text-4xl);
  }
  .ap-dialog-content > .ap-help {
    margin-bottom: var(--space-lg);
  }
  .ap-dialog-content > .ap-form {
    margin-top: var(--space-lg);
  }
  .ap-auth h2 {
    font-size: var(--ap-text-5xl);
    margin-right: var(--space-2xl-3xl);
  }
  .ap-auth > .ap-help {
    margin: var(--space-xs-sm) 0 var(--space-xl);
  }
  .ap-auth-links {
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
    margin-top: var(--space-lg);
  }
  /* Comparison */
  .ap-compare-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: var(--space-xl);
    margin-top: var(--space-lg);
  }
  .ap-compare-col {
    display: grid;
    align-content: start;
    gap: var(--space-sm);
  }
  .ap-compare-photo {
    padding: var(--space-md);
    border-radius: var(--ap-radius-lg);
    background: var(--ap-sunk);
  }
  .ap-compare-photo img {
    width: 100%;
    height: 170px;
    object-fit: contain;
    mix-blend-mode: multiply;
  }
  .ap-compare-col h3 {
    font-size: var(--ap-text-2xl);
  }
  .ap-compare-col .ap-button {
    justify-self: start;
    margin-top: var(--space-xs-sm);
  }
  /* Floating messages in the lower centre: the tray, and the toast that rises above a visible tray */
  .ap-compare-tray,
  .ap-toast {
    position: fixed;
    left: 50%;
    bottom: var(--ap-float-inset);
    background: var(--ap-ink);
    color: var(--ap-surface);
    font-size: var(--ap-text-sm);
    box-shadow: var(--ap-shadow-lg);
    /* Keep centering independent of ap-rise's animated transform. */
    translate: -50% 0;
    animation: ap-rise var(--ap-dur-state) var(--ap-ease);
  }
  .ap-compare-tray {
    z-index: var(--z-tray);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    max-width: calc(100vw - var(--space-xl));
    padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-lg-xl);
    border-radius: var(--ap-pill);
  }
  .ap-compare-tray svg {
    width: var(--ap-icon);
    height: var(--ap-icon);
  }
  .ap-compare-tray .ap-button-ghost {
    color: var(--ap-surface);
  }
  .ap-compare-tray .ap-button-ghost:hover:not(:disabled) {
    background: var(--ap-surface-wash);
  }
  .ap-toast {
    z-index: var(--z-toast);
    max-width: min(var(--ap-measure-sm), calc(100vw - 2 * var(--space-lg)));
    padding: var(--space-md) var(--space-lg-xl);
    border-radius: var(--ap-radius-lg);
    overflow-wrap: anywhere;
  }
  .ap-compare-tray:not([hidden]) ~ .ap-toast {
    bottom: calc(var(--ap-float-inset) + var(--ap-float-stack));
  }
  @keyframes ap-rise {
    from {
      opacity: 0;
      transform: translateY(var(--ap-rise));
    }
  }
  @media (max-width: 740px) {
    .ap-dialog {
      width: 100vw;
      max-width: 100vw;
      max-height: 92dvh;
      margin: auto 0 0;
      padding: var(--space-2xl) var(--space-lg-xl) calc(var(--space-xl) + env(safe-area-inset-bottom));
      border-radius: var(--ap-radius-xl) var(--ap-radius-xl) 0 0;
    }
    .ap-auth-links {
      flex-direction: column;
      align-items: flex-start;
    }
    .ap-compare-tray,
    .ap-toast {
      bottom: calc(var(--ap-float-inset) + env(safe-area-inset-bottom));
    }
    .ap-compare-tray:not([hidden]) ~ .ap-toast {
      bottom: calc(var(--ap-float-inset) + var(--ap-float-stack) + env(safe-area-inset-bottom));
    }
    .ap-compare-tray {
      width: calc(100vw - 2 * var(--space-md));
      justify-content: space-between;
    }
  }
}

/* Shared UI: native disclosures, help popovers and the manual slider. */
@layer components {
  /* Shared native disclosure chrome. Important declarations deliberately own the interaction across
     later page layers; page modules retain content layout, spacing and typography inside details. */
  details:not(.ap-help-popover) > summary {
    position: relative;
    display: var(--ap-summary-display, flex) !important;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    min-height: var(--ap-touch) !important;
    padding: var(--space-sm) var(--space-xl) var(--space-sm) var(--space-sm) !important;
    border-radius: var(--ap-radius-xs);
    color: var(--ap-ink) !important;
    font-weight: var(--ap-weight-medium);
    text-decoration: none !important;
    cursor: pointer;
    list-style: none !important;
    overflow-wrap: anywhere;
  }
  details > summary::-webkit-details-marker { display: none; }
  details > summary::marker { content: ''; }
  details:not(.ap-help-popover) > summary::before { content: none !important; }
  details:not(.ap-help-popover) > summary::after {
    content: '+';
    position: absolute;
    right: var(--space-sm);
    display: grid;
    place-items: center;
    width: var(--ap-icon-2xl);
    height: var(--ap-icon-2xl);
    color: var(--ap-accent);
    font-size: var(--ap-text-xl);
    font-weight: var(--ap-weight-regular);
  }
  details[open]:not(.ap-help-popover) > summary::after { content: '−'; }
  details:not(.ap-help-popover) > summary:hover,
  details[open]:not(.ap-help-popover) > summary { background: var(--ap-sunk); }
  details > summary:focus-visible {
    outline: var(--ap-focus-width) solid var(--ap-accent) !important;
    outline-offset: var(--ap-focus-offset) !important;
  }
  /* Remove obsolete arrows only, retaining counters, badges and changing labels. */
  .ap-filter-group > summary > svg,
  .ap-dossier-evidence > summary > span { display: none; }
  .ap-help-popover {
    display: inline-block; position: relative; vertical-align: middle;
    color: var(--ap-ink);
  }
  .ap-help-popover > summary {
    display: grid !important; place-items: center;
    width: var(--ap-touch);
    min-height: var(--ap-touch) !important;
    padding: 0 !important;
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-round);
    color: var(--ap-accent) !important;
    font-size: var(--ap-text-base) !important;
    font-weight: var(--ap-weight-semibold);
    cursor: pointer; list-style: none;
    text-decoration: none !important;
  }
  .ap-help-popover > summary::before,
  .ap-help-popover > summary::after { content: none !important; }
  .ap-help-popover[open] > summary,
  .ap-help-popover > summary:hover { background: var(--ap-sunk); }
  .ap-help-popover-body,
  .ap-help-popover > [role=note] {
    position: fixed; z-index: var(--z-popover);
    inset-inline: 0;
    bottom: var(--space-lg);
    margin-inline: auto;
    width: min(320px, calc(100vw - var(--space-xl)));
    padding: var(--space-md);
    border: 1px solid var(--ap-line-strong);
    border-radius: var(--ap-radius-lg);
    background: var(--ap-paper);
    color: var(--ap-ink);
    font-size: var(--ap-text-sm);
    line-height: var(--ap-leading-relaxed);
    text-align: start; overflow-wrap: anywhere;
  }
  @media (min-width: 1024px) {
    .ap-help-popover-body,
    .ap-help-popover > [role=note] {
      position: absolute;
      inset-inline: auto 0;
      top: calc(100% + var(--space-sm));
      bottom: auto;
      margin: 0;
    }
  }
  .ap-slider-nav { display: flex; align-items: center; gap: var(--space-2xs); }
  .ap-slider-nav .ap-icon-button { width: var(--ap-touch); height: var(--ap-touch); }
  .ap-slider-nav .ap-icon-button:disabled { opacity: var(--ap-opacity-ghost); pointer-events: none; }
  .ap-slider-count { min-width: var(--ap-touch); color: var(--ap-muted); font-size: var(--ap-text-sm); font-variant-numeric: tabular-nums; text-align: center; }
  .ap-slider { --ap-slider-height: auto; height: var(--ap-slider-height); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--ap-radius-lg); }
  .ap-slider::-webkit-scrollbar { display: none; }
  .ap-slider:focus-visible { outline: var(--ap-focus-width) solid var(--ap-accent); outline-offset: var(--ap-focus-offset-lg); }
  .ap-slider-track { display: flex; align-items: flex-start; }
  .ap-slide { flex: 0 0 100%; display: flex; flex-direction: column; gap: var(--space-md); min-width: 0; padding: var(--space-2xs); scroll-snap-align: start; }
}

/* Shared UI: quick add (shelf.js quickFind/quickItem). One search field finds a catalog perfume and puts it on the
   shelf with one tap; it sits in the header, in the shelf bar and on the first-visit screen of an empty shelf. */
@layer components {
  .ap-quick-find {
    position: relative;
    min-width: 0;
  }
  .ap-quick-find .ap-search-field input {
    min-height: var(--ap-control-md);
    padding-left: var(--space-2xl-3xl);
    font-size: var(--ap-text-md);
  }
  .ap-quick-find .ap-search-field svg {
    left: var(--space-md);
    width: var(--ap-icon);
    height: var(--ap-icon);
  }
  .ap-quick-find input::-webkit-search-cancel-button {
    appearance: none;
  }
  /* Results open under the field, above the page; the popover keeps the paper surface even inside the wine header. */
  .ap-quick-pop {
    position: absolute;
    top: calc(100% + var(--space-xs-sm));
    right: 0;
    z-index: var(--z-popover);
    width: min(var(--ap-measure-sm), calc(100vw - 2 * var(--space-lg)));
    max-height: min(70dvh, var(--ap-measure-sm));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-xs) var(--space-lg);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius-lg);
    background: var(--ap-surface);
    color: var(--ap-ink);
    box-shadow: var(--ap-shadow-lg);
    animation: ap-rise var(--ap-dur-hover) var(--ap-ease);
  }
  .ap-quick-pop > :last-child {
    border-bottom: 0;
  }
  .ap-quick-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-sm-md) 0;
    border-bottom: 1px solid var(--ap-line);
  }
  .ap-quick-perfume {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    min-width: 0;
  }
  .ap-quick-perfume .ap-plate {
    flex-shrink: 0;
    width: var(--ap-thumb-md);
    height: var(--ap-thumb-md);
    aspect-ratio: auto;
  }
  .ap-quick-perfume span {
    display: grid;
    min-width: 0;
    line-height: var(--ap-leading-snug);
  }
  .ap-quick-perfume small {
    color: var(--ap-muted);
    font: var(--ap-text-xs) var(--ap-body);
    overflow-wrap: anywhere;
  }
  .ap-quick-perfume strong {
    overflow: hidden;
    font-size: var(--ap-text-base);
    font-weight: var(--ap-weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ap-quick-actions {
    display: flex;
    flex-shrink: 0;
    gap: var(--space-xs);
  }
  .ap-quick-actions .ap-chip {
    min-height: var(--ap-control-sm);
    padding: 0 var(--space-md);
    font-size: var(--ap-text-sm);
  }
  .ap-quick-added {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs-sm);
    color: var(--ap-sage);
    font-size: var(--ap-text-sm);
    font-weight: var(--ap-weight-semibold);
  }
  .ap-quick-added svg {
    width: var(--ap-icon-md);
    height: var(--ap-icon-md);
  }
  /* The last row of the popover: the full catalog search for the typed text. */
  .ap-quick-more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    min-height: var(--ap-control-md);
    padding: var(--space-sm) 0;
    color: var(--ap-ink);
    font-size: var(--ap-text-sm);
    font-weight: var(--ap-weight-semibold);
  }
  .ap-quick-more svg {
    flex-shrink: 0;
    width: var(--ap-icon-md);
    height: var(--ap-icon-md);
    transition: transform var(--ap-dur-hover) var(--ap-ease);
  }
  .ap-quick-more:hover svg {
    transform: translateX(var(--space-2xs));
  }
  .ap-quick-empty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-lg) 0;
    color: var(--ap-ink-soft);
    font-size: var(--ap-text-sm);
  }
  /* A list of quick items (shelf start, welcome) and the sticky bar under it that leads on. */
  .ap-quick-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
    gap: 0 var(--space-xl);
  }
  /* Popovers and stacked lists give the full name its own row, keeping similar editions distinguishable. */
  .ap-quick-pop .ap-quick-item,
  .ap-quick-list[data-stacked] .ap-quick-item {
    flex-direction: column;
    align-items: stretch;
  }
  .ap-quick-pop .ap-quick-actions,
  .ap-quick-list[data-stacked] .ap-quick-actions {
    flex-wrap: wrap;
    padding-left: var(--space-4xl);
  }
  .ap-quick-pop .ap-quick-perfume strong,
  .ap-quick-list[data-stacked] .ap-quick-perfume strong {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  /* The 1–10 scale under a stacked item: ten equal buttons in a row, two rows of five on phones. */
  .ap-quick-list[data-stacked] .ap-quick-scale {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    max-width: var(--ap-measure-sm);
  }
  .ap-quick-scale .ap-chip {
    justify-content: center;
    padding: 0;
    font-variant-numeric: tabular-nums;
  }
  .ap-quick-bar .ap-button {
    flex: none;
  }
  /* The bar is a wine surface (data-surface="wine"), so the primary button inside it stays readable. */
  .ap-quick-bar {
    position: sticky;
    bottom: var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-sm-md) var(--space-sm-md) var(--space-sm-md) var(--space-lg-xl);
    border-radius: var(--ap-pill);
    background: var(--ap-paper);
    color: var(--ap-ink);
    box-shadow: var(--ap-shadow-lg);
    animation: ap-rise var(--ap-dur-state) var(--ap-ease);
  }
  @media (max-width: 740px) {
    /* This belongs to the component layer: layout rules cannot override its absolute desktop position. */
    .ap-header-find .ap-quick-pop {
      position: fixed;
      top: calc(var(--ap-header) + var(--space-xs));
      right: var(--ap-gutter);
      left: var(--ap-gutter);
      width: auto;
    }
    .ap-quick-list {
      grid-template-columns: 1fr;
    }
    .ap-quick-list[data-stacked] .ap-quick-scale {
      grid-template-columns: repeat(5, minmax(0, 1fr));
      max-width: none;
    }
    .ap-quick-item {
      flex-direction: column;
      align-items: stretch;
    }
    .ap-quick-actions {
      flex-wrap: wrap;
      padding-left: var(--space-4xl);
    }
    .ap-quick-empty {
      flex-direction: column;
      align-items: flex-start;
    }
  }
  @media (max-width: 1023px), (pointer: coarse) {
    .ap-quick-find .ap-search-field input {
      min-height: var(--ap-touch);
      font-size: var(--ap-input-text);
    }
    .ap-quick-actions .ap-chip {
      min-height: var(--ap-touch);
    }
  }
}

/* Sections: reusable page blocks assembled from components (stage, section head, grids, rack, feed…). */
/* Per-frame showcase values written by initShowcase stay on their element. */
@property --sc-transform { syntax: '*'; inherits: false; }
@property --sc-opacity { syntax: '*'; inherits: false; }
@property --sc-visibility { syntax: '*'; inherits: false; }
@property --sc-layer { syntax: '*'; inherits: false; }
@layer sections {
  .ap-breadcrumbs { padding-block: var(--space-md); color: var(--ap-muted); font-size: var(--ap-text-xs); line-height: var(--ap-leading-relaxed); }
  .ap-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
  .ap-breadcrumbs li { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; overflow-wrap: anywhere; }
  .ap-breadcrumbs li + li::before { content: '/'; color: var(--ap-faint); }
  .ap-breadcrumbs a { color: var(--ap-ink-soft); text-underline-offset: var(--ap-underline-offset); }
  .ap-breadcrumbs a:hover { color: var(--ap-accent); }

  /* Stage: the wine band right under the header; content keeps the page width. */
  .ap-stage {
    position: relative;
    container-type: inline-size;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
    margin-top: calc(var(--ap-main-top) * -1);
    margin-bottom: var(--space-3xl);
    padding-top: calc(var(--space-3xl) + var(--ap-header));
    --ap-stage-bottom: calc(var(--space-3xl) + var(--ap-wave-room, 0px));
    padding-bottom: var(--ap-stage-bottom);
    background: var(--ap-wine-glow);
    isolation: isolate;
  }
  /* Decor and cover: background layers behind the stage content; isolation keeps them above the base canvas. */
  .ap-stage-cover {
    position: absolute;
    inset: 0;
    z-index: var(--z-back);
    overflow: hidden;
    pointer-events: none;
  }
  .ap-stage-cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
  }
  .ap-stage-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ap-cover-fade);
  }
  .ap-stage-decor {
    position: absolute;
    inset: 0;
    z-index: var(--z-below);
    overflow: hidden;
    pointer-events: none;
  }
  .ap-stage[data-surface='paper'] {
    background: var(--ap-surface);
  }
  .ap-stage[data-size='compact'] {
    padding-top: calc(var(--space-2xl) + var(--ap-header));
    --ap-stage-bottom: calc(var(--space-xl) + var(--ap-wave-room, 0px));
  }
  .ap-stage[data-size='hero'] {
    --ap-stage-bottom: calc(var(--space-4xl) + var(--ap-wave-room, 0px));
  }
  /* One opaque paper edge cuts the scene itself. Time-based drift works without scroll-timeline support. */
  .ap-wave-edge {
    --ap-wave-room: calc(var(--ap-wave-h) * 0.7);
    position: relative;
    overflow-x: clip;
  }
  .ap-stage.ap-wave-edge { margin-bottom: var(--space-2xl); }
  /* A wine band rising out of paper (the perfume band): the same silhouette above it, in the band's own colour. */
  .ap-wave-top {
    position: relative;
    overflow-x: clip;
  }
  .ap-wave-edge::after,
  .ap-wave-top::after {
    content: '';
    position: absolute;
    left: 0;
    width: 200%;
    height: var(--ap-wave-h);
    mask: var(--ap-wave) 0 0 / 50% 100% repeat-x;
    pointer-events: none;
    animation: ap-wave-drift var(--ap-dur-wave) linear infinite;
  }
  .ap-wave-edge::after {
    bottom: -1px;
    background: var(--ap-page);
  }
  .ap-wave-top::after {
    bottom: calc(100% - 1px);
    background: var(--ap-paper);
  }
  @keyframes ap-wave-drift { to { translate: -50% 0; } }
  /* Kept explicit: the wave scenario checks animation-name: none. */
  @media (prefers-reduced-motion: reduce) {
    .ap-wave-edge::after,
    .ap-wave-top::after { animation: none; }
  }
  /* Shared editorial hero for the portrait and its history. */
  .ap-editorial-cover {
    position: relative;
    isolation: isolate;
    min-height: 590px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .ap-editorial-art {
    position: absolute;
    inset: calc((var(--ap-header) + var(--space-3xl)) * -1) calc(50% - 50vw) calc(var(--ap-stage-bottom) * -1);
    z-index: var(--z-below);
    overflow: hidden;
  }
  .ap-editorial-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
  .ap-editorial-art::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ap-cover-fade-editorial);
  }
  .ap-editorial-copy { position: relative; width: 57%; padding: var(--space-xl) 0 var(--space-4xl); }
  .ap-editorial-title { font-size: var(--ap-text-trend-hero); line-height: var(--ap-leading-display); letter-spacing: var(--ap-tracking-tightest); font-weight: var(--ap-weight-regular); margin: var(--space-2xl) 0; }
  .ap-editorial-intro { font-size: var(--ap-text-2xl); color: var(--ap-ink-soft); line-height: var(--ap-leading-loose); }
  .ap-editorial-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-xl); border-top: 1px solid var(--ap-line); padding-top: var(--space-xl); font-size: var(--ap-text-xs); }
  .ap-editorial-footer > span { font-size: var(--ap-text-4xl); letter-spacing: var(--ap-tracking-caps); }
  .ap-editorial-footer i { display: block; font-size: var(--ap-text-chart); font-style: normal; letter-spacing: var(--ap-tracking-wide); color: var(--ap-muted); margin-top: var(--space-xs); }
  .ap-editorial-footer p { color: var(--ap-ink-soft); display: flex; flex-wrap: wrap; gap: var(--space-lg); }
  .ap-editorial-footer a { display: flex; align-items: center; gap: var(--space-sm); }
  @media (max-width: 740px) {
    .ap-editorial-cover { min-height: 650px; justify-content: start; }
    .ap-editorial-art img { object-position: 66% center; }
    .ap-editorial-art::after { background: var(--ap-cover-fade-strong); }
    .ap-editorial-copy { width: 100%; padding: var(--space-md) 0; }
    .ap-editorial-title { font-size: var(--ap-text-hero); max-width: 8ch; }
    .ap-editorial-intro { max-width: 24ch; font-size: var(--ap-text-md); }
    .ap-editorial-footer { margin-top: auto; gap: var(--space-lg); }
    .ap-editorial-footer > p { order: 3; width: 100%; margin: 0; }
  }
  .ap-stage-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-xl);
    flex-wrap: wrap;
  }
  .ap-stage-head > * {
    min-width: 0;
    max-width: 100%;
  }
  .ap-stage-title {
    max-width: 62ch;
  }
  /* One title size on every page (10 October 2026: shelf, diary and catalog match the recommendations). */
  .ap-stage-title h1 {
    font-size: var(--ap-text-stage);
    line-height: var(--ap-leading-none);
    letter-spacing: var(--ap-tracking-tighter);
  }
  .ap-stage-title p {
    margin-top: var(--space-md);
    color: var(--ap-ink-soft);
    font-size: var(--ap-text-xl);
    line-height: var(--ap-leading-relaxed);
  }
  .ap-stage-aside {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
  }
  /* The back button's own padding would push it off the page edge the text keeps. */
  .ap-stage-back .ap-back {
    margin-left: calc(var(--space-sm) * -1);
  }
  .ap-stage-nav .ap-tabs {
    margin-bottom: 0;
  }
  /* Paper section heading */
  .ap-section {
    container-type: inline-size;
  }
  .ap-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-bottom: var(--space-lg);
  }
  .ap-section-head h2 {
    font-size: var(--ap-text-5xl);
    letter-spacing: var(--ap-tracking-tight);
  }
  /* Small capitals over an editorial heading (landing, Trend): muted on paper, gold on wine. */
  .ap-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--ap-eyebrow);
    font-size: var(--ap-text-xs);
    line-height: var(--ap-leading-relaxed);
    letter-spacing: var(--ap-tracking-caps);
    text-transform: uppercase;
  }
  .ap-help,
  .ap-muted-text {
    color: var(--ap-muted);
    font-size: var(--ap-text-sm);
    line-height: var(--ap-leading-normal);
  }
  /* Columns that fold on narrow screens */
  .ap-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: var(--space-3xl) var(--space-4xl);
    align-items: start;
  }
  /* Rack: groups side by side when short, a wide group takes the whole row. The ledge is painted under every
  grid row, so wrapped bottles stand on their own shelf. */
  .ap-rack {
    --rack-h: 132px;
    --rack-slot: 100px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: var(--space-2xl) var(--space-3xl);
  }
  .ap-rack-group[data-wide] {
    grid-column: 1 / -1;
  }
  .ap-rack-group h2 {
    margin-bottom: var(--space-md);
    font-size: var(--ap-text-xl);
    letter-spacing: var(--ap-tracking-snug);
  }
  .ap-rack-shelf {
    /* A row is the bottle plus the plaque touch target; the ledge (top lip, front, shade) is painted at its foot. */
    --row: calc(var(--rack-h) + var(--ap-touch));
    --ledge: 28px;
    --ledge-lip: 2px;
    --ledge-shade: 4px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--rack-slot), 1fr));
    grid-auto-rows: var(--row);
    column-gap: var(--space-md);
    background: repeating-linear-gradient(
      to bottom,
      transparent 0 calc(var(--row) - var(--ledge)),
      var(--ap-ledge-top) calc(var(--row) - var(--ledge)) calc(var(--row) - var(--ledge) + var(--ledge-lip)),
      var(--ap-ledge-front) calc(var(--row) - var(--ledge) + var(--ledge-lip)) calc(var(--row) - var(--ledge-shade)),
      var(--ap-ledge-shade) calc(var(--row) - var(--ledge-shade)) var(--row)
    );
  }
  .ap-rack-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    padding-bottom: var(--space-2xl);
  }
  .ap-rack-link {
    display: block;
    border-radius: var(--ap-radius-md);
  }
  .ap-rack-item .ap-plate {
    height: var(--rack-h);
    width: auto;
    aspect-ratio: 3 / 4;
    transition: transform var(--ap-dur-state) var(--ap-ease-out);
  }
  .ap-rack-item .ap-plate img {
    width: 84%;
    height: 84%;
  }
  .ap-rack-link:hover .ap-plate,
  .ap-rack-link:focus-visible .ap-plate {
    transform: translateY(calc(var(--ap-lift-lg) * -1));
  }
  .ap-rack-item[data-group='wishlist'] .ap-plate {
    opacity: var(--ap-opacity-dim);
  }
  /* The paper label is centred on its bottle inside a full-size transparent touch target. */
  .ap-plaque {
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: var(--z-raised);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--ap-thumb-lg);
    min-height: var(--ap-touch);
    padding: 0 var(--space-xs);
    border: 0;
    border-radius: var(--ap-radius-lg);
    background: transparent;
    color: var(--ap-ink);
    font: var(--ap-weight-semibold) var(--ap-text-sm)/var(--ap-leading-none) var(--ap-body);
    font-variant-numeric: tabular-nums;
    box-shadow: none;
    transform: translateX(-50%);
    transition: transform var(--ap-dur-press) var(--ap-ease-quart);
  }
  .ap-plaque-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-width: var(--ap-control-lg);
    min-height: var(--ap-control-xs);
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--ap-line-strong);
    border-radius: var(--ap-radius-2xs);
    background: var(--ap-paper);
    translate: 0 var(--space-xs-sm);
    transition:
      color var(--ap-dur-state) var(--ap-ease-out),
      background-color var(--ap-dur-state) var(--ap-ease-out);
  }
  .ap-plaque:hover .ap-plaque-label,
  .ap-plaque[aria-expanded='true'] .ap-plaque-label {
    border-color: var(--ap-accent);
    background: var(--ap-accent);
    color: var(--ap-accent-ink);
  }
  .ap-plaque:active {
    transform: translateX(-50%) scale(var(--ap-press-scale));
  }
  .ap-plaque svg {
    width: var(--ap-icon-xs);
    height: var(--ap-icon-xs);
    fill: currentColor;
  }
  .ap-plaque-empty {
    font-size: var(--ap-text-xs);
    font-weight: var(--ap-weight-medium);
  }
  .ap-plaque.is-saved {
    animation: ap-plaque-saved var(--ap-dur-enter) var(--ap-ease-out);
  }
  @keyframes ap-plaque-saved {
    40% {
      transform: translateX(-50%) scale(var(--ap-pop-scale));
    }
  }
  /* Showcase: plates on a 3D ribbon; the front one is the current perfume. */
  .ap-showcase {
    --sc-h: 340px;
    display: grid;
    gap: var(--space-lg);
    margin-top: var(--space-md);
    border-radius: var(--ap-radius-lg);
    outline-offset: var(--ap-focus-offset-lg);
  }
  .ap-showcase-stage {
    position: relative;
    height: calc(var(--sc-h) + var(--space-2xl-3xl));
    overflow: hidden;
    perspective: 1100px;
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
  }
  .ap-showcase-stage:active {
    cursor: grabbing;
  }
  .ap-showcase-track {
    position: absolute;
    top: var(--space-lg-xl);
    left: 50%;
    transform-style: preserve-3d;
  }
  /* initShowcase passes the frame as --sc-transform/--sc-opacity/--sc-visibility/--sc-layer. */
  .ap-showcase-item {
    position: absolute;
    top: 0;
    left: calc(var(--sc-h) * -0.4);
    z-index: var(--sc-layer, auto);
    width: calc(var(--sc-h) * 0.8);
    visibility: var(--sc-visibility, visible);
    opacity: var(--sc-opacity, 1);
    transform: var(--sc-transform, none);
    will-change: transform, opacity;
    -webkit-user-drag: none;
  }
  /* Bottles stand right on the paper, like the shelf cards: page-tone plate, no edge or shadow. */
  .ap-showcase-item .ap-plate {
    height: var(--sc-h);
    aspect-ratio: auto;
    background: var(--ap-paper);
    box-shadow: none;
  }
  .ap-showcase-item img {
    pointer-events: none;
  }
  .ap-showcase-bar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-lg);
  }
  .ap-showcase-bar .ap-icon-button {
    border: 1px solid var(--ap-line-strong);
    color: var(--ap-ink);
  }
  .ap-showcase-info {
    display: grid;
    justify-items: center;
    gap: var(--space-2xs);
    text-align: center;
  }
  .ap-showcase-name {
    display: grid;
    font-size: var(--ap-text-3xl);
    font-weight: var(--ap-weight-semibold);
    letter-spacing: var(--ap-tracking-tight);
  }
  .ap-showcase-name small {
    color: var(--ap-ink-soft);
    font-size: var(--ap-text-sm);
    font-weight: var(--ap-weight-regular);
    letter-spacing: 0;
  }
  .ap-showcase-name:hover {
    text-decoration: underline;
    text-underline-offset: var(--ap-underline-offset-lg);
  }
  .ap-showcase-meta,
  .ap-showcase-count {
    color: var(--ap-ink-soft);
    font-size: var(--ap-text-sm);
  }
  .ap-showcase-meta b {
    color: var(--ap-ink);
  }
  .ap-feed[data-size='compact'] .ap-feed-month h2 {
    display: none;
  }
  @container (max-width: 640px) {
    .ap-stage-aside {
      width: 100%;
      justify-content: space-between;
    }
    .ap-rack {
      --rack-h: 104px;
      --rack-slot: 76px;
    }
    .ap-showcase {
      --sc-h: 240px;
    }
  }
  /* Sticky second-level menu (subnav() in sections.js): a wine row under the site header that stays while reading;
  the current section is a filled pill like a chosen chip, so the row keeps its height. Scrolls sideways when the
  sections do not fit. */
  .ap-subnav {
    position: sticky;
    top: var(--ap-header);
    z-index: calc(var(--z-header) - 1);
    padding-block: var(--space-xs-sm);
    background: var(--ap-paper);
    box-shadow: var(--ap-hairline-below);
  }
  .ap-stage-with-subnav, .ap-page-subnav {
    --ap-page-nav-padding: var(--space-md);
    --ap-page-nav-height: calc(var(--ap-touch) + var(--ap-page-nav-padding) * 2);
    --ap-page-nav-edge-room: calc(var(--ap-wave-h) + var(--space-xl));
  }
  .ap-stage.ap-stage-with-subnav {
    margin-bottom: 0;
    --ap-stage-bottom: calc(var(--space-xl) + var(--ap-page-nav-height) + var(--ap-page-nav-edge-room));
  }
  .ap-page-subnav {
    padding-block: var(--ap-page-nav-padding);
    margin-top: calc((var(--ap-page-nav-height) + var(--ap-page-nav-edge-room)) * -1);
    margin-bottom: calc(var(--space-2xl) + var(--ap-page-nav-edge-room));
    background: transparent;
    box-shadow: none;
    transition: background var(--ap-dur-state) var(--ap-ease-out);
  }
  .ap-page-subnav.is-stuck { background: var(--ap-paper); }
  .ap-subnav-track::-webkit-scrollbar { display: none; }
  .ap-subnav-track > a[hidden] { display: none; }
  .ap-subnav svg {
    width: var(--ap-icon-md);
    height: var(--ap-icon-md);
  }
  .ap-guest-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
    padding: var(--space-lg) var(--space-lg-xl);
    border-radius: var(--ap-radius-lg);
    background: var(--ap-accent-soft);
    font-size: var(--ap-text-sm);
  }
  @media (max-width: 740px) {
    .ap-stage-head {
      margin-bottom: var(--space-xl);
    }
    .ap-subnav-track > a {
      padding: 0 var(--space-md);
      font-size: var(--ap-text-sm);
    }
    .ap-section-head h2 {
      font-size: var(--ap-text-3xl);
    }
    .ap-guest-note {
      flex-direction: column;
      align-items: flex-start;
    }
  }
  @media (max-width: 1023px), (pointer: coarse) {
    .ap-subnav-track {
      min-height: var(--ap-touch);
    }
    .ap-subnav-track > a {
      min-height: var(--ap-touch);
    }
  }
}

/* Guest landing; motion belongs to the photograph, never the text. */
@layer pages {
  /* Guest home (landing.js): a photographic wine first screen, followed by paper sections. */
  .ap-landing {
    display: grid;
    gap: var(--space-5xl);
  }
  .ap-landing-hero {
    position: relative;
    display: grid;
    min-height: max(760px, 100svh);
    isolation: isolate;
    margin-top: calc(var(--ap-main-top) * -1);
    padding-block: calc(var(--space-3xl) + var(--ap-header)) calc(var(--space-2xl) + var(--ap-wave-room));
    overflow: hidden;
    background: var(--ap-paper);
  }
  .ap-landing-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: var(--z-raised);
    background: var(--ap-landing-scrim);
    pointer-events: none;
  }
  .ap-landing-hero::after { z-index: var(--z-above); }
  /* The entire photographic scene sits behind the copy. */
  .ap-landing-hero-grid {
    position: relative;
    z-index: var(--z-above);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
  }
  .ap-landing-copy { max-width: var(--ap-measure); }
  .ap-landing-copy h1 {
    max-width: 11ch;
    font-weight: var(--ap-weight-regular);
    font-size: var(--ap-text-hero);
    line-height: var(--ap-leading-display);
    letter-spacing: var(--ap-tracking-tighter);
  }
  .ap-landing-copy .ap-benefits { margin-top: var(--space-3xl); }
  .ap-landing-copy .ap-actions {
    margin-top: var(--space-3xl);
    gap: var(--space-xl);
  }
  .ap-landing-photo {
    position: absolute;
    inset: 0;
    z-index: var(--z-back);
    overflow: hidden;
    pointer-events: none;
  }
  .ap-landing-photo-drift {
    position: absolute;
    inset: -3%;
    transform: translate3d(var(--photo-x, 0%), var(--photo-y, 0%), 0);
    transition: transform var(--ap-dur-enter) var(--ap-ease-quart);
  }
  .ap-landing-photo picture { display: block; width: 100%; height: 100%; }
  .ap-landing-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
  }
  .ap-landing-title {
    max-width: 18ch;
    font-size: var(--ap-text-feature);
    line-height: var(--ap-leading-tight);
    letter-spacing: var(--ap-tracking-tighter);
  }
  .ap-landing-lead {
    max-width: 52ch;
    margin-top: var(--space-lg);
    color: var(--ap-muted);
    font-size: var(--ap-text-xl);
  }
  .ap-landing-section.is-hidden {
    opacity: 0;
    transform: translateY(var(--ap-rise-lg));
  }
  .ap-landing-section.is-in {
    opacity: 1;
    transform: none;
    transition:
      opacity var(--ap-dur-enter) var(--ap-ease-out),
      transform var(--ap-dur-enter) var(--ap-ease-out);
  }
  /* Catalog search for guests */
  .ap-landing-search {
    max-width: var(--ap-measure-md);
    margin: var(--space-2xl) 0 var(--space-lg);
  }
  .ap-landing-results:not(:empty) {
    margin-top: var(--space-xl);
  }
  .ap-landing-empty {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--space-xl);
    max-width: var(--ap-measure-md);
    margin-top: var(--space-xl);
    padding: var(--space-xl);
    border: 1px dashed var(--ap-line-strong);
    border-radius: var(--ap-radius-lg);
  }
  .ap-landing-empty .ap-empty-icon {
    margin: 0;
  }
  .ap-landing-empty p {
    margin-top: var(--space-xs);
    color: var(--ap-ink-soft);
  }
  @media (prefers-reduced-motion: no-preference) {
    .ap-landing-copy > * {
      animation: ap-landing-rise var(--ap-dur-spin) var(--ap-ease-out) both;
    }
    .ap-landing-copy > :nth-child(2) {
      animation-delay: calc(var(--ap-dur-stagger) / 2);
    }
    .ap-landing-copy > :nth-child(3) {
      animation-delay: var(--ap-dur-stagger);
    }
    .ap-landing-photo img {
      animation: ap-landing-photo-breathe var(--ap-dur-wave) var(--ap-ease-in-out) infinite alternate;
      animation-play-state: paused;
    }
    .ap-landing-photo.is-moving img { animation-play-state: running; }
  }
  @keyframes ap-landing-photo-breathe {
    from { transform: scale(1); }
    to { transform: scale(var(--ap-hover-scale)); }
  }
  @keyframes ap-landing-rise {
    from {
      opacity: 0;
      transform: translateY(var(--ap-rise-lg));
    }
  }
  .ap-landing-section-head .ap-landing-title { margin-top: var(--space-md); }
  .ap-landing-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3xl);
    margin: var(--space-3xl) 0 0;
    padding: 0;
    list-style: none;
  }
  .ap-landing-steps li { border-top: 1px solid var(--ap-line); padding-top: var(--space-xl); }
  .ap-landing-steps li > span { color: var(--ap-trend-metal); font-size: var(--ap-text-sm); }
  .ap-landing-steps h3 { margin: var(--space-xl) 0 var(--space-md); font-size: var(--ap-text-4xl); font-weight: var(--ap-weight-medium); }
  .ap-landing-steps p { color: var(--ap-muted); line-height: var(--ap-leading-loose); }
  .ap-landing-story { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); background: var(--ap-trend-ivory); border-radius: var(--ap-radius-xl); overflow: hidden; }
  .ap-landing-story-art { min-height: 480px; }
  .ap-landing-story-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .ap-landing-story-copy { padding: var(--space-3xl); align-self: center; }
  .ap-landing-story-copy h2 { margin-top: var(--space-lg); font-size: var(--ap-text-feature-sm); font-weight: var(--ap-weight-regular); }
  .ap-landing-story-copy > p:not(.ap-eyebrow) { margin-top: var(--space-xl); color: var(--ap-muted); line-height: var(--ap-leading-loose); }
  .ap-landing-story-copy .ap-actions { margin-top: var(--space-2xl); }
  .ap-landing-story-note { font-size: var(--ap-text-xs); }
  .ap-landing-catalog { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl) var(--space-3xl); padding-bottom: var(--space-3xl); }
  .ap-landing-catalog-art { grid-column: 1 / -1; max-height: 320px; overflow: hidden; border-radius: var(--ap-radius-xl); }
  .ap-landing-catalog-art img { width: 100%; height: 100%; max-height: 320px; object-fit: cover; }
  .ap-landing-catalog h2 { margin-top: var(--space-md); }
  .ap-landing-catalog .ap-text-link { display: inline-flex; margin-top: var(--space-xl); }
  .ap-landing-catalog .ap-landing-search { margin-top: var(--space-xl); }
  /* Reference indexes (/notes/, /accords/, /brands/, /perfumers/): a quiet row of links under «Открыть каталог». */
  .ap-landing-reference { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
  .ap-landing-catalog .ap-landing-reference .ap-text-link { margin-top: var(--space-md); }
  .ap-landing-results, .ap-landing-empty { grid-column: 1 / -1; }
  @media (max-width: 1023px) {
    .ap-landing-hero { min-height: max(740px, 100svh); }
    .ap-landing-copy h1 { font-size: var(--ap-text-stage); }
    .ap-landing-story { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .ap-landing-story-art { min-height: 360px; }
    .ap-landing-story-copy { padding: var(--space-xl); }
    .ap-landing-steps { gap: var(--space-xl); }
  }
  @media (max-width: 740px) {
    .ap-landing { gap: var(--space-4xl); }
    .ap-landing-hero {
      min-height: 100svh;
      padding-top: calc(var(--space-2xl) + var(--ap-header));
      --photo-room: max(360px, 42svh);
      padding-bottom: var(--photo-room);
    }
    .ap-landing-hero::before { background: var(--ap-landing-scrim-mobile); }
    .ap-landing-photo img { object-position: 60% bottom; }
    .ap-landing-copy h1 { font-size: var(--ap-text-stage); max-width: 11ch; }
    .ap-landing-copy { max-width: none; }
    .ap-landing-copy .ap-benefits { margin-top: var(--space-2xl); }
    .ap-landing-copy .ap-actions { gap: var(--space-lg); margin-top: var(--space-2xl); }
    .ap-landing-steps, .ap-landing-story, .ap-landing-catalog { grid-template-columns: minmax(0, 1fr); }
    .ap-landing-steps { gap: var(--space-xl); }
    .ap-landing-steps h3 { margin-top: var(--space-md); }
    .ap-landing-story-art { min-height: 0; aspect-ratio: 3 / 2; }
    .ap-landing-story-copy { padding: var(--space-2xl) var(--space-xl); }
    .ap-landing-story-copy h2 { font-size: var(--ap-text-feature-sm); }
    .ap-landing-empty { grid-template-columns: 1fr; gap: var(--space-md); }
    .ap-landing-catalog .ap-landing-search { margin-top: 0; }
  }
}

/* Page styles and their responsive variants: shelf. */
@layer pages {
  /* The collection and next discovery share a row when their container has room. */
  .ap-shelf-layout {
    container: shelf / inline-size;
  }
  .ap-shelf-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-2xl);
    align-items: start;
  }
  /* Stage controls: status tabs on the left, the view switch and the grouping menu on the right. */
  .ap-shelf-bar {
    margin-bottom: var(--space-xl);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-lg) var(--space-xl);
    flex-wrap: wrap;
    width: 100%;
  }
  .ap-shelf-status {
    max-width: 100%;
    min-width: 0;
    display: flex;
    gap: var(--space-xl);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ap-shelf-status button {
    flex-shrink: 0;
    position: relative;
    padding: var(--space-sm) 0;
    color: var(--ap-ink-soft);
    font-size: var(--ap-text-xl);
    font-weight: var(--ap-weight-medium);
    white-space: nowrap;
    transition: color var(--ap-dur-hover) var(--ap-ease-quart);
  }
  .ap-shelf-status button::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--ap-stroke-bold);
    border-radius: var(--ap-radius-2xs);
    background: var(--ap-ink);
    transform: scaleX(0);
    transition: transform var(--ap-dur-state) var(--ap-ease-out);
  }
  .ap-shelf-status button:hover {
    color: var(--ap-ink);
  }
  .ap-shelf-status button[aria-pressed='true'] {
    color: var(--ap-ink);
    font-weight: var(--ap-weight-semibold);
  }
  .ap-shelf-status button[aria-pressed='true']::after {
    transform: none;
  }
  .ap-shelf-tools .ap-segmented button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs-sm);
  }
  /* Quick add, grouping and «Добавить» stay on one line beside the tabs; on phones the search takes its own row. */
  .ap-shelf-tools {
    display: flex;
    align-items: center;
    gap: var(--space-md);
  }
  .ap-shelf-tools .ap-quick-find {
    width: 260px;
  }
  .ap-shelf-tools > :not(.ap-quick-find) {
    flex: none;
  }
  /* Statistics: liked against disliked, two panels side by side above the shelf. */
  .ap-shelf-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
    margin-top: var(--space-4xl);
  }
  .ap-shelf-stat {
    display: grid;
    align-content: start;
    gap: var(--space-md);
    padding: var(--space-xl);
    border-radius: var(--ap-radius-xl);
    background: var(--ap-sunk);
  }
  .ap-shelf-stat[data-kind='liked'] {
    background: var(--ap-accent-soft);
  }
  .ap-shelf-stat h3 {
    color: var(--ap-muted);
    font-size: var(--ap-text-sm);
    font-weight: var(--ap-weight-medium);
  }
  .ap-shelf-stat-big {
    display: flex;
    align-items: baseline;
    gap: var(--space-md);
    flex-wrap: wrap;
  }
  .ap-shelf-stat-big b {
    font-size: var(--ap-text-5xl);
    letter-spacing: var(--ap-tracking-tight);
  }
  .ap-shelf-stat-big span {
    color: var(--ap-ink-soft);
  }
  .ap-shelf-stat-notes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs-sm) var(--space-lg);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ap-shelf-stat-notes li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs-sm);
  }
  .ap-shelf-stat-notes .ap-vote-icon {
    width: var(--ap-icon);
    height: var(--ap-icon);
    color: var(--ap-muted);
  }
  .ap-shelf-stat-notes small {
    color: var(--ap-muted);
    font-size: var(--ap-text-xs);
  }
  .ap-shelf-stat .ap-accord {
    background: var(--ap-surface);
  }
  /* Let readable card widths choose the column count beside the recommendations. */
  .ap-shelf-main .ap-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
    gap: var(--space-xl) var(--space-md);
  }
  .ap-shelf-main { min-width: 0; }
  /* Stretch the link, so ratings share a baseline even when titles use different line counts. */
  .ap-shelf-main .ap-card-link { flex: 1; }
  .ap-shelf-main .ap-card h3 {
    font-size: var(--ap-text-base);
  }
  /* The status tab already says where a card stands. */
  .ap-shelf-main .ap-card-mine {
    display: none;
  }
  .ap-shelf-main .ap-empty {
    padding-block: var(--space-3xl);
  }
  /* Shelf bottles stand right on the paper: the plate takes the page tone, white photos melt into it, no edge or shadow. */
  .ap-shelf-main .ap-plate {
    background: var(--ap-paper);
    box-shadow: none;
  }
  .ap-shelf-next {
    position: sticky;
    top: calc(var(--ap-header) + var(--space-xl));
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    min-width: 0;
    padding: var(--space-xl);
    border-radius: var(--ap-radius-xl);
    background: var(--ap-surface);
    box-shadow: var(--ap-ring);
    color: var(--ap-ink);
  }
  .ap-shelf-next h2 {
    color: var(--ap-muted);
    font-size: var(--ap-text-base);
    font-weight: var(--ap-weight-medium);
  }
  .ap-shelf-next-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    min-height: var(--ap-control-md);
    flex-wrap: wrap;
  }
  .ap-shelf-next-head h2 { white-space: nowrap; }
  .ap-shelf-next-head .ap-slider-nav { flex-shrink: 0; margin-left: auto; }
  .ap-shelf-next-link {
    display: grid;
    gap: var(--space-md);
    color: inherit;
    text-decoration: none;
  }
  /* The bottle photo melts into the white card: no plate tone, edge or shadow. */
  .ap-shelf-next-link .ap-plate {
    aspect-ratio: 4 / 3.4;
    background: transparent;
    box-shadow: none;
  }
  /* Pinned to the plate: as a grid item the photo's 80% height resolved against the row and the bottom was cut off. */
  .ap-shelf-next-link .ap-plate img {
    position: absolute;
    inset: 10%;
  }
  .ap-shelf-next-link:hover img {
    translate: 0 calc(var(--ap-lift-lg) * -1);
  }
  .ap-shelf-next h3 {
    font-size: var(--ap-text-5xl);
    line-height: var(--ap-leading-tight);
    letter-spacing: var(--ap-tracking-tight);
  }
  .ap-shelf-next h3 span {
    display: block;
    margin-top: var(--space-xs);
    color: var(--ap-muted);
    font-size: var(--ap-text-base);
    font-weight: var(--ap-weight-regular);
    letter-spacing: 0;
  }
  .ap-shelf-next p {
    color: var(--ap-ink-soft);
  }
  .ap-shelf-next-why {
    padding-top: var(--space-md);
    border-top: 1px solid var(--ap-line);
  }
  .ap-shelf-next-why h4 {
    margin-bottom: var(--space-sm);
    color: var(--ap-muted);
    font-size: var(--ap-text-sm);
    font-weight: var(--ap-weight-medium);
  }
  .ap-shelf-next-why ul {
    display: grid;
    gap: var(--space-sm);
    margin: 0;
    padding: 0;
    color: var(--ap-ink-soft);
    font-size: var(--ap-text-md);
    line-height: var(--ap-leading-normal);
    list-style: none;
  }
  .ap-shelf-next-why li {
    display: grid;
    grid-template-columns: var(--ap-icon-xl) 1fr;
    gap: var(--space-sm);
  }
  .ap-shelf-next-why svg {
    width: var(--ap-icon-xl);
    height: var(--ap-icon-xl);
    padding: var(--space-xs);
    border-radius: var(--ap-round);
    background: var(--ap-accent-soft);
    color: var(--ap-accent);
  }
  .ap-shelf-next .ap-rec-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
    margin-top: auto;
  }
  .ap-shelf-next > .ap-text-link {
    align-self: flex-start;
    font-size: var(--ap-text-md);
  }
  /* First steps on an empty shelf */
  .ap-start {
    display: grid;
    gap: var(--space-lg);
  }
  .ap-start-intro h2 {
    font-size: var(--ap-text-4xl);
  }
  .ap-start-intro p {
    margin-top: var(--space-xs-sm);
    color: var(--ap-muted);
    max-width: 60ch;
  }
  .ap-start-label {
    margin-top: var(--space-sm);
    color: var(--ap-muted);
    font: var(--ap-text-xs) var(--ap-body);
  }
  /* Rating popover: shelf.js measures the viewport and passes the position as --pop-x/--pop-y/--pop-max-h. */
  .ap-rate-pop {
    position: fixed;
    top: var(--pop-y, auto);
    left: var(--pop-x, auto);
    z-index: var(--z-popover);
    max-width: calc(100vw - var(--space-lg));
    max-height: var(--pop-max-h, none);
    overflow: auto;
    overscroll-behavior: contain;
    display: grid;
    justify-items: start;
    gap: var(--space-xs-sm);
    padding: var(--space-sm);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius-lg);
    background: var(--ap-surface);
    box-shadow: var(--ap-shadow-lg);
    animation: ap-rise var(--ap-dur-hover) var(--ap-ease);
  }
  .ap-rate-pop-row {
    display: grid;
    grid-template-columns: repeat(10, var(--ap-control-sm));
    gap: var(--space-xs);
  }
  .ap-rate-pop-row button {
    height: var(--ap-control-sm);
    border: 1px solid var(--ap-line-strong);
    border-radius: var(--ap-radius-xs);
    background: var(--ap-surface);
    color: var(--ap-ink-soft);
    font: var(--ap-weight-semibold) var(--ap-text-md) var(--ap-display);
  }
  .ap-rate-pop-row button:hover {
    border-color: var(--ap-muted);
    color: var(--ap-ink);
  }
  .ap-rate-pop-row button[aria-pressed='true'] {
    border-color: var(--ap-accent);
    background: var(--ap-accent);
    color: var(--ap-accent-ink);
  }
  .ap-rate-pop .ap-text-button {
    padding: 0 var(--space-2xs);
    font-size: var(--ap-text-xs);
  }
  .ap-card-groups {
    display: grid;
    gap: var(--space-2xl);
  }
  @media (max-width: 1100px) {
    .ap-shelf-split {
      grid-template-columns: minmax(0, 1fr) 240px;
      gap: var(--space-xl);
    }
    .ap-shelf-next {
      position: static;
    }
  }
  @container shelf (max-width: 900px) {
    .ap-shelf-split {
      grid-template-columns: minmax(0, 1fr);
    }
    .ap-shelf-next .ap-slide {
      display: grid;
      grid-template-columns: 200px minmax(0, 1fr);
      align-content: start;
      gap: var(--space-sm) var(--space-xl);
    }
    .ap-shelf-next .ap-slide > *,
    .ap-shelf-next .ap-slide h3 {
      grid-column: 2;
    }
    .ap-shelf-next .ap-slide > .ap-shelf-next-link {
      display: contents;
    }
    .ap-shelf-next .ap-slide .ap-plate {
      grid-column: 1;
      grid-row: 1 / span 5;
    }
  }
  @media (max-width: 740px) {
    .ap-shelf-main .ap-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ap-shelf-next {
      padding: var(--space-lg);
    }
    .ap-shelf-next .ap-slide {
      display: flex;
    }
    .ap-shelf-next .ap-slide > *,
    .ap-shelf-next .ap-slide h3 {
      grid-column: auto;
    }
    .ap-shelf-next .ap-slide > .ap-shelf-next-link {
      display: grid;
    }
    .ap-shelf-next .ap-slide .ap-plate {
      grid-row: auto;
    }
    .ap-shelf-tools {
      width: 100%;
      flex-wrap: wrap;
    }
    .ap-shelf-tools .ap-quick-find {
      flex: 1 1 100%;
      width: auto;
    }
    /* Outranks the catalog bar rule that gives every sort select its own row on phones. */
    .ap-shelf-bar .ap-shelf-tools .ap-filter-sort {
      flex: 1 1 0;
      min-width: 0;
    }
    .ap-shelf-stats {
      grid-template-columns: 1fr;
    }
    .ap-rate-pop-row {
      grid-template-columns: repeat(5, var(--ap-touch));
    }
    .ap-rate-pop-row button {
      height: var(--ap-touch);
    }
    .ap-shelf-status {
      gap: var(--space-lg);
    }
    .ap-shelf-status button {
      font-size: var(--ap-text-base);
    }
  }
  @media (max-width: 1023px), (pointer: coarse) {
    .ap-shelf-status button {
      min-height: var(--ap-touch);
    }
    .ap-rate-pop-row button {
      min-height: var(--ap-touch);
    }
  }
  @media (max-width: 420px) {
    .ap-shelf-tools .ap-segmented button {
      flex-direction: column;
      gap: var(--space-2xs);
    }
  }
  /* On short screens the multi-row toolbar would cover the shelf and its rating controls. */
  @media (max-height: 480px) {
    .ap-filterbar.ap-shelf-bar {
      position: static;
    }
  }
}

/* Page styles and their responsive variants: diary. */
@layer pages {
  /* Diary feed */
  .ap-feed {
    display: grid;
    gap: var(--space-2xl);
  }
  .ap-feed-month h2 {
    margin-bottom: var(--space-sm);
    font-size: var(--ap-text-xl);
  }
  .ap-entry {
    display: grid;
    grid-template-columns: var(--ap-control-xl) minmax(0, 1fr) auto;
    gap: var(--space-lg);
    padding: var(--space-lg) 0;
    border-top: 1px solid var(--ap-line);
  }
  .ap-entry-date b {
    display: block;
    font: var(--ap-weight-semibold) var(--ap-text-5xl)/var(--ap-leading-none) var(--ap-display);
    font-variant-numeric: tabular-nums;
  }
  .ap-entry-date small {
    color: var(--ap-faint);
    font: var(--ap-text-xs) var(--ap-body);
  }
  .ap-entry-body {
    display: grid;
    gap: var(--space-xs-sm);
    align-content: start;
  }
  .ap-entry-perfume {
    display: flex;
    align-items: center;
    gap: var(--space-sm-md);
    justify-self: start;
  }
  .ap-entry-perfume img {
    width: var(--ap-thumb-sm);
    height: var(--ap-thumb-sm);
    object-fit: contain;
    border-radius: var(--ap-radius-xs);
    background: var(--ap-sunk);
    mix-blend-mode: multiply;
  }
  .ap-entry-perfume span {
    display: grid;
    font-size: var(--ap-text-base);
    font-weight: var(--ap-weight-semibold);
    line-height: var(--ap-leading-snug);
  }
  .ap-entry-perfume small {
    color: var(--ap-muted);
    font: var(--ap-text-xs) var(--ap-body);
  }
  .ap-entry-perfume:hover span {
    text-decoration: underline;
    text-underline-offset: var(--ap-underline-offset);
  }
  .ap-entry-context {
    color: var(--ap-accent);
    font-size: var(--ap-text-sm);
    font-weight: var(--ap-weight-semibold);
  }
  .ap-entry-note {
    color: var(--ap-ink-soft);
    max-width: 64ch;
    white-space: pre-line;
  }
  .ap-entry-side {
    display: grid;
    justify-items: end;
    align-content: start;
    gap: var(--space-sm);
  }
  @media (max-width: 740px) {
    .ap-entry {
      grid-template-columns: var(--ap-touch) minmax(0, 1fr);
    }
    .ap-entry-side {
      grid-column: 2;
      display: flex;
      justify-content: space-between;
    }
  }
}

/* Page styles and their responsive variants: perfume. */
@layer pages {
  .ap-perfume .ap-feed {
    gap: 0;
  }
  /* Perfume page: the bottle on the left stays in view; on the right the name, the verdicts at a glance and the
  owner's wine card, the focus of the page, then accords and the description. */
  .ap-perfume-hero {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--space-4xl);
    align-items: start;
  }
  /* The information comes first in the document (the answer before the photo and metrics); the grid keeps the photo
     on the left. */
  .ap-perfume-visual {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: calc(var(--ap-header) + var(--space-xl));
    display: grid;
    gap: var(--space-md);
  }
  .ap-perfume-photo {
    position: relative;
    aspect-ratio: 4 / 5;
  }
  .ap-perfume-top {
    position: absolute;
    top: var(--space-lg);
    right: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--ap-accent-line);
    border-radius: var(--ap-radius-lg);
    background: var(--ap-accent-soft);
    color: var(--ap-accent);
    font-size: var(--ap-text-xs);
    font-weight: var(--ap-weight-semibold);
    letter-spacing: var(--ap-tracking-wide);
    line-height: var(--ap-leading-none);
    font-variant-numeric: tabular-nums;
  }
  .ap-perfume-views {
    position: absolute;
    top: 0;
    right: 0;
    color: var(--ap-faint);
    font-size: var(--ap-text-xs);
    font-weight: var(--ap-weight-regular);
    font-variant-numeric: tabular-nums;
    line-height: var(--ap-leading-normal);
    white-space: nowrap;
  }
  .ap-note-layer dt, .ap-when dt { display: flex; align-items: center; gap: var(--space-sm); }
  .ap-note-layer .ap-fact-art, .ap-when .ap-fact-art { width: var(--ap-art-sm); height: var(--ap-art-sm); }
  .ap-perfume-glance .ap-fact-art { grid-row: span 2; width: var(--ap-art); height: var(--ap-art); }
  /* Accords stand in a column on the photo, top left, the leading one filled. */
  .ap-perfume-shot {
    position: relative;
  }
  .ap-perfume-accords {
    position: absolute;
    top: var(--space-lg);
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs-sm);
  }
  .ap-perfume-accords .ap-accord {
    min-height: var(--ap-control-xs);
    padding-inline: var(--space-sm-md) var(--space-md);
    background: var(--ap-sunk-glass);
    font-size: var(--ap-text-sm);
  }
  .ap-perfume-accords .ap-accord[data-lead] {
    background: var(--ap-accent);
  }
  /* Absolute, so the percentages resolve against the plate's own box at every width. */
  .ap-perfume-photo img {
    position: absolute;
    inset: 6%;
    width: 88%;
    height: 88%;
  }
  .ap-perfume-info {
    grid-column: 2;
    grid-row: 1;
    container: perfume-info / inline-size;
    display: grid;
    gap: var(--space-2xl);
    min-width: 0;
  }
  .ap-perfume-intro {
    --views-room: 84px;
    position: relative;
    display: grid;
    gap: var(--space-sm);
  }
  .ap-perfume-brand {
    padding-right: var(--views-room);
    color: var(--ap-accent);
    font-size: var(--ap-text-base);
    font-weight: var(--ap-weight-semibold);
  }
  .ap-perfume-intro h1 {
    font-size: var(--ap-text-perfume);
    line-height: var(--ap-leading-display);
    letter-spacing: var(--ap-tracking-tighter);
  }
  .ap-perfume-meta {
    color: var(--ap-muted);
  }
  /* Verdicts at a glance under the photo: a 2×2 grid of soft tiles, the icon of the leading answer on the left,
    the question above and the answer below; long answers wrap inside their tile. */
  .ap-perfume-glance {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
    margin: 0;
  }
  .ap-perfume-glance div {
    display: grid;
    grid-template-columns: var(--ap-art) minmax(0, 1fr);
    align-items: center;
    gap: 0 var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--ap-radius-md);
    background: var(--ap-surface);
  }
  .ap-perfume-glance dt {
    color: var(--ap-muted);
    font-size: var(--ap-text-xs);
  }
  .ap-perfume-glance dd {
    margin: 0;
    overflow-wrap: anywhere;
    font-size: var(--ap-text-xl);
    font-weight: var(--ap-weight-semibold);
    letter-spacing: var(--ap-tracking-snug);
    line-height: var(--ap-leading-heading);
  }
  /* A metric still being calculated: an empty bar, no text for a robot to quote. */
  .ap-perfume-pending {
    display: block;
    width: 3em;
    height: 1em;
    border-radius: var(--ap-radius-sm);
    background: var(--ap-sunk);
  }
  .ap-perfume-glance small {
    color: var(--ap-muted);
    font-size: var(--ap-text-sm);
    font-weight: var(--ap-weight-regular);
  }
  .ap-perfume-about {
    display: grid;
    gap: var(--space-lg);
  }
  .ap-perfume-description {
    max-width: 62ch;
    color: var(--ap-ink-soft);
    font-size: var(--ap-text-xl);
    line-height: var(--ap-leading-relaxed);
  }
  /* «Коротко об аромате»: short answers from the card's facts, a flat list of questions in two columns. */
  .ap-faq {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: var(--space-xl) var(--space-3xl);
    margin: 0;
  }
  .ap-faq > div {
    display: grid;
    align-content: start;
    gap: var(--space-xs-sm);
    padding-top: var(--space-md);
    border-top: 1px solid var(--ap-line);
  }
  .ap-faq dt {
    font-weight: var(--ap-weight-semibold);
  }
  .ap-faq dd {
    margin: 0;
    color: var(--ap-ink-soft);
    line-height: var(--ap-leading-relaxed);
  }
  .ap-perfume-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: var(--space-2xl) var(--space-3xl);
  }
  /* Server facts (templates/perfume.php): a quiet label over its values. */
  dl.ap-perfume-facts dt {
    color: var(--ap-muted);
    font-size: var(--ap-text-sm);
  }
  dl.ap-perfume-facts dd {
    margin: 0;
  }
  .ap-perfume-block h3 {
    margin-bottom: var(--space-md);
    font-size: var(--ap-text-xl);
  }
  .ap-perfume-links {
    display: flex;
    gap: var(--space-xl);
    flex-wrap: wrap;
    margin-top: var(--space-xl);
  }
  .ap-note-layers {
    display: grid;
    margin: 0;
  }
  .ap-note-layer,
  .ap-when > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
    padding: var(--space-sm-md) 0;
    border-bottom: 1px solid var(--ap-line);
  }
  .ap-note-layer dt,
  .ap-when dt {
    color: var(--ap-muted);
    font: var(--ap-text-xs)/var(--ap-leading-loose) var(--ap-body);
  }
  .ap-note-layer dd,
  .ap-when dd {
    margin: 0;
  }
  .ap-note-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs-sm) var(--space-lg);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ap-note-list li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
  }
  .ap-note-list .ap-vote-icon {
    width: var(--ap-icon-lg);
    height: var(--ap-icon-lg);
    flex: none;
    color: var(--ap-muted);
  }
  .ap-when {
    display: grid;
    margin: 0;
  }
  .ap-when dd {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs-sm);
  }
  .ap-when dd span {
    display: inline-flex;
    align-items: center;
    min-height: var(--ap-control-xs);
    padding: 0 var(--space-md);
    border-radius: var(--ap-pill);
    font-size: var(--ap-text-sm);
  }
  .ap-when-on {
    background: var(--ap-accent);
    color: var(--ap-accent-ink);
  }
  /* White stage for the bottle, then everything else on one wine band down to the footer. */
  .ap-perfume .ap-stage {
    container-name: perfume-stage;
    margin-bottom: 0;
    padding-bottom: calc(var(--space-3xl) + var(--ap-wave-h));
  }
  .ap-perfume-hero .ap-plate {
    box-shadow: none;
  }
  .ap-perfume-band {
    padding-block: var(--space-4xl) calc(var(--space-4xl) + var(--ap-wave-h));
    background: var(--ap-paper);
    color: var(--ap-ink);
  }
  /* The band ends in the same liquid edge as every wine stage; similar perfumes follow on paper. */
  .ap-perfume-band-end {
    position: absolute;
    inset: auto 0 0;
    height: var(--ap-wave-h);
  }
  /* Community votes: one tile per poll, a verdict on top and the chart below. */
  .ap-votes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: var(--space-lg);
  }
  .ap-vote {
    display: grid;
    align-content: start;
    gap: var(--space-md);
    padding: var(--space-xl);
    border-radius: var(--ap-radius-xl);
    background: var(--ap-surface);
  }
  .ap-vote h3 {
    color: var(--ap-muted);
    font-size: var(--ap-text-sm);
    font-weight: var(--ap-weight-medium);
  }
  .ap-vote-verdict {
    margin-bottom: var(--space-sm);
    font-size: var(--ap-text-5xl);
    font-weight: var(--ap-weight-semibold);
    line-height: var(--ap-leading-tight);
    letter-spacing: var(--ap-tracking-tight);
  }
  .ap-vote-verdict small {
    color: var(--ap-muted);
    font-size: var(--ap-text-base);
    font-weight: var(--ap-weight-regular);
  }
  .ap-vote-cols {
    display: grid;
    grid-template-columns: repeat(var(--n), minmax(0, 1fr));
    gap: var(--space-sm);
    align-items: end;
  }
  .ap-vote-col {
    display: grid;
    justify-items: center;
    gap: var(--space-xs-sm);
    color: var(--ap-muted);
    text-align: center;
  }
  .ap-vote-col[data-lead] {
    color: var(--ap-ink);
  }
  .ap-vote-pct {
    font-size: var(--ap-text-sm);
    font-variant-numeric: tabular-nums;
  }
  /* A column grows from a visible stub to the full range by its share --v. */
  .ap-vote-bar {
    --bar-min: 4px;
    --bar-range: 104px;
    width: 100%;
    height: calc(var(--bar-min) + var(--v) * var(--bar-range));
    border-radius: var(--ap-radius-sm) var(--ap-radius-sm) var(--ap-radius-2xs) var(--ap-radius-2xs);
    background: var(--ap-accent-soft);
    transform-origin: bottom;
    animation: ap-vote-grow var(--ap-dur-enter) var(--ap-ease-out) both;
  }
  .ap-vote-col[data-lead] .ap-vote-bar {
    background: var(--ap-accent);
  }
  .ap-vote-label {
    min-height: 2.5em;
    font-size: var(--ap-text-xs);
    line-height: var(--ap-leading-snug);
  }
  /* Seasons and day parts: tiles filled from the bottom by their share. */
  .ap-vote-tiles {
    display: grid;
    grid-template-columns: repeat(var(--n), minmax(0, 1fr));
    gap: var(--space-sm);
  }
  .ap-vote-tile {
    display: grid;
    justify-items: center;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-xs);
    border-radius: var(--ap-radius-lg);
    background: linear-gradient(to top, var(--ap-accent-line) calc(var(--v) * 100%), var(--ap-sunk) 0);
    text-align: center;
  }
  .ap-vote-tile strong {
    font-size: var(--ap-text-xl);
    font-variant-numeric: tabular-nums;
  }
  .ap-vote-tile span:last-child {
    color: var(--ap-ink-soft);
    font-size: var(--ap-text-xs);
  }
  @keyframes ap-vote-grow {
    from {
      transform: scaleY(0);
    }
  }
  /* Impression card «Мой аромат»: wine on the white stage. Compact (14 October 2026): small labels, one-line
     status and rating rows of regular control height; touch screens keep 44 px targets. */
  .ap-impression {
    container: impression / inline-size;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-xl);
    border-radius: var(--ap-radius-xl);
    background: var(--ap-wine-glow);
    color: var(--ap-ink);
    box-shadow: var(--ap-shadow-lg);
  }
  .ap-impression .ap-choice legend {
    margin-bottom: var(--space-xs-sm);
    font-size: var(--ap-text-xs);
  }
  /* Status as one segmented control of four equal parts. */
  .ap-impression .ap-choice-ownership .ap-choice-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-xs);
    padding: var(--space-xs);
    border-radius: var(--ap-radius-lg);
    background: var(--ap-sunk);
  }
  .ap-impression .ap-choice-ownership label > span {
    width: 100%;
    min-height: var(--ap-control-md);
    padding: 0 var(--space-sm);
    border: 0;
    border-radius: var(--ap-radius-md);
    background: transparent;
    text-align: center;
  }
  .ap-impression .ap-choice-ownership input:checked + span {
    background: var(--ap-accent);
    color: var(--ap-accent-ink);
    font-weight: var(--ap-weight-semibold);
  }
  .ap-impression .ap-choice-rating .ap-choice-row,
  .ap-impression .ap-choice-hint {
    max-width: none;
  }
  .ap-impression .ap-choice-rating label > span {
    min-height: var(--ap-control-md);
    font-size: var(--ap-text-base);
  }
  .ap-impression .ap-choice-hint {
    margin-top: var(--space-xs);
  }
  .ap-impression-more {
    border-top: 1px solid var(--ap-line);
    padding-top: var(--space-xs);
  }
  /* The disclosure chrome comes from components/interactions.css; only the label tone is the card's. */
  .ap-impression-more > summary {
    color: var(--ap-ink-soft);
    font-size: var(--ap-text-sm);
    font-weight: var(--ap-weight-semibold);
  }
  .ap-impression-more > :not(summary) { margin-top: var(--space-lg); }
  @media (max-width: 1023px), (pointer: coarse) {
    .ap-impression .ap-choice-ownership label > span,
    .ap-impression .ap-choice-rating label > span {
      min-height: var(--ap-touch);
    }
  }
  /* Compact composition rows below the introduction, aligned to the content grid. */
  .ap-pyramid { max-width: var(--ap-measure-xl); padding-block: var(--space-lg); }
  .ap-pyramid h2 { font-size: var(--ap-text-5xl); margin-bottom: var(--space-xl); }
  .ap-pyramid .ap-note-layers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); }
  .ap-pyramid .ap-note-layer { padding: var(--space-md) 0 0; border-top: 1px solid var(--ap-line); border-bottom: 0; align-content: start; gap: var(--space-md); min-width: 0; }
  .ap-pyramid .ap-note-layer dt { font-size: var(--ap-text-sm); font-weight: var(--ap-weight-medium); }
  .ap-pyramid .ap-fact-art { width: var(--ap-icon-2xl); height: var(--ap-icon-2xl); }
  .ap-pyramid .ap-note-list { gap: var(--space-sm) var(--space-lg); font-size: var(--ap-text-md); line-height: var(--ap-leading-relaxed); }
  .ap-pyramid .ap-vote-icon { width: var(--ap-icon-md); height: var(--ap-icon-md); }
  @media (max-width: 740px) {
    .ap-pyramid .ap-note-layers { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
    .ap-pyramid .ap-note-layer { grid-template-columns: 110px minmax(0, 1fr); gap: var(--space-md); }
    .ap-pyramid .ap-note-layer dt { align-items: start; }
    .ap-pyramid .ap-note-list { gap: var(--space-xs) var(--space-md); }
  }
  @media (max-width: 380px) {
    .ap-pyramid .ap-note-layer { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  }
  /* Compact two-column layout for unfolded phones and tablets; touch does not imply one column. */
  @media (max-width: 1100px) {
    .ap-perfume-hero {
      gap: var(--space-xl);
    }
    .ap-perfume-visual {
      position: static;
    }
    .ap-impression {
      padding: var(--space-lg);
    }
  }
  @container perfume-stage (max-width: 640px) {
    /* Stack only when the stage cannot fit the photo and the information side by side. */
    .ap-perfume-hero {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: var(--space-2xl);
    }
    .ap-perfume-visual,
    .ap-perfume-info {
      display: contents;
    }
    .ap-perfume-intro {
      order: -2;
    }
    /* Name, photo, metrics, then the rest of the information, as before the information moved first. */
    .ap-perfume-info > :not(.ap-perfume-intro) {
      order: 1;
    }
    .ap-perfume-shot {
      order: -1;
    }
    .ap-perfume-photo {
      aspect-ratio: 4 / 3;
      max-height: 380px;
    }
  }
  /* Controls respond to the card's own width, including a narrow column on a wide touch screen. */
  @container impression (max-width: 480px) {
    .ap-choice-rating .ap-choice-row {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .ap-impression .ap-choice-ownership .ap-choice-row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 740px) {
    /* Phone: the perfume page starts right under the header, «Назад» lines up with the text, the first screen is tighter. */
    .ap-perfume .ap-stage {
      gap: var(--space-sm);
      padding-top: calc(var(--space-md) + var(--ap-header));
    }
    .ap-perfume-hero {
      gap: var(--space-lg);
    }
    .ap-perfume-photo {
      max-height: 340px;
      width: 100%;
    }
    .ap-perfume-accords .ap-accord {
      font-size: var(--ap-text-xs);
    }
    .ap-perfume-accords .ap-accord:nth-child(n + 6) {
      display: none;
    }
    .ap-impression {
      padding: var(--space-md) var(--space-lg);
    }
  }
}

/* Page styles and their responsive variants: recommendations. */
@layer pages {
  .ap-rec-source[hidden] { display: none; }
  /* Taste picks */
  .ap-picks-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(160px, 240px);
    align-items: center;
    gap: var(--space-xl);
    margin-bottom: var(--space-xl);
    padding: var(--space-xl);
    border-radius: var(--ap-radius-xl);
    background: var(--ap-sunk);
    box-shadow: var(--ap-ring);
  }
  .ap-picks-form:not(:has(.ap-picks-art)) { grid-template-columns: minmax(0, 1fr); }
  /* The source switch on paper right under the stage; panels scroll in below the sticky switch. */
  .ap-rec-sources {
    margin-block: calc(var(--space-2xl) * -1) var(--space-2xl);
  }
  .ap-rec-source { scroll-margin-top: calc(var(--ap-header) + var(--ap-subnav-offset)); }
  .ap-picks-art {
    width: 100%;
    height: auto;
    order: 1;
  }
  .ap-occasion-custom {
    width: min(340px, 100%);
    min-height: var(--ap-control);
    margin-top: var(--space-sm);
    border-radius: var(--ap-pill);
  }
  .ap-picks-submit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-lg);
  }
  .ap-picks-submit .ap-button {
    flex-shrink: 0;
  }
  .ap-picks-submit .ap-help {
    max-width: 64ch;
  }
  .ap-rec-status {
    display: flex;
    align-items: baseline;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-bottom: var(--space-2xl);
    color: var(--ap-ink-soft);
    font-size: var(--ap-text-sm);
  }
  .ap-rec-status small {
    color: var(--ap-faint);
    font: var(--ap-text-xs) var(--ap-body);
  }
  .ap-rec-status[data-busy='true'] span::before {
    content: '';
    display: inline-block;
    width: var(--ap-dot-lg);
    height: var(--ap-dot-lg);
    margin-right: var(--space-sm);
    border-radius: var(--ap-round);
    background: var(--ap-accent);
    animation: ap-pulse var(--ap-dur-pulse) var(--ap-ease-in-out) infinite;
  }
  .ap-rec-source-head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
  }
  .ap-rec-source-icon {
    display: grid;
    flex: 0 0 var(--ap-touch);
    place-items: center;
    height: var(--ap-touch);
    border-radius: var(--ap-round);
    background: var(--ap-accent-soft);
    color: var(--ap-accent);
  }
  .ap-rec-source-head h2 {
    font-size: var(--ap-text-5xl);
    letter-spacing: var(--ap-tracking-tight);
  }
  .ap-rec-source-head p {
    max-width: 62ch;
    margin-top: var(--space-xs);
    color: var(--ap-muted);
  }
  .ap-rec-direction {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs-sm);
    justify-self: start;
    padding: var(--space-2xs) var(--space-sm-md);
    border-radius: var(--ap-pill);
    background: var(--ap-accent-soft);
    color: var(--ap-accent);
    font-size: var(--ap-text-xs);
    font-weight: var(--ap-weight-semibold);
  }
  .ap-rec-direction svg {
    flex: none;
    width: var(--ap-icon-md);
    height: var(--ap-icon-md);
  }
  .ap-rec-direction[data-direction='adjacent'] {
    background: var(--ap-sunk);
    color: var(--ap-ink-soft);
  }
  .ap-rec-direction[data-direction='discovery'] {
    background: var(--ap-sage-soft);
    color: var(--ap-sage);
  }
  .ap-rec-body {
    display: grid;
    gap: var(--space-sm);
    margin-top: var(--space-sm-md);
    font-size: var(--ap-text-sm);
  }
  .ap-rec-title {
    font-size: var(--ap-text-md);
    font-weight: var(--ap-weight-semibold);
    color: var(--ap-ink);
  }
  .ap-rec-occasion,
  .ap-rec-fit {
    color: var(--ap-muted);
  }
  .ap-rec-fit strong {
    color: var(--ap-ink);
    font-size: var(--ap-text-xl);
  }
  .ap-rec-ai {
    display: grid;
    gap: var(--space-xs);
    justify-items: start;
    color: var(--ap-ink-soft);
  }
  .ap-rec-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
  }
  .ap-rec-actions .ap-chip {
    min-height: var(--ap-control-sm);
    padding: 0 var(--space-md);
    font-size: var(--ap-text-sm);
  }
  @media (max-width: 740px) {
    .ap-picks-form {
      grid-template-columns: minmax(0, 1fr);
      padding: var(--space-lg);
    }
    .ap-picks-art {
      width: 160px;
      justify-self: center;
    }
    .ap-picks-submit {
      flex-direction: column;
      align-items: flex-start;
    }
  }
  @media (max-width: 1023px), (pointer: coarse) {
    .ap-rec-actions .ap-chip {
      min-height: var(--ap-touch);
    }
    .ap-occasion-custom {
      font-size: var(--ap-input-text);
    }
  }
}

/* An illustrated perfume report: cover, editorial comparisons, chapter spreads. */
@layer pages {
  .ap-trend { padding-bottom: var(--space-4xl); }
  .ap-trend-cover-link { display: inline-flex; gap: var(--space-xl); align-items: center; margin-top: var(--space-2xl); font-size: var(--ap-text-md); }
  .ap-trend-cover-link span { display: grid; place-items: center; width: var(--ap-touch); height: var(--ap-touch); border: 1px solid var(--ap-line-strong); border-radius: var(--ap-round); transition: background var(--ap-dur-hover); }
  .ap-trend-cover-link:hover span { background: var(--ap-accent-soft); }
  .ap-trend-evolution, .ap-trend-dimensions, .ap-trend-chronicle { margin-top: var(--space-5xl); scroll-margin-top: calc(var(--ap-header) + var(--space-xl)); }
  .ap-trend-section-title { display: flex; align-items: end; justify-content: space-between; gap: var(--space-xl); margin-bottom: var(--space-2xl); }
  .ap-trend-section-title h2 { font-size: var(--ap-text-feature); line-height: var(--ap-leading-heading); letter-spacing: var(--ap-tracking-tighter); margin: var(--space-sm) 0 0; max-width: 22ch; }
  .ap-trend-section-title > p { font-size: var(--ap-text-sm); line-height: var(--ap-leading-relaxed); color: var(--ap-muted); }
  .ap-trend-section-symbol { display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid var(--ap-line); border-radius: var(--ap-round); color: var(--ap-accent); flex-shrink: 0; }
  .ap-trend-section-symbol svg { width: var(--ap-icon-2xl); height: var(--ap-icon-2xl); }
  .ap-trend-controls { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) 1fr; align-items: center; gap: var(--space-xl); margin-bottom: var(--space-2xl); padding: var(--space-xl) 0; border-top: 1px solid var(--ap-line); }
  .ap-trend-select { display: grid; gap: var(--space-sm); color: var(--ap-muted); font-size: var(--ap-text-xs); min-width: 0; }
  .ap-trend-select select { width: 100%; min-width: 0; }
  .ap-trend-controls > span { color: var(--ap-trend-metal); padding-top: var(--space-xl); }
  .ap-trend-controls > p { text-align: right; font-size: var(--ap-text-xs); line-height: var(--ap-leading-relaxed); color: var(--ap-muted); }
  .ap-trend-summary { display: grid; grid-template-columns: 240px minmax(0,1fr) auto; align-items: center; gap: var(--space-2xl); background: var(--ap-trend-ivory); margin-bottom: var(--space-2xl); padding: var(--space-xl) var(--space-2xl) var(--space-xl) var(--space-xl); border-radius: var(--ap-radius-xl); }
  .ap-trend-summary-art { align-self: stretch; min-height: 260px; overflow: hidden; border-radius: var(--ap-radius-lg); }
  .ap-trend-summary-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .ap-trend-summary-copy h2 { font-size: var(--ap-text-feature-sm); letter-spacing: var(--ap-tracking-tighter); line-height: var(--ap-leading-heading); margin: var(--space-md) 0; max-width: 20ch; }
  .ap-trend-summary-copy > p:not(.ap-eyebrow) { color: var(--ap-muted); font-size: var(--ap-text-md); line-height: var(--ap-leading-loose); max-width: 52ch; }
  .ap-trend-period { display: inline-block; margin-top: var(--space-sm); font-size: var(--ap-text-xs); color: var(--ap-trend-metal); }
  .ap-trend-shift { padding: 0 var(--space-lg); text-align: center; color: var(--ap-accent); }
  .ap-trend-shift > span { font-size: var(--ap-text-xs); text-transform: uppercase; letter-spacing: var(--ap-tracking-caps); }
  .ap-trend-shift strong { display: block; font-size: var(--ap-text-score); font-weight: var(--ap-weight-regular); letter-spacing: var(--ap-tracking-tightest); line-height: var(--ap-leading-heading); }
  .ap-trend-shift p { font-size: var(--ap-text-xs); color: var(--ap-muted); }
  .ap-trend-notice { background: var(--ap-sunk); padding: var(--space-lg) var(--space-xl); line-height: var(--ap-leading-relaxed); font-size: var(--ap-text-md); }
  .ap-trend-axes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-2xl); }
  .ap-trend-axis { display: grid; grid-template-columns: 40% minmax(0,1fr); min-width: 0; border: 1px solid var(--ap-line); border-radius: var(--ap-radius-xl); overflow: hidden; background: var(--ap-paper); }
  .ap-trend-axis.is-selected { border-color: var(--ap-accent-line); }
  .ap-trend-axis-art { position: relative; min-height: 360px; background: var(--ap-trend-ivory); overflow: hidden; }
  .ap-trend-axis-art > img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
  .ap-trend-axis-seal { position: absolute; left: var(--space-lg); top: var(--space-lg); display: grid; place-items: center; width: var(--ap-thumb-sm); height: var(--ap-thumb-sm); border-radius: var(--ap-round); background: var(--ap-paper); color: var(--ap-accent); }
  .ap-trend-axis-tag { position: absolute; bottom: var(--space-lg); left: var(--space-lg); right: var(--space-lg); padding: var(--space-sm); background: var(--ap-paper); color: var(--ap-ink-soft); text-align: center; font-size: var(--ap-text-chart); border-radius: var(--ap-pill); }
  .ap-trend-axis-body { min-width: 0; padding: var(--space-xl); }
  .ap-trend-axis-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); }
  .ap-trend-axis-head h3 { font-size: var(--ap-text-4xl); letter-spacing: var(--ap-tracking-tighter); margin: 0; }
  .ap-trend-axis-head > span { font-size: var(--ap-text-xs); color: var(--ap-accent); border-radius: var(--ap-pill); padding: var(--space-xs) var(--space-sm); background: var(--ap-accent-soft); }
  .ap-trend-poles { display: flex; justify-content: space-between; gap: var(--space-sm); font-size: var(--ap-text-chart); color: var(--ap-muted); margin-top: var(--space-2xl); }
  .ap-trend-endpoints { display: flex; justify-content: space-between; gap: var(--space-sm); font-size: var(--ap-text-xs); color: var(--ap-muted); }
  .ap-trend-endpoints span { display: flex; align-items: center; gap: var(--space-xs); }
  .ap-trend-endpoints b { font-size: var(--ap-text-6xl); font-weight: var(--ap-weight-regular); color: var(--ap-accent); margin-left: var(--space-xs); }
  .ap-trend-endpoints i { width: var(--ap-dot); height: var(--ap-dot); border: 1px solid var(--ap-muted); border-radius: var(--ap-round); }
  .ap-trend-endpoints span:last-child i { background: var(--ap-accent); border-color: var(--ap-accent); }
  .ap-trend-axis-note { color: var(--ap-ink-soft); font-size: var(--ap-text-md); line-height: var(--ap-leading-loose); margin: var(--space-xl) 0 var(--space-lg); }
  .ap-trend-confidence { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--ap-text-chart); color: var(--ap-trend-metal); }
  .ap-trend-confidence svg { width: var(--ap-icon-sm); height: var(--ap-icon-sm); flex-shrink: 0; }
  .ap-trend-data { margin-top: var(--space-lg); color: var(--ap-muted); font-size: var(--ap-text-xs); border-top: 1px solid var(--ap-line); padding-top: var(--space-sm); }
  .ap-trend-data ul { padding-left: var(--space-lg); }
  .ap-trend-data li { margin: var(--space-lg) 0; line-height: var(--ap-leading-relaxed); }
  .ap-trend summary { cursor: pointer; padding: var(--space-sm) 0; line-height: var(--ap-leading-relaxed); }
  .ap-trend summary:focus-visible { outline: none; box-shadow: var(--ap-focus); border-radius: var(--ap-radius-2xs); }
  .ap-trend-history { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-2xl); }
  .ap-trend-history > li { min-width: 0; background: var(--ap-surface); border: 1px solid var(--ap-line); border-radius: var(--ap-radius-xl); overflow: hidden; }
  .ap-trend-history > li:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: 46% 1fr; background: var(--ap-trend-ivory); border: none; }
  .ap-trend-history > li:last-child:nth-child(even) { grid-column: 1 / -1; display: grid; grid-template-columns: 38% 1fr; }
  .ap-trend-history > li:last-child:nth-child(even) .ap-trend-chapter-art { height: 100%; min-height: 300px; }
  .ap-trend-chapter-art { position: relative; height: 230px; overflow: hidden; }
  .ap-trend-chapter-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 50%; }
  .ap-trend-chapter-art::after { content: ''; position: absolute; inset: 0; background: var(--ap-cover-fade-bottom); }
  .ap-trend-history > li:first-child .ap-trend-chapter-art { height: 100%; min-height: 420px; }
  .ap-trend-chapter-number { position: absolute; z-index: var(--z-raised); top: var(--space-xl); left: var(--space-xl); color: var(--ap-paper); font-size: var(--ap-text-score); line-height: var(--ap-leading-none); font-weight: var(--ap-weight-regular); letter-spacing: var(--ap-tracking-tightest); text-shadow: var(--ap-shadow-sm); }
  .ap-trend-art-label { position: absolute; z-index: var(--z-raised); bottom: var(--space-lg); left: var(--space-xl); color: var(--ap-paper); font-size: var(--ap-text-chart); }
  .ap-trend-history-copy { padding: var(--space-2xl); }
  .ap-trend-history-date { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); color: var(--ap-muted); font-size: var(--ap-text-xs); margin-bottom: var(--space-xl); }
  .ap-trend-history-copy h3 { font-size: var(--ap-text-section); line-height: var(--ap-leading-heading); letter-spacing: var(--ap-tracking-tighter); margin: 0; max-width: 26ch; }
  .ap-trend-history > li:first-child h3 { font-size: var(--ap-text-feature); }
  .ap-trend-history-copy > p { color: var(--ap-ink-soft); font-size: var(--ap-text-md); line-height: var(--ap-leading-loose); }
  .ap-trend-keywords { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: var(--space-xl) 0; }
  .ap-trend-keywords span { padding: var(--space-xs) var(--space-md); border: 1px solid var(--ap-accent-line); border-radius: var(--ap-pill); font-size: var(--ap-text-xs); color: var(--ap-accent); }
  .ap-trend-history-copy details { margin-top: var(--space-xl); color: var(--ap-muted); font-size: var(--ap-text-md); }
  .ap-trend-history-copy summary { display: flex; align-items: center; gap: var(--space-sm); }
  .ap-trend-history-copy details[open] summary svg { rotate: 45deg; }
  .ap-trend-history-copy details p { line-height: var(--ap-leading-loose); }
  .ap-trend-empty { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-4xl); margin-top: var(--space-4xl); align-items: center; }
  .ap-trend-empty img { width: 100%; height: auto; border-radius: var(--ap-radius-xl); }
  .ap-trend-empty h2 { font-size: var(--ap-text-feature); line-height: var(--ap-leading-heading); letter-spacing: var(--ap-tracking-tighter); }
  .ap-trend-empty p { line-height: var(--ap-leading-loose); }
  @media (max-width: 1100px) {
    .ap-trend-axis { grid-template-columns: 1fr; }
    .ap-trend-axis-art { min-height: 220px; }
    .ap-trend-axis-art > img { object-position: center 47%; }
    .ap-trend-summary { grid-template-columns: 180px minmax(0,1fr) auto; gap: var(--space-xl); }
    .ap-trend-controls { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); }
    .ap-trend-controls > p { display: none; }
  }
  @media (max-width: 740px) {
    .ap-trend-evolution, .ap-trend-dimensions, .ap-trend-chronicle { margin-top: var(--space-3xl); }
    .ap-trend-section-title h2 { font-size: var(--ap-text-feature-sm); }
    .ap-trend-section-title > p { display: none; }
    .ap-trend-section-symbol { width: var(--ap-touch); height: var(--ap-touch); }
    .ap-trend-controls { grid-template-columns: minmax(0,1fr); gap: var(--space-lg); }
    .ap-trend-controls > span { display: none; }
    .ap-trend-summary { grid-template-columns: 100px minmax(0,1fr); padding: var(--space-lg); gap: var(--space-lg); }
    .ap-trend-summary-art { min-height: 140px; }
    .ap-trend-summary-copy h2 { font-size: var(--ap-text-4xl); }
    .ap-trend-summary-copy > p:not(.ap-eyebrow) { font-size: var(--ap-text-sm); }
    .ap-trend-summary-copy .ap-eyebrow { letter-spacing: var(--ap-tracking-wide); font-size: var(--ap-text-chart); }
    .ap-trend-shift { grid-column: 1 / -1; display: flex; align-items: baseline; gap: var(--space-lg); justify-content: center; padding-top: var(--space-lg); border-top: 1px solid var(--ap-line); }
    .ap-trend-shift strong { font-size: var(--ap-text-feature); order: -1; }
    .ap-trend-shift > span { font-size: var(--ap-text-chart); }
    .ap-trend-shift > p { display: none; }
    .ap-trend-axes, .ap-trend-history, .ap-trend-empty { grid-template-columns: minmax(0,1fr); }
    .ap-trend-axis-art { min-height: 240px; }
    .ap-trend-history > li:last-child:nth-child(even) { grid-template-columns: minmax(0,1fr); }
    .ap-trend-history > li:first-child { grid-template-columns: minmax(0,1fr); }
    .ap-trend-history > li:first-child .ap-trend-chapter-art { min-height: 280px; }
    .ap-trend-history-copy { padding: var(--space-xl); }
    .ap-trend-history > li:first-child h3 { font-size: var(--ap-text-section); }
    .ap-trend-empty { gap: var(--space-xl); }
  }
  @media (max-width: 480px) {
    .ap-trend-summary { grid-template-columns: minmax(0, 1fr); }
    .ap-trend-summary-art { min-height: 0; height: 180px; }
    .ap-trend-summary-art img { object-position: center 45%; }
    .ap-trend-summary-copy h2 { max-width: none; }
  }
}

/* The interactive atlas and comparison rails; no page or shell ownership. */
@layer pages {
  .ap-trend-observatory { position: relative; overflow: hidden; background: var(--ap-cover-base); color: var(--ap-ink); padding: var(--space-3xl); border-radius: var(--ap-radius-xl); }
  .ap-trend-observatory::before { content: ''; position: absolute; --halo: 500px; width: var(--halo); height: var(--halo); right: calc(var(--halo) / -2); top: calc(var(--halo) * -0.6); border: 1px solid var(--ap-trend-gold-line); border-radius: var(--ap-round); box-shadow: var(--ap-trend-halo); pointer-events: none; }
  .ap-trend-observatory-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-xl); position: relative; }
  .ap-trend-observatory-top h3 { font-size: var(--ap-text-6xl); font-weight: var(--ap-weight-regular); letter-spacing: var(--ap-tracking-tight); margin: var(--space-sm) 0 0; }
  .ap-trend-observatory .ap-eyebrow { margin: 0; }
  .ap-trend-chart-caption { font-size: var(--ap-text-xs); color: var(--ap-muted); max-width: 22ch; text-align: right; line-height: var(--ap-leading-loose); }
  .ap-trend-axis-tabs { display: flex; gap: var(--space-sm); margin: var(--space-2xl) 0; position: relative; }
  .ap-trend-axis-tabs button { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); min-height: var(--ap-touch); padding: var(--space-sm) var(--space-lg); border: 1px solid var(--ap-line); border-radius: var(--ap-pill); color: var(--ap-ink-soft); font-size: var(--ap-text-sm); transition: background var(--ap-dur-hover),color var(--ap-dur-hover); }
  .ap-trend-axis-tabs button[aria-pressed='true'] { background: var(--ap-trend-gold); border-color: var(--ap-trend-gold); color: var(--ap-cover-base); }
  .ap-trend-axis-tabs button:hover { border-color: var(--ap-trend-gold); }
  .ap-trend-axis-tabs button:focus-visible { outline: var(--ap-focus-width) solid var(--ap-trend-gold); outline-offset: var(--ap-focus-offset-lg); }
  .ap-trend-axis-tabs svg { width: var(--ap-icon-md); height: var(--ap-icon-md); }
  .ap-trend-chart-panel { position: relative; margin: var(--space-xl) 0; }
  .ap-trend-chart-poles { display: flex; justify-content: space-between; gap: var(--space-xl); color: var(--ap-ink-soft); font-size: var(--ap-text-sm); margin-bottom: var(--space-md); }
  .ap-trend-chart-poles small { color: var(--ap-muted); padding-left: var(--space-sm); }
  .ap-trend-chart { width: 100%; height: auto; display: block; overflow: visible; color: var(--ap-trend-gold); }
  .ap-trend-tick { fill: var(--ap-muted); font-size: var(--ap-text-xs); font-family: var(--ap-body); }
  .ap-trend-chart.is-compact .ap-trend-tick { font-size: var(--ap-text-md); }
  .ap-trend-grid { stroke: var(--ap-line); stroke-width: 0.7; fill: none; stroke-dasharray: 2 6; }
  .ap-trend-line { stroke: currentColor; stroke-width: 2.5; filter: var(--ap-trend-glow); fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .ap-trend-area { fill: url('#ap-trend-area-fill'); }
  .ap-trend-point { cursor: pointer; outline: none; }
  .ap-trend-point line { stroke: var(--ap-trend-gold); stroke-width: 1; opacity: 0; stroke-dasharray: 3 4; }
  .ap-trend-point-hit { fill: transparent; }
  .ap-trend-point-halo { fill: var(--ap-trend-gold-wash); stroke: var(--ap-trend-gold-edge); stroke-width: 1; }
  .ap-trend-point-core { fill: var(--ap-trend-gold); stroke: var(--ap-cover-base); stroke-width: var(--ap-stroke-bold); }
  .ap-trend-point.is-low .ap-trend-point-core { fill: var(--ap-cover-base); stroke: var(--ap-trend-gold); }
  .ap-trend-point-value { fill: var(--ap-trend-gold); font-size: var(--ap-text-md); font-family: var(--ap-body); opacity: 0; }
  .ap-trend-point:is(:hover,:focus-visible,.is-active) line { opacity: var(--ap-opacity-disabled); }
  .ap-trend-point:is(:hover,:focus-visible,.is-active) .ap-trend-point-value { opacity: 1; }
  .ap-trend-point:is(:hover,:focus-visible,.is-active) .ap-trend-point-halo { stroke: var(--ap-trend-gold); fill: var(--ap-trend-gold-fill); }
  .ap-trend-readout { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2xl); align-items: center; padding: var(--space-xl) 0; border-top: 1px solid var(--ap-line); border-bottom: 1px solid var(--ap-line); min-height: 112px; }
  .ap-trend-readout-score { color: var(--ap-trend-gold); white-space: nowrap; }
  .ap-trend-readout-score strong { font-size: var(--ap-text-feature); font-weight: var(--ap-weight-regular); letter-spacing: var(--ap-tracking-tightest); }
  .ap-trend-readout-score span { font-size: var(--ap-text-xs); color: var(--ap-muted); margin-left: var(--space-sm); }
  .ap-trend-readout-copy > span { font-size: var(--ap-text-xs); color: var(--ap-muted); }
  .ap-trend-readout-copy p { font-size: var(--ap-text-md); line-height: var(--ap-leading-relaxed); color: var(--ap-ink-soft); margin: var(--space-sm) 0 0; }
  .ap-trend-chart-legend { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl); color: var(--ap-muted); font-size: var(--ap-text-chart); padding-top: var(--space-xl); }
  .ap-trend-chart-legend span { display: flex; align-items: center; gap: var(--space-sm); }
  .ap-trend-chart-legend i { width: var(--ap-dot); height: var(--ap-dot); border: 1px solid var(--ap-trend-gold); background: var(--ap-trend-gold); border-radius: var(--ap-round); }
  .ap-trend-chart-legend .is-low { background: transparent; }
  .ap-trend-chart-legend p { margin: 0 0 0 auto; }
  .ap-trend-comparison { width: 100%; height: auto; display: block; overflow: visible; }
  .ap-trend-rail { stroke: var(--ap-line-strong); stroke-width: 1; }
  .ap-trend-rail-tick { stroke: var(--ap-line-strong); stroke-width: 1; }
  .ap-trend-rail-change { stroke: var(--ap-accent); stroke-width: var(--ap-stroke-heavy); stroke-linecap: round; }
  .ap-trend-before { fill: var(--ap-paper); stroke: var(--ap-muted); stroke-width: var(--ap-stroke); }
  .ap-trend-after-halo { fill: var(--ap-accent-soft); }
  .ap-trend-after { fill: var(--ap-accent); stroke: var(--ap-paper); stroke-width: var(--ap-stroke-bold); }
  .ap-trend-chart-empty { display: grid; place-items: center; min-height: 90px; font-size: var(--ap-text-xs); color: var(--ap-muted); text-align: center; padding: var(--space-lg); }
  .ap-trend-observatory .ap-trend-chart-empty { min-height: 240px; border: 1px dashed var(--ap-line); border-radius: var(--ap-radius-lg); }
  @media (max-width: 740px) {
    .ap-trend-observatory { padding: var(--space-xl) var(--space-lg); }
    .ap-trend-observatory-top h3 { font-size: var(--ap-text-4xl); }
    .ap-trend-chart-caption { display: none; }
    .ap-trend-axis-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-sm); }
    .ap-trend-axis-tabs button { padding-inline: var(--space-sm); font-size: var(--ap-text-xs); }
    .ap-trend-readout { grid-template-columns: 1fr; gap: var(--space-md); }
    .ap-trend-readout-score strong { font-size: var(--ap-text-6xl); }
    .ap-trend-readout-copy > span { font-size: var(--ap-text-chart); }
    .ap-trend-chart-legend p { width: 100%; margin: 0; }
    .ap-trend-chart-poles { font-size: var(--ap-text-xs); }
  }
}

/* Page styles and their responsive variants: profile. */
@layer pages {
  .ap-gender-preferences { margin: var(--space-md) 0; padding: var(--space-md); border: 1px solid var(--ap-line); border-radius: var(--ap-radius-lg); min-width: 0; }
  .ap-gender-preferences legend { font-weight: var(--ap-weight-semibold); }
  .ap-gender-options { display: flex; flex-wrap: wrap; gap: var(--space-md); margin: var(--space-md) 0; }
  .ap-gender-options label { display: flex; align-items: center; gap: var(--space-sm); cursor: pointer; min-height: var(--ap-touch); }
  .ap-gender-options input { width: var(--ap-icon-lg); height: var(--ap-icon-lg); accent-color: var(--ap-accent); }

  /* Profile */
  .ap-profile-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
    gap: var(--space-lg);
    align-items: start;
  }
  .ap-profile-body[data-profile-tab="preferences"] { grid-template-columns: minmax(0, 1fr); max-width: var(--ap-measure-xl); }
  .ap-profile-body[data-profile-tab="preferences"] > .ap-panel:first-child { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm) var(--space-xl); align-items: center; }
  .ap-profile-body[data-profile-tab="preferences"] > .ap-panel:first-child .ap-segmented { grid-column: 2; grid-row: 1 / 3; }
  @media (max-width: 640px) {
    .ap-profile-body[data-profile-tab="preferences"] > .ap-panel:first-child { grid-template-columns: minmax(0, 1fr); }
    .ap-profile-body[data-profile-tab="preferences"] > .ap-panel:first-child .ap-segmented { grid-column: 1; grid-row: auto; }
  }
  /* Answers to portrait questions: one editable row per question */
  .ap-answers {
    display: grid;
    margin: var(--space-lg) 0 0;
    padding: 0;
    list-style: none;
  }
  .ap-answer {
    padding: var(--space-lg) 0;
    border-top: 1px solid var(--ap-line);
  }
  .ap-answer .ap-form {
    gap: var(--space-md);
  }
  .ap-answer-question {
    font-size: var(--ap-text-xl);
    font-weight: var(--ap-weight-semibold);
    line-height: var(--ap-leading-snug);
  }
  .ap-answer-own {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
  }
  .ap-answer-own .ap-input {
    flex: 1 1 240px;
    max-width: 420px;
  }
  .ap-profile-body .ap-panel + .ap-panel {
    margin-top: 0;
  }
  @media (max-width: 740px) {
    .ap-profile-body {
      grid-template-columns: 1fr;
    }
  }
}

/* Page styles and their responsive variants: welcome after registration (welcome.js). The rating list and its
   sticky bar are the shared quick-add component; this module only lays out the steps and the section tiles. */
@layer pages {
  .ap-welcome {
    display: grid;
    justify-items: start;
    gap: var(--space-lg);
  }
  .ap-welcome > .ap-quick-list,
  .ap-welcome > .ap-quick-bar {
    justify-self: stretch;
  }
  /* Section tiles: icon, name and one line each; the whole tile opens the section. */
  .ap-welcome-tour {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: var(--space-md);
    justify-self: stretch;
    padding: 0;
    list-style: none;
  }
  .ap-welcome-tour a {
    display: grid;
    align-content: start;
    gap: var(--space-xs-sm);
    height: 100%;
    padding: var(--space-lg-xl);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius-lg);
    background: var(--ap-surface);
    color: var(--ap-ink-soft);
    font-size: var(--ap-text-sm);
    line-height: var(--ap-leading-normal);
    transition: border-color var(--ap-dur-hover);
  }
  .ap-welcome-tour a:hover {
    border-color: var(--ap-line-strong);
  }
  .ap-welcome-tour svg {
    width: var(--ap-icon-2xl);
    height: var(--ap-icon-2xl);
    margin-bottom: var(--space-xs-sm);
    color: var(--ap-accent);
  }
  .ap-welcome-tour strong {
    color: var(--ap-ink);
    font-size: var(--ap-text-lg);
    font-weight: var(--ap-weight-semibold);
  }
  /* The assistant waits until the welcome is over: its button would cover the sticky bar on phones. */
  .ap-body[data-view='welcome'] .ap-chat-root {
    display: none;
  }
  .ap-welcome-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md) var(--space-xl);
    margin-top: var(--space-sm);
  }
  @media (max-width: 640px) {
    .ap-welcome-tour {
      grid-template-columns: 1fr;
    }
  }
}

/* Page styles and their responsive variants: admin. */
@layer pages {
  /* Administration */
  .ap-doc-layout {
    display: grid;
    grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: start;
  }
  .ap-doc-nav {
    position: sticky;
    top: calc(var(--ap-header) + var(--space-lg));
    gap: var(--space-2xs);
  }
  .ap-doc-nav h2 {
    margin-bottom: var(--space-sm);
    font-size: var(--ap-text-lg);
  }
  .ap-doc-link {
    display: block;
    width: 100%;
    padding: var(--space-sm) var(--space-sm-md);
    border-radius: var(--ap-radius-sm);
    color: var(--ap-ink-soft);
    font-size: var(--ap-text-sm);
    text-align: left;
  }
  .ap-doc-link:hover {
    background: var(--ap-sunk);
  }
  .ap-doc-link[aria-current='page'] {
    background: var(--ap-accent-soft);
    color: var(--ap-ink);
    font-weight: var(--ap-weight-semibold);
  }
  .ap-doc-content {
    display: block;
    min-width: 0;
    max-width: 80ch;
    font-size: var(--ap-text-md);
    overflow-wrap: anywhere;
  }
  .ap-doc-content h2,
  .ap-doc-content h3,
  .ap-doc-content h4 {
    margin: var(--space-2xl) 0 var(--space-sm);
  }
  .ap-doc-content h2:first-child {
    margin-top: 0;
  }
  .ap-doc-content p,
  .ap-doc-content ul {
    margin: var(--space-sm) 0;
    line-height: var(--ap-leading-relaxed);
  }
  .ap-doc-content ul {
    padding-left: var(--space-xl);
  }
  .ap-doc-content pre {
    overflow: auto;
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--ap-radius-sm);
    background: var(--ap-sunk);
    font-size: var(--ap-text-xs);
    white-space: pre;
  }
  .ap-doc-content code {
    font-family: var(--ap-mono);
    font-size: var(--ap-text-relative-sm);
  }
  .ap-doc-content table {
    margin: var(--space-md) 0;
  }
  .ap-import-row {
    padding: var(--space-sm-md) var(--space-lg);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius-sm);
    background: var(--ap-paper);
  }
  .ap-import-row summary {
    cursor: pointer;
    font-size: var(--ap-text-sm);
  }
  .ap-import-row[open] {
    display: grid;
    gap: var(--space-sm);
  }
  @media (max-width: 740px) {
    .ap-doc-layout {
      grid-template-columns: 1fr;
    }
    .ap-doc-nav {
      position: static;
    }
  }
  @media (max-width: 1023px), (pointer: coarse) {
    .ap-doc-link {
      min-height: var(--ap-touch);
      display: flex;
      align-items: center;
    }
  }
  /* Roadmap (admin-roadmap.js) */
  .ap-roadmap-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-md);
    margin-block: var(--space-xl);
  }
  .ap-roadmap-stat {
    display: grid;
    gap: var(--space-xs);
    padding: var(--space-lg);
    background: var(--ap-sunk);
    border-radius: var(--ap-radius-sm);
  }
  .ap-roadmap-stat strong { font-size: var(--ap-text-6xl); font-weight: var(--ap-weight-semibold); }
  .ap-roadmap-list { display: grid; gap: var(--space-xl); margin-top: var(--space-xl); }
  .ap-roadmap-item {
    min-width: 0;
    padding-block: var(--space-xl);
    border-top: 1px solid var(--ap-line);
    scroll-margin-top: calc(var(--ap-header) + var(--space-xl));
    overflow-wrap: anywhere;
  }
  .ap-roadmap-heading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-md);
  }
  .ap-roadmap-number { color: var(--ap-muted); font-size: var(--ap-text-6xl); line-height: var(--ap-leading-none); }
  .ap-roadmap-heading h3 { margin: 0 0 var(--space-sm); }
  .ap-roadmap-status {
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--ap-radius-xl);
    background: var(--ap-sunk);
    font-size: var(--ap-text-sm);
    white-space: nowrap;
  }
  .ap-roadmap-status[data-stage='pilot'],
  .ap-roadmap-status[data-stage='partial'] { color: var(--ap-accent); background: var(--ap-accent-soft); }
  .ap-roadmap-status[data-stage='done'] { color: var(--ap-ink); background: var(--ap-accent-soft); font-weight: var(--ap-weight-semibold); }
  .ap-roadmap-evidence { margin-block: var(--space-md); color: var(--ap-ink-soft); }
  .ap-roadmap-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    margin-block: var(--space-lg);
  }
  .ap-roadmap-meta dt { color: var(--ap-muted); font-size: var(--ap-text-sm); }
  .ap-roadmap-meta dd { margin: var(--space-xs) 0 0; }
  .ap-roadmap-details { margin-block: var(--space-md); }
  .ap-roadmap-details summary { cursor: pointer; padding-block: var(--space-sm); color: var(--ap-accent); }
  .ap-roadmap-details h4 { margin: var(--space-lg) 0 var(--space-xs); }
  .ap-roadmap-details ul { padding-left: var(--space-lg); display: grid; gap: var(--space-sm); }
  .ap-roadmap-details a { text-decoration: underline; }
  @media (max-width: 640px) {
    .ap-roadmap-summary {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ap-roadmap-heading {
      grid-template-columns: auto minmax(0, 1fr);
    }
    .ap-roadmap-status {
      grid-column: 2;
      justify-self: start;
    }
  }
}

/* Page styles and their responsive variants: assistant. */
@layer pages {
  /* Assistant chat: a round button at the bottom right and a panel above it; full screen on phones. */
  .ap-chat-button {
    position: fixed;
    right: var(--ap-float-inset);
    bottom: var(--ap-float-inset);
    z-index: var(--z-chat-launcher);
    display: grid;
    place-items: center;
    width: var(--ap-control-xl);
    height: var(--ap-control-xl);
    border-radius: var(--ap-round);
    background: var(--ap-accent);
    color: var(--ap-accent-ink);
    /* a light ring keeps the wine button visible over the wine stage */
    box-shadow: var(--ap-halo), var(--ap-shadow-lg);
    transition:
      transform var(--ap-dur-hover) var(--ap-ease),
      background var(--ap-dur-hover);
  }
  .ap-chat-button:hover {
    background: var(--ap-accent-hover);
    transform: translateY(calc(var(--ap-nudge) * -1));
  }
  .ap-chat-button svg {
    width: var(--ap-icon-2xl);
    height: var(--ap-icon-2xl);
  }
  .ap-chat-button[aria-expanded='true'] {
    background: var(--ap-ink);
  }
  .ap-compare-tray:not([hidden]) ~ .ap-chat-root .ap-chat-button {
    bottom: calc(var(--ap-float-inset) + var(--ap-float-stack));
  }
  /* The panel opens above the launcher: its inset, the button and a gap. */
  .ap-chat {
    --chat-bottom: calc(var(--ap-float-inset) + var(--ap-control-xl) + var(--space-md));
    position: fixed;
    right: var(--ap-float-inset);
    bottom: var(--chat-bottom);
    z-index: var(--z-chat);
    display: flex;
    flex-direction: column;
    width: min(400px, calc(100vw - 2 * var(--space-lg)));
    height: min(640px, calc(100dvh - var(--chat-bottom) - var(--space-2xl)));
    overflow: hidden;
    border-radius: var(--ap-radius-xl);
    background: var(--ap-surface);
    box-shadow: var(--ap-shadow-lg), var(--ap-outline-line);
    animation: ap-rise var(--ap-dur-state) var(--ap-ease);
  }
  .ap-chat-head {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-lg) var(--space-sm-md) var(--space-md) var(--space-lg-xl);
    border-bottom: 1px solid var(--ap-line);
  }
  .ap-chat-head > div {
    flex: 1;
    min-width: 0;
  }
  .ap-chat-head h2 {
    font-size: var(--ap-text-lg);
  }
  .ap-chat-head p {
    color: var(--ap-muted);
    font-size: var(--ap-text-xs);
  }
  .ap-chat-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-sm-md);
    overflow-y: auto;
    padding: var(--space-lg);
    overscroll-behavior: contain;
  }
  .ap-chat-intro {
    display: grid;
    gap: var(--space-md);
    color: var(--ap-ink-soft);
    font-size: var(--ap-text-sm);
  }
  .ap-chat-suggest {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs-sm);
  }
  .ap-chat-suggest .ap-chip {
    min-height: var(--ap-control-sm);
    white-space: normal;
    text-align: left;
  }
  .ap-chat-msg {
    max-width: 88%;
    padding: var(--space-sm-md) var(--space-lg);
    border-radius: var(--ap-radius-xl);
    font-size: var(--ap-text-sm);
    line-height: var(--ap-leading-normal);
    overflow-wrap: anywhere;
  }
  .ap-chat-msg.is-user {
    align-self: flex-end;
    border-bottom-right-radius: var(--ap-radius-2xs);
    background: var(--ap-ink);
    color: var(--ap-surface);
  }
  .ap-chat-msg.is-assistant {
    align-self: flex-start;
    border-bottom-left-radius: var(--ap-radius-2xs);
    background: var(--ap-sunk);
    color: var(--ap-ink);
  }
  .ap-chat-perfumes {
    display: grid;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
  }
  .ap-chat-perfume {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm) var(--space-xs) var(--space-xs);
    border-radius: var(--ap-radius-sm);
    background: var(--ap-surface);
    font-size: var(--ap-text-sm);
    font-weight: var(--ap-weight-semibold);
  }
  .ap-chat-perfume:hover {
    box-shadow: var(--ap-outline-strong);
  }
  .ap-chat-perfume img {
    width: var(--ap-thumb-xs);
    height: var(--ap-thumb-xs);
    object-fit: contain;
    border-radius: var(--ap-radius-2xs);
    mix-blend-mode: multiply;
  }
  .ap-chat-msg.is-typing {
    display: flex;
    gap: var(--space-xs);
    padding: var(--space-lg);
  }
  .ap-chat-msg.is-typing span {
    width: var(--ap-dot);
    height: var(--ap-dot);
    border-radius: var(--ap-round);
    background: var(--ap-muted);
    animation: ap-pulse var(--ap-dur-pulse) var(--ap-ease-in-out) infinite;
  }
  .ap-chat-msg.is-typing span:nth-child(2) {
    animation-delay: var(--ap-dur-hover);
  }
  .ap-chat-msg.is-typing span:nth-child(3) {
    animation-delay: calc(var(--ap-dur-stagger) * 2);
  }
  .ap-chat-note {
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--ap-radius-lg);
    background: var(--ap-accent-soft);
    color: var(--ap-ink-soft);
    font-size: var(--ap-text-sm);
  }
  .ap-chat-note .ap-button {
    margin-top: var(--space-sm-md);
  }
  .ap-chat-form {
    display: flex;
    align-items: flex-end;
    gap: var(--space-sm);
    padding: var(--space-sm-md) var(--space-sm-md) var(--space-md) var(--space-lg);
    border-top: 1px solid var(--ap-line);
  }
  /* assistant.js grows the field with its text through --chat-input-h. */
  .ap-chat-form textarea {
    height: var(--chat-input-h, auto);
    flex: 1;
    min-width: 0;
    min-height: var(--ap-control);
    max-height: var(--ap-chat-input-max);
    padding: var(--space-sm-md) var(--space-md);
    border: 1px solid var(--ap-field-line);
    border-radius: var(--ap-radius-xl);
    background: var(--ap-paper);
    font-size: var(--ap-text-sm);
    line-height: var(--ap-leading-normal);
    resize: none;
  }
  .ap-chat-form textarea:focus {
    outline: none;
    border-color: var(--ap-accent);
    box-shadow: var(--ap-focus);
  }
  .ap-chat-send {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: var(--ap-control);
    height: var(--ap-control);
    border-radius: var(--ap-round);
    background: var(--ap-accent);
    color: var(--ap-accent-ink);
  }
  .ap-chat-send:disabled {
    opacity: var(--ap-opacity-disabled);
  }
  .ap-chat-send svg {
    width: var(--ap-icon);
    height: var(--ap-icon);
  }
  @media (max-width: 740px) {
    .ap-chat-button {
      bottom: calc(var(--ap-float-inset) + env(safe-area-inset-bottom));
    }
    .ap-compare-tray:not([hidden]) ~ .ap-chat-root .ap-chat-button {
      bottom: calc(var(--ap-float-inset) + var(--ap-float-stack) + env(safe-area-inset-bottom));
    }
    .ap-chat {
      inset: 0;
      width: 100%;
      height: 100dvh;
      border-radius: 0;
    }
    .ap-chat-head {
      padding-top: calc(var(--space-lg) + env(safe-area-inset-top));
    }
    .ap-chat-form {
      padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom));
    }
    body.has-chat {
      overflow: hidden;
    }
    body.has-chat .ap-chat-button {
      display: none;
    }
    body.has-chat .ap-toast {
      top: calc(var(--space-md) + env(safe-area-inset-top));
      bottom: auto;
      z-index: var(--z-toast);
    }
  }
  @media (max-width: 1023px), (pointer: coarse) {
    .ap-chat-form textarea {
      font-size: var(--ap-input-text);
    }
  }
}

/* Page styles and their responsive variants: drafts. */
@layer pages {
  /* Adding a missing perfume with AI */
  .ap-draft-photo {
    position: relative;
    display: block;
    cursor: pointer;
  }
  .ap-draft-photo input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
  }
  .ap-draft-photo-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm-md);
    min-height: var(--ap-control-xl);
    border: 1px dashed var(--ap-line-strong);
    border-radius: var(--ap-radius-lg);
    color: var(--ap-ink-soft);
    font-size: var(--ap-text-sm);
    transition:
      border-color var(--ap-dur-hover),
      background var(--ap-dur-hover);
  }
  .ap-draft-photo:hover .ap-draft-photo-box,
  .ap-draft-photo input:focus-visible + .ap-draft-photo-box {
    border-color: var(--ap-accent);
    background: var(--ap-accent-soft);
  }
  .ap-draft-photo-box svg {
    width: var(--ap-icon-lg);
    height: var(--ap-icon-lg);
  }
  .ap-draft-preview {
    display: flex;
    align-items: center;
    gap: var(--space-md);
  }
  .ap-draft-preview img {
    width: var(--ap-thumb-lg);
    height: var(--ap-thumb-lg);
    object-fit: cover;
    border-radius: var(--ap-radius-sm);
  }
  .ap-draft-wait {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-2xl) 0;
    color: var(--ap-ink-soft);
  }
  .ap-draft-card {
    display: grid;
    gap: var(--space-sm-md);
    margin: var(--space-md) 0 var(--space-lg-xl);
    padding: var(--space-lg-xl);
    border-radius: var(--ap-radius-lg);
    background: var(--ap-paper);
  }
  .ap-draft-card h3 {
    font-size: var(--ap-text-3xl);
  }
  .ap-draft-card > p {
    color: var(--ap-ink-soft);
    font-size: var(--ap-text-sm);
  }
  .ap-draft-sources summary {
    cursor: pointer;
    color: var(--ap-muted);
    font-size: var(--ap-text-sm);
  }
  .ap-draft-sources ul {
    margin: var(--space-sm) 0 0;
    padding-left: var(--space-lg-xl);
    font-size: var(--ap-text-sm);
  }
  /* Photo choice in an AI draft: the first candidate is preselected, «Без фото» keeps the placeholder. */
  .ap-draft-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    gap: var(--space-sm);
    margin-bottom: var(--space-xs-sm);
  }
  .ap-draft-photos label {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--ap-radius-sm);
    background: var(--ap-surface);
    box-shadow: var(--ap-ring);
    cursor: pointer;
  }
  .ap-draft-photos input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }
  .ap-draft-photos img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
  }
  .ap-draft-photos label:has(input:checked) {
    box-shadow: var(--ap-ring-accent-bold);
  }
  .ap-draft-photos label:has(input:focus-visible) {
    outline: var(--ap-focus-width) solid var(--ap-accent);
    outline-offset: var(--ap-focus-offset);
  }
  .ap-draft-nophoto span {
    display: grid;
    place-items: center;
    height: 100%;
    padding: var(--space-xs-sm);
    color: var(--ap-muted);
    font-size: var(--ap-text-xs);
    text-align: center;
  }
  .ap-draft-warning {
    margin-top: var(--space-xs);
    background: var(--ap-accent-soft);
  }
}

/* Reference pages (server-owned): /notes/, /accords/, /brands/, /perfumers/ and one page per entity. Flat paper
   sections built from shared parts — ap-section, ap-grid/ap-card, ap-catalog-paging, ap-button; this module only
   lays out the heading with its definition, the letter row, the alphabetical list and the related concepts. */
@layer pages {
  .ap-reference {
    display: grid;
    gap: var(--space-3xl);
    padding-bottom: var(--space-4xl);
  }
  .ap-reference-head {
    display: grid;
    gap: var(--space-lg);
    padding-top: var(--space-lg);
  }
  .ap-reference-head h1 {
    max-width: var(--ap-measure-xl);
    font-size: var(--ap-text-stage);
    line-height: var(--ap-leading-tight);
    letter-spacing: var(--ap-tracking-tighter);
  }
  .ap-reference-lead {
    max-width: var(--ap-measure-lg);
    color: var(--ap-ink-soft);
    font-size: var(--ap-text-xl);
    line-height: var(--ap-leading-relaxed);
  }
  .ap-reference-actions { padding-top: var(--space-xs); }
  .ap-reference-section .ap-help { margin-top: var(--space-lg); max-width: var(--ap-measure-lg); }

  /* Letters of an index: plain links in the catalogue page-number look. */
  .ap-reference-letters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    padding-top: var(--space-sm);
  }
  .ap-reference-letters a {
    display: inline-grid;
    place-items: center;
    min-width: var(--ap-touch);
    height: var(--ap-touch);
    padding: 0 var(--space-sm);
    border-radius: var(--ap-radius-sm);
    color: var(--ap-ink-soft);
    font-size: var(--ap-text-sm);
  }
  .ap-reference-letters a:hover { background: var(--ap-sunk); color: var(--ap-ink); }
  .ap-reference-letters a[aria-current='page'] { background: var(--ap-accent); color: var(--ap-accent-ink); }

  /* Alphabetical list: newspaper columns, one name per line. */
  .ap-reference-index {
    columns: 4 200px;
    column-gap: var(--space-2xl);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ap-reference-index li {
    break-inside: avoid;
    padding-block: var(--space-xs);
    line-height: var(--ap-leading-snug);
  }
  .ap-reference-index a:hover { color: var(--ap-accent); text-decoration: underline; text-underline-offset: var(--ap-underline-offset); }

  /* Related concepts: a group per kind, each link with its share of the page's perfumes. */
  .ap-reference-related {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: var(--space-xl) var(--space-2xl);
    margin: 0;
  }
  .ap-reference-related dt {
    margin-bottom: var(--space-sm);
    color: var(--ap-muted);
    font-size: var(--ap-text-sm);
  }
  .ap-reference-related dd { margin: 0; }
  .ap-reference-terms {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ap-reference-terms li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
    padding-block: var(--space-sm);
    border-bottom: 1px solid var(--ap-line);
  }
  .ap-reference-terms a { min-width: 0; overflow-wrap: anywhere; }
  .ap-reference-terms span {
    flex-shrink: 0;
    color: var(--ap-muted);
    font-size: var(--ap-text-sm);
    font-variant-numeric: tabular-nums;
  }

  @media (max-width: 640px) {
    .ap-reference { gap: var(--space-2xl); }
    .ap-reference-lead { font-size: var(--ap-text-lg); }
    .ap-reference-index { columns: 2 140px; column-gap: var(--space-lg); }
  }
}

/* Catalog page (layer pages): search and quick accords on the stage; from 1024 px the filter column left of the
   results, narrower the «Фильтры» button with a bottom sheet; the line above the results and removable filter chips.
   Only tokens from tokens.css are used. */
@layer pages {
  .ap-catalog-main { scroll-margin-top: calc(var(--ap-header) + var(--space-md)); }
  .ap-catalog-paging { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) 0; }
  .ap-catalog-paging[data-position='bottom'] { margin-top: var(--space-xl); border-top: 1px solid var(--ap-line); }
  .ap-catalog-range { color: var(--ap-muted); font-size: var(--ap-text-sm); font-variant-numeric: tabular-nums; }
  .ap-catalog-pages { display: flex; align-items: center; gap: var(--space-2xs); }
  .ap-page-number { display: inline-grid; place-items: center; min-width: var(--ap-touch); height: var(--ap-touch); padding: 0 var(--space-sm-md); border-radius: var(--ap-radius-sm); font-size: var(--ap-text-sm); font-variant-numeric: tabular-nums; }
  .ap-page-number:hover { background: var(--ap-sunk); }
  .ap-page-number[aria-current='page'] { background: var(--ap-accent); color: var(--ap-accent-ink); }
  .ap-page-number:disabled { opacity: var(--ap-opacity-ghost); cursor: default; }
  .ap-page-jump { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); color: var(--ap-muted); font-size: var(--ap-text-sm); }
  .ap-page-jump label { display: flex; align-items: center; gap: var(--space-sm); }
  .ap-page-jump input { width: 8ch; min-height: var(--ap-touch); padding: var(--space-sm); font-size: var(--ap-text-base); text-align: center; font-variant-numeric: tabular-nums; }
  @media (max-width: 640px) { .ap-catalog-paging { justify-content: center; } .ap-catalog-range { flex-basis: 100%; text-align: center; } .ap-page-number { padding: 0 var(--space-xs-sm); min-width: var(--ap-touch); } }
  @media (max-width: 420px) { .ap-page-edge, .ap-page-gap { display: none; } }
  .ap-searchbar {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
  }
  .ap-quick-accords {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ap-quick-accords > .ap-chip { flex: 0 0 auto; white-space: nowrap; min-height: var(--ap-touch); }

  /* Filter column and results */
  .ap-catalog-layout {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    align-items: start;
    gap: var(--space-2xl);
  }
  .ap-filter-side {
    position: sticky;
    top: calc(var(--ap-header) + var(--space-lg));
    max-height: calc(100vh - var(--ap-header) - var(--space-2xl));
    overflow-y: auto;
    margin-right: calc(var(--space-sm) * -1);
    padding-right: var(--space-sm);
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--ap-line-strong) transparent;
  }
  .ap-filter-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: var(--space-md);
  }
  .ap-filter-head h2 {
    font-size: var(--ap-text-3xl);
  }
  .ap-filter-group { border-bottom: 0; }
  .ap-filter-reset { position: sticky; bottom: 0; padding-block: var(--space-md); background: var(--ap-paper); z-index: var(--z-raised); }
  .ap-filter-reset:has([hidden]) { display: none; }
  .ap-filter-reset .ap-button { width: 100%; }
  .ap-catalog-main > .ap-searchbar { margin-bottom: var(--space-md); }
  .ap-catalog-main > .ap-quick-accords { margin-bottom: var(--space-xl); }
  /* Disclosure chrome (height, padding, +/−) comes from components/interactions.css. */
  .ap-filter-group > summary {
    border-radius: 0;
    font-size: var(--ap-text-base);
    font-weight: var(--ap-weight-semibold);
  }
  .ap-filter-group > summary > span:first-child {
    flex: 1;
  }
  .ap-filter-body {
    padding-block: var(--space-md) var(--space-lg);
  }
  .ap-filter-n {
    display: inline-grid;
    place-items: center;
    min-width: var(--ap-icon-lg);
    height: var(--ap-icon-lg);
    padding: 0 var(--space-xs-sm);
    border-radius: var(--ap-pill);
    background: var(--ap-accent);
    color: var(--ap-accent-ink);
    font-size: var(--ap-text-xs);
    font-weight: var(--ap-weight-semibold);
    font-variant-numeric: tabular-nums;
  }
  .ap-filter-n:empty {
    display: none;
  }
  .ap-filter-side > .ap-filter-shelf {
    padding: var(--space-lg) 0;
  }

  /* Controls of a group */
  .ap-filter-block + .ap-filter-block {
    margin-top: var(--space-lg);
  }
  .ap-filter-block h3 {
    margin: 0 0 var(--space-sm);
    color: var(--ap-muted);
    font-size: var(--ap-text-sm);
    font-weight: var(--ap-weight-medium);
  }
  .ap-filter-body .ap-segmented {
    display: flex;
  }
  .ap-filter-body .ap-segmented button {
    flex: 1;
    padding: 0 var(--space-sm);
  }
  .ap-filter-search {
    margin-bottom: var(--space-sm);
  }
  .ap-segmented + .ap-filter-search {
    margin-top: var(--space-md);
  }
  .ap-filter-search input {
    min-height: var(--ap-control);
    font-size: var(--ap-text-base);
  }
  .ap-filter-search svg {
    width: var(--ap-icon);
    height: var(--ap-icon);
  }
  .ap-filter-terms {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs-sm);
  }
  .ap-filter-count {
    color: var(--ap-faint);
    font-size: var(--ap-text-xs);
    font-variant-numeric: tabular-nums;
  }
  .ap-chip[aria-pressed='true'] .ap-filter-count {
    color: inherit;
    opacity: var(--ap-opacity-soft);
  }
  .ap-chip[data-exclude] {
    border-color: var(--ap-danger-line);
    background: var(--ap-danger-soft);
    color: var(--ap-danger);
  }
  .ap-filter-hint {
    padding: var(--space-sm) 0;
    color: var(--ap-muted);
    font-size: var(--ap-text-sm);
  }
  .ap-filter-more {
    margin-top: var(--space-xs);
  }

  /* In the column a term is a row with a check box, its name and its count. */
  .ap-filter-side .ap-term-list {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
  }
  .ap-filter-side .ap-term {
    gap: var(--space-sm-md);
    min-height: var(--ap-control-sm);
    padding: 0 var(--space-sm);
    margin-inline: calc(var(--space-sm) * -1);
    border: 0;
    border-radius: var(--ap-radius-sm);
    background: none;
    color: var(--ap-ink);
    font-size: var(--ap-text-md);
    white-space: normal;
    text-align: left;
  }
  .ap-filter-side .ap-term::before {
    content: '';
    flex-shrink: 0;
    width: var(--ap-icon-md);
    height: var(--ap-icon-md);
    border: var(--ap-stroke) solid var(--ap-field-line);
    border-radius: var(--ap-radius-xs);
    background: var(--ap-surface) center / var(--ap-icon-xs) no-repeat;
    transition:
      background-color var(--ap-dur-press),
      border-color var(--ap-dur-press);
  }
  .ap-filter-side .ap-term:hover {
    background: var(--ap-sunk);
  }
  .ap-filter-side .ap-term[aria-pressed='true'] {
    background: none;
    color: var(--ap-ink);
    font-weight: var(--ap-weight-semibold);
  }
  .ap-filter-side .ap-term[aria-pressed='true']::before {
    border-color: var(--ap-accent);
    background-color: var(--ap-accent);
    background-image: var(--ap-check);
  }
  .ap-filter-side .ap-term[data-radio]::before {
    border-radius: var(--ap-round);
  }
  .ap-filter-side .ap-term[data-radio][aria-pressed='true']::before {
    background-image: none;
    box-shadow: var(--ap-radio-ring);
  }
  .ap-filter-side .ap-term[data-exclude] {
    color: var(--ap-danger);
  }
  .ap-filter-side .ap-term[data-exclude]::before {
    border-color: var(--ap-danger);
    background-color: var(--ap-danger);
    background-image: var(--ap-cross);
  }
  .ap-term-label {
    flex: 1;
  }
  .ap-filter-side .ap-filter-more {
    align-self: flex-start;
    margin-top: var(--space-sm);
  }

  .ap-filter-years {
    display: flex;
    align-items: flex-end;
    gap: var(--space-sm);
    margin-top: var(--space-md);
  }
  .ap-filter-years > span {
    padding-bottom: var(--space-sm-md);
    color: var(--ap-faint);
  }
  .ap-filter-year {
    display: grid;
    flex: 1;
    gap: var(--space-xs);
    color: var(--ap-muted);
    font-size: var(--ap-text-xs);
  }
  .ap-filter-year input {
    width: 100%;
    min-height: var(--ap-control);
    padding: 0 var(--space-md);
    border: 1px solid var(--ap-field-line);
    border-radius: var(--ap-radius-md);
    background: var(--ap-surface);
    color: var(--ap-ink);
    font-size: var(--ap-text-base);
    font-variant-numeric: tabular-nums;
  }
  .ap-filter-year input:focus {
    outline: none;
    border-color: var(--ap-accent);
    box-shadow: var(--ap-focus);
  }
  .ap-filter-shelf {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--ap-ink-soft);
    font-size: var(--ap-text-sm);
    cursor: pointer;
  }
  .ap-filter-shelf input {
    width: var(--ap-icon);
    height: var(--ap-icon);
    accent-color: var(--ap-accent);
  }

  /* Above the results: count and sorting; the «Фильтры» button only without the column. */
  .ap-filterbar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-md);
    padding-bottom: var(--space-md);
  }
  .ap-filterbar .ap-results-count {
    flex: 1;
  }
  .ap-results-count {
    color: var(--ap-muted);
    font-size: var(--ap-text-sm);
    font-variant-numeric: tabular-nums;
  }
  .ap-filter-all {
    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs-sm);
    min-height: var(--ap-control);
    padding: 0 var(--space-lg);
    border: 1px solid var(--ap-line-strong);
    border-radius: var(--ap-pill);
    background: var(--ap-surface);
    color: var(--ap-ink);
    font-size: var(--ap-text-md);
    font-weight: var(--ap-weight-medium);
  }
  .ap-filter-all svg {
    width: var(--ap-icon);
    height: var(--ap-icon);
  }
  .ap-filter-sort {
    display: grid;
    flex-shrink: 0;
    align-items: center;
    gap: var(--space-xs);
    color: var(--ap-muted);
    font-size: var(--ap-text-sm);
  }
  .ap-filter-select { display: block; position: relative; min-width: 0; }
  .ap-filter-sort select {
    width: 100%;
    min-height: var(--ap-control-md);
    padding: 0 var(--space-2xl-3xl) 0 var(--space-lg);
    border: 0;
    border-radius: var(--ap-pill);
    background: var(--ap-well);
    color: var(--ap-ink);
    font: var(--ap-weight-medium) var(--ap-text-md) var(--ap-body);
    cursor: pointer;
    appearance: none;
  }
  .ap-filter-sort select:focus-visible {
    outline: none;
    box-shadow: var(--ap-focus);
  }
  .ap-filter-sort svg {
    position: absolute;
    top: 50%;
    right: var(--space-md);
    width: var(--ap-icon-md);
    height: var(--ap-icon-md);
    pointer-events: none;
    translate: 0 -50%;
  }
  .ap-filter-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs-sm);
    margin-bottom: var(--space-xl);
  }
  .ap-filter-summary:not(:has(.ap-filter-chip)) {
    display: none;
  }
  .ap-filter-summary > .ap-results-count {
    display: none;
  }
  .ap-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    min-height: var(--ap-control-xs);
    padding: 0 var(--space-sm) 0 var(--space-md);
    border-radius: var(--ap-pill);
    background: var(--ap-accent-soft);
    color: var(--ap-accent);
    font-size: var(--ap-text-sm);
    font-weight: var(--ap-weight-medium);
    transition: background var(--ap-dur-hover);
  }
  .ap-filter-chip svg {
    width: var(--ap-icon-sm);
    height: var(--ap-icon-sm);
  }
  .ap-filter-chip:hover {
    background: var(--ap-accent-line);
  }
  .ap-catalog-main .ap-grid {
    grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  }
  .ap-catalog-foot {
    margin-top: var(--space-2xl);
    color: var(--ap-muted);
    font-size: var(--ap-text-sm);
    text-align: center;
  }

  /* Bottom sheet: every group, a count on the apply button. */
  .ap-sheet {
    inset: auto 0 0;
    width: 100%;
    max-width: 100%;
    max-height: 92dvh;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--ap-radius-xl) var(--ap-radius-xl) 0 0;
    background: var(--ap-surface);
    color: var(--ap-ink);
    box-shadow: var(--ap-shadow-lg);
  }
  .ap-sheet[open] {
    display: flex;
    flex-direction: column;
    animation: ap-sheet-up var(--ap-dur-state) var(--ap-ease);
  }
  .ap-sheet::backdrop {
    background: var(--ap-backdrop);
  }
  .ap-sheet-head {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-md) var(--space-md) var(--space-lg-xl);
    border-bottom: 1px solid var(--ap-line);
  }
  .ap-sheet-head h2 {
    flex: 1;
    margin: 0;
    outline: none;
    font-size: var(--ap-text-3xl);
  }
  .ap-sheet-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 var(--space-lg-xl) var(--space-xl);
    overscroll-behavior: contain;
  }
  .ap-filter-section {
    padding: var(--space-lg-xl) 0;
    border-bottom: 1px solid var(--ap-line);
  }
  .ap-filter-section > h3 {
    margin: 0 0 var(--space-md);
    font-size: var(--ap-text-xl);
    font-weight: var(--ap-weight-semibold);
  }
  .ap-sheet-body > .ap-filter-shelf {
    padding-top: var(--space-lg-xl);
    font-size: var(--ap-text-base);
  }
  .ap-sheet-foot {
    padding: var(--space-md) var(--space-lg) calc(var(--space-md) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--ap-line);
  }
  .ap-sheet-foot .ap-button {
    width: 100%;
    min-height: var(--ap-control-lg);
    font-size: var(--ap-text-xl);
  }
  @keyframes ap-sheet-up {
    from {
      transform: translateY(100%);
    }
  }
  /* Without the column: the bar sticks under the header with «Фильтры» and sorting. */
  @media (max-width: 1023px) {
    .ap-catalog-layout {
      display: block;
    }
    .ap-filter-side {
      display: none;
    }
    .ap-filterbar {
      position: sticky;
      top: var(--ap-header);
      z-index: var(--z-sticky);
      margin: 0 calc(var(--ap-gutter) * -1) var(--space-md);
      padding: var(--space-sm-md) var(--ap-gutter);
      border-bottom: 1px solid var(--ap-line);
      background: var(--ap-paper);
    }
    .ap-filterbar .ap-results-count {
      display: none;
    }
    .ap-filter-all {
      display: inline-flex;
    }
    .ap-filter-summary,
    .ap-filter-summary:not(:has(.ap-filter-chip)) {
      display: flex;
    }
    .ap-filter-summary > .ap-results-count {
      display: inline;
      margin-right: var(--space-sm);
    }
  }
  @media (max-width: 740px) {
    .ap-catalog-main .ap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ap-filterbar { flex-wrap: wrap; }
    .ap-filter-sort:not(.ap-filter-size) { flex-basis: 100%; }
    [data-view='catalog'] .ap-stage-aside {
      display: none;
    }
    .ap-quick-accords {
      width: auto;
      min-width: 0;
      margin-inline: calc(var(--ap-gutter) * -1);
      padding-inline: var(--ap-gutter);
    }
    .ap-filter-all,
    .ap-filter-sort {
      flex: 1;
    }
    .ap-filter-summary {
      margin-bottom: var(--space-lg);
    }
    .ap-filter-summary > .ap-results-count {
      flex-basis: 100%;
    }
  }
  @media (max-width: 1023px), (pointer: coarse) {
    .ap-filter-sort select,
    .ap-filter-search input {
      min-height: var(--ap-touch);
      font-size: var(--ap-input-text);
    }
    .ap-filter-all,
    .ap-filter-side .ap-term,
    .ap-filter-chip {
      min-height: var(--ap-touch);
    }
  }
}

/* «Вам понравится?» on the perfume page (fit.js): the forecast panel on the first screen and the reasons on the
   wine band. Built from the semantic tokens only, so the same rules read right on paper and on wine. */
@layer pages {
  /* First screen, compact (14 October 2026): the score on the left, the verdict and its reason beside it, the scale,
     the confidence and the link in one line below. */
  .ap-fit-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--space-sm) var(--space-lg);
    padding: var(--space-lg) var(--space-xl);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius-xl);
    background: var(--ap-accent-glow);
  }
  .ap-fit-hero[data-state='empty'] {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }
  .ap-fit-copy {
    display: grid;
    align-content: start;
    gap: var(--space-2xs);
  }
  .ap-fit-label {
    color: var(--ap-muted);
    font-size: var(--ap-text-xs);
    font-weight: var(--ap-weight-medium);
  }
  .ap-fit-verdict {
    color: var(--ap-ink);
    font-size: var(--ap-text-3xl);
    font-weight: var(--ap-weight-semibold);
    letter-spacing: var(--ap-tracking-tight);
    line-height: var(--ap-leading-heading);
  }
  .ap-fit-reason {
    max-width: 60ch;
    color: var(--ap-ink-soft);
    font-size: var(--ap-text-md);
    line-height: var(--ap-leading-normal);
  }
  .ap-fit-score {
    display: grid;
    justify-items: center;
    align-content: start;
    min-width: var(--ap-control-xl);
    color: var(--ap-accent);
  }
  .ap-fit-score strong {
    font-size: var(--ap-text-feature);
    font-weight: var(--ap-weight-semibold);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--ap-tracking-tighter);
    line-height: var(--ap-leading-none);
  }
  .ap-fit-score small {
    margin-right: var(--space-2xs);
    font-size: var(--ap-text-relative-half);
    font-weight: var(--ap-weight-medium);
    vertical-align: var(--ap-text-relative-half);
  }
  .ap-fit-score span {
    color: var(--ap-muted);
    font-size: var(--ap-text-xs);
  }
  .ap-fit-hero[data-tone='low'] .ap-fit-score {
    color: var(--ap-ink-soft);
  }
  .ap-fit-foot {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs) var(--space-md);
    color: var(--ap-muted);
    font-size: var(--ap-text-xs);
  }
  .ap-fit-foot .ap-text-link {
    margin-left: auto;
    font-size: var(--ap-text-xs);
  }
  .ap-fit-meter {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: var(--space-2xs);
    flex: 0 0 120px;
  }
  .ap-fit-meter i {
    height: var(--ap-bar-thin);
    border-radius: var(--ap-radius-2xs);
    background: var(--ap-line);
    transform-origin: left;
    animation: ap-fit-fill var(--ap-dur-enter) var(--ap-ease-out) both;
  }
  .ap-fit-meter i[data-on] {
    background: var(--ap-accent);
  }
  .ap-fit-hero[data-tone='low'] .ap-fit-meter i[data-on] {
    background: var(--ap-ink-soft);
  }
  @keyframes ap-fit-fill {
    from {
      transform: scaleX(0);
    }
  }

  /* Wine band: the nearest perfumes, what pulls up and down, what the perfume adds to the shelf. */
  .ap-fit {
    display: grid;
    gap: var(--space-3xl);
  }
  .ap-fit h3 small {
    margin-left: var(--space-sm);
    color: var(--ap-muted);
    font-size: var(--ap-text-sm);
    font-weight: var(--ap-weight-regular);
  }
  .ap-fit-title-score {
    color: var(--ap-accent);
  }
  .ap-fit-block {
    display: grid;
    align-content: start;
    gap: var(--space-md);
  }
  .ap-fit h3 {
    font-size: var(--ap-text-xl);
    letter-spacing: var(--ap-tracking-snug);
  }
  .ap-fit-near,
  .ap-fit-terms {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ap-fit-near li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(120px, 200px) 132px;
    gap: var(--space-xl);
    align-items: center;
    padding-block: var(--space-sm);
    border-bottom: 1px solid var(--ap-line);
  }
  .ap-fit-near .ap-plate {
    flex: 0 0 var(--ap-thumb-md);
  }
  .ap-fit-near a {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    min-width: 0;
    color: inherit;
    text-decoration: none;
  }
  .ap-fit-near-name {
    display: grid;
    min-width: 0;
    font-weight: var(--ap-weight-semibold);
  }
  .ap-fit-near-name small {
    color: var(--ap-muted);
    font-size: var(--ap-text-xs);
    font-weight: var(--ap-weight-regular);
  }
  .ap-fit-near a:hover .ap-fit-near-name {
    color: var(--ap-accent);
  }
  .ap-fit-near-sim {
    display: grid;
    grid-template-columns: 1fr 3.5ch;
    gap: var(--space-sm);
    align-items: center;
    font-size: var(--ap-text-sm);
    font-variant-numeric: tabular-nums;
    text-align: right;
  }
  .ap-fit-near-sim i {
    height: var(--ap-bar);
    border-radius: var(--ap-radius-2xs);
    background: linear-gradient(90deg, var(--ap-accent) calc(var(--v) * 100%), var(--ap-line) 0);
  }
  .ap-fit-near-rating {
    color: var(--ap-muted);
    font-size: var(--ap-text-sm);
    text-align: right;
  }
  .ap-fit-near-rating strong {
    color: var(--ap-ink);
    font-size: var(--ap-text-xl);
  }
  .ap-fit-why {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3xl);
  }
  .ap-fit-terms li {
    display: grid;
    grid-template-columns: var(--ap-dot-lg) minmax(0, 1fr);
    gap: var(--space-2xs) var(--space-md);
    padding-block: var(--space-sm);
    border-bottom: 1px solid var(--ap-line);
  }
  .ap-fit-terms li::before {
    content: '';
    grid-row: span 2;
    width: var(--ap-dot-lg);
    height: var(--ap-dot-lg);
    margin-top: var(--space-sm);
    border-radius: var(--ap-round);
    background: var(--ap-accent);
  }
  .ap-fit-terms[data-sign='down'] li::before {
    background: transparent;
    box-shadow: var(--ap-ring-muted);
  }
  .ap-fit-terms span {
    color: var(--ap-muted);
    font-size: var(--ap-text-sm);
  }
  .ap-fit-adds {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: var(--space-lg);
  }
  .ap-fit-adds > div {
    display: grid;
    align-content: start;
    gap: var(--space-sm);
    padding: var(--space-lg) var(--space-xl);
    border-radius: var(--ap-radius-md);
    background: var(--ap-well);
  }
  .ap-fit-adds p {
    color: var(--ap-ink-soft);
    line-height: var(--ap-leading-normal);
  }

  /* The section menu opens the wine band right under its liquid edge and stays while the band is read. */
  .ap-perfume-band > .ap-subnav {
    align-self: start;
    margin-top: calc(-1 * var(--space-4xl));
    margin-bottom: var(--space-xl);
  }
  .ap-perfume-band .ap-section {
    scroll-margin-top: calc(var(--ap-header) + var(--space-4xl));
  }

  @media (max-width: 740px) {
    .ap-fit-hero {
      padding: var(--space-md) var(--space-lg);
    }
    .ap-fit-verdict {
      font-size: var(--ap-text-2xl);
    }
    .ap-fit-near li {
      grid-template-columns: minmax(0, 1fr) auto;
      gap: var(--space-xs) var(--space-md);
    }
    .ap-fit-near-sim {
      grid-column: 1 / -1;
      grid-row: 2;
    }
    .ap-fit-why {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-2xl);
    }
  }
  @container perfume-info (max-width: 480px) {
    .ap-fit-hero {
      padding: var(--space-md) var(--space-lg);
    }
    .ap-fit-verdict {
      font-size: var(--ap-text-2xl);
    }
  }
}

/* Public catalog analytics on the perfume page (CatalogInsightsView): similar perfumes, unusualness, popularity. */
@layer pages {
  .ap-insights { display: grid; gap: var(--space-3xl); min-width: 0; padding-bottom: var(--space-2xl); }
  /* The slider controls sit at the top right of the section; the heading keeps room for them. */
  .ap-insight-similar { --nav-room: 150px; position: relative; max-width: var(--ap-measure-lg); }
  .ap-insight-similar .ap-section-head { padding-right: var(--nav-room); min-height: var(--ap-touch); flex-wrap: nowrap; justify-content: flex-start; align-items: center; }
  .ap-insight-section { scroll-margin-top: calc(var(--ap-header) + var(--ap-subnav-offset)); }
  .ap-insights p, .ap-insights a { overflow-wrap: anywhere; }
  .ap-insight-caption { color: var(--ap-muted); font-size: var(--ap-text-sm); line-height: var(--ap-leading-relaxed); max-width: 70ch; margin: 0 0 var(--space-md); }
  .ap-insight-candidate { border-top: 1px solid var(--ap-line); padding: var(--space-lg) 0; }
  .ap-insight-candidate-head { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--space-lg); align-items: center; }
  .ap-insight-candidate h3 { margin: var(--space-xs-sm) 0; font-size: var(--ap-text-xl); font-weight: var(--ap-weight-medium); }
  .ap-insight-candidate h3 a { font-size: inherit; text-decoration: none; }
  .ap-insight-candidate h3 a:hover { text-decoration: underline; }
  .ap-insight-similarity { display: grid; text-align: right; gap: var(--space-xs-sm); font-variant-numeric: tabular-nums; }
  .ap-insight-similarity strong { font-size: var(--ap-text-5xl); font-weight: var(--ap-weight-medium); color: var(--ap-accent); }
  .ap-insight-similarity small { font-size: var(--ap-text-sm); color: var(--ap-muted); }
  .ap-insight-similarity > span { font-size: var(--ap-text-xs); color: var(--ap-muted); }
  .ap-insight-common-lead { margin: var(--space-xs) 0 0; color: var(--ap-accent); font-size: var(--ap-text-sm); }
  .ap-insight-comparison { margin-top: var(--space-xs); }
  .ap-fact-art { width: var(--ap-art-lg); height: var(--ap-art-lg); object-fit: contain; flex: none; }
  .ap-insight-table-wrap { border: 1px solid var(--ap-line); border-radius: var(--ap-radius-md); overflow: hidden; margin-bottom: var(--space-md); }
  .ap-insight-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--ap-text-sm); }
  .ap-insight-table th, .ap-insight-table td { padding: var(--space-lg); text-align: left; vertical-align: top; border-bottom: 1px solid var(--ap-line); overflow-wrap: anywhere; }
  .ap-insight-table thead { background: var(--ap-sunk); }
  .ap-insight-table th:first-child { width: 22%; }
  .ap-insight-table tbody th { font-weight: var(--ap-weight-medium); }
  .ap-insight-table th .ap-fact-art { display: block; width: var(--ap-art-sm); height: var(--ap-art-sm); margin-bottom: var(--space-xs); }
  .ap-insight-terms { display: flex; flex-wrap: wrap; gap: var(--space-xs); list-style: none; margin: 0; padding: 0; }
  .ap-insight-terms li { border: 1px solid var(--ap-line); border-radius: var(--ap-radius-sm); padding: var(--space-xs-sm) var(--space-xs); }
  .ap-insight-terms .is-common { background: var(--ap-accent-soft); color: var(--ap-accent); border-color: transparent; font-weight: var(--ap-weight-medium); }
  .ap-insight-comparison-body { padding: var(--space-sm) 0 var(--space-md); }
  .ap-insights h4, .ap-insight-evidence h3 { margin: 0 0 var(--space-md); font-size: var(--ap-text-sm); font-weight: var(--ap-weight-semibold); overflow-wrap: anywhere; }
  .ap-insight-evidence { margin-top: var(--space-md); }
  .ap-insight-evidence > .ap-accords { margin-bottom: var(--space-lg); }
  .ap-insight-evidence h4 { margin-top: var(--space-md); }
  .ap-insight-unusual { display: grid; grid-template-columns: max-content minmax(0, 380px); gap: var(--space-xl); align-items: center; margin: var(--space-lg) 0; }
  .ap-insight-number { display: flex; align-items: baseline; font-variant-numeric: tabular-nums; color: var(--ap-muted); }
  .ap-insight-number strong { color: var(--ap-accent); font-size: var(--ap-text-feature); line-height: var(--ap-leading-none); letter-spacing: var(--ap-tracking-tighter); font-weight: var(--ap-weight-medium); }
  .ap-insight-number > span { font-size: var(--ap-text-xl); }
  .ap-insight-interpretation { margin: 0 0 var(--space-md); font-size: var(--ap-text-xl); font-weight: var(--ap-weight-medium); }
  .ap-insight-scale { display: flex; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-xs); color: var(--ap-muted); font-size: var(--ap-text-xs); }
  .ap-insight-frequencies { margin: 0 0 var(--space-lg); max-width: var(--ap-measure); }
  .ap-insight-frequencies > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs) var(--space-lg); padding: var(--space-sm) 0; border-bottom: 1px solid var(--ap-line); font-size: var(--ap-text-sm); }
  .ap-insight-frequencies dd { margin: 0; color: var(--ap-muted); font-variant-numeric: tabular-nums; }
  .ap-insight-method { margin-top: 0; border-top: 1px solid var(--ap-line); }
  .ap-insights a:focus-visible { outline: var(--ap-focus-width) solid var(--ap-accent); outline-offset: var(--ap-focus-offset-lg); }
  .ap-insight-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl); align-items: start; }
  .ap-insight-metrics > .ap-section { padding-inline: 0; min-width: 0; }
  .ap-insight-metrics .ap-section-head { display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: var(--space-md); }
  /* A long title wraps beside its icon and help instead of pushing the help button to its own line. */
  .ap-insight-metrics h2 { min-width: 0; font-size: var(--ap-text-3xl); }
  .ap-insight-metrics .ap-section-head > :not(h2) { flex-shrink: 0; }
  .ap-insight-metrics .ap-insight-unusual { grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-lg); }
  .ap-insight-metrics .ap-insight-interpretation { font-size: var(--ap-text-md); }
  .ap-insight-carousel { max-width: var(--ap-measure-lg); }
  .ap-insight-carousel > .ap-slider-nav { position: absolute; right: 0; top: 0; }
  .ap-insight-carousel .ap-slide { padding: var(--space-xl); border: 1px solid var(--ap-line); border-radius: var(--ap-radius-xl); background: var(--ap-surface); }
  .ap-insight-carousel .ap-insight-candidate-head { grid-template-columns: 96px minmax(0, 1fr) auto; min-height: var(--ap-thumb-xl); }
  .ap-insight-carousel .ap-plate { width: 96px; height: var(--ap-thumb-xl); background: transparent; box-shadow: none; }
  .ap-insight-carousel .ap-insight-candidate h3 { font-size: var(--ap-text-3xl); }
  .ap-insight-carousel .ap-insight-comparison { margin-top: var(--space-lg); }
  @media (max-width: 900px) {
    .ap-insight-metrics { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 640px) {
    .ap-insight-similar { --nav-room: 100px; }
    .ap-insight-similar .ap-slider-count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .ap-insight-carousel .ap-slide { padding: var(--space-md); }
    .ap-insight-carousel .ap-insight-candidate-head { grid-template-columns: 80px minmax(0, 1fr); min-height: 0; }
    .ap-insight-carousel .ap-plate { width: 80px; height: 112px; }
    .ap-insight-carousel .ap-insight-candidate h3 { font-size: var(--ap-text-xl); }
    .ap-insight-candidate-head { grid-template-columns: 60px minmax(0, 1fr); gap: var(--space-md); }
    .ap-insight-candidate h3 { font-size: var(--ap-text-md); }
    .ap-insight-similarity { grid-column: 2; display: flex; text-align: left; align-items: baseline; gap: var(--space-xs); }
    .ap-insight-similarity strong { font-size: var(--ap-text-xl); }
    .ap-insight-table, .ap-insight-table tbody, .ap-insight-table tr, .ap-insight-table td, .ap-insight-table th { display: block; width: auto; }
    .ap-insight-table thead { display: none; }
    .ap-insight-table th:first-child { width: auto; }
    .ap-insight-table tbody th { background: var(--ap-sunk); display: flex; gap: var(--space-xs); align-items: center; }
    .ap-insight-table th .ap-fact-art { margin: 0; }
    .ap-insight-table td::before { content: attr(data-label); display: block; font-weight: var(--ap-weight-semibold); margin-bottom: var(--space-sm); }
    .ap-insight-unusual { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  }
}

/* Public composition journeys. Shared links, disclosures, controls and surfaces retain their owners. */
@layer pages {
  .ap-discovery-section { min-width: 0; }
  .ap-discovery-section .ap-section-head { justify-content: flex-start; align-items: center; flex-wrap: nowrap; gap: var(--space-md); margin-bottom: var(--space-md); }
  .ap-discovery-section h2 { font-size: var(--ap-text-5xl); }
  .ap-discovery-section h3 { font: var(--ap-weight-medium) var(--ap-text-md)/var(--ap-leading-normal) var(--ap-body); }
  .ap-discovery-section .ap-insight-caption { max-width: 80ch; margin-bottom: var(--space-xl); }
  .ap-discovery-footnote { margin-top: var(--space-md); color: var(--ap-muted); font-size: var(--ap-text-xs); line-height: var(--ap-leading-relaxed); }
  .ap-discovery-notes { border-top: 1px solid var(--ap-line); }
  .ap-discovery-note { border-bottom: 1px solid var(--ap-line); }
  .ap-discovery-note > summary { --ap-summary-display: grid; grid-template-columns: minmax(0, 1fr) 150px 140px; column-gap: var(--space-lg); font-size: var(--ap-text-md); }
  .ap-discovery-note-name { font-weight: var(--ap-weight-semibold); }
  .ap-discovery-note-layer { color: var(--ap-muted); font-size: var(--ap-text-sm); font-weight: var(--ap-weight-regular); }
  .ap-discovery-note-share { font-size: var(--ap-text-sm); font-variant-numeric: tabular-nums; text-align: right; padding-right: var(--space-md); }
  .ap-discovery-note-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3xl); padding: var(--space-xl) var(--space-sm) var(--space-2xl); }
  .ap-discovery-note-body h3 { margin-bottom: var(--space-md); color: var(--ap-muted); }
  .ap-discovery-pairs { display: grid; gap: 0; margin: 0; font-size: var(--ap-text-md); }
  .ap-discovery-pairs > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); padding-block: var(--space-sm); border-bottom: 1px solid var(--ap-line); }
  .ap-discovery-pairs dd { display: flex; align-items: baseline; gap: var(--space-md); margin: 0; font-variant-numeric: tabular-nums; }
  .ap-discovery-pairs dd strong { min-width: 4ch; text-align: right; font-weight: var(--ap-weight-medium); }
  .ap-discovery-pairs dd span { min-width: 15ch; text-align: right; color: var(--ap-muted); font-size: var(--ap-text-xs); }
  .ap-discovery-examples { display: grid; gap: var(--space-md); list-style: none; padding: 0; margin: 0; }
  .ap-discovery-perfume { display: grid; gap: var(--space-xs-sm); min-width: 0; text-decoration: none; }
  .ap-discovery-perfume > span { font-size: var(--ap-text-xs); color: var(--ap-muted); line-height: var(--ap-leading-normal); }
  .ap-discovery-perfume strong { font-size: var(--ap-text-md); line-height: var(--ap-leading-normal); font-weight: var(--ap-weight-medium); }
  .ap-discovery-perfume:hover strong, .ap-discovery-perfume:focus-visible strong { color: var(--ap-accent); text-decoration: underline; text-underline-offset: var(--ap-underline-offset); }
  .ap-discovery-catalog-link { display: inline-flex; align-items: center; min-height: var(--ap-touch); margin-top: var(--space-md); font-size: var(--ap-text-sm); }
  .ap-discovery-form { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-md); margin-bottom: var(--space-lg); }
  .ap-discovery-form label { display: grid; gap: var(--space-sm); width: var(--ap-measure-xs); max-width: 100%; }
  .ap-discovery-form select { width: 100%; }
  .ap-discovery-form [role="status"] { align-self: center; font-size: var(--ap-text-sm); color: var(--ap-muted); }
  .ap-discovery-result-title { margin-block: var(--space-xl) var(--space-md); font-size: var(--ap-text-md); font-weight: var(--ap-weight-medium); }
  .ap-discovery-cards, .ap-discovery-route { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); padding: 0; margin: 0; list-style: none; }
  .ap-discovery-card { display: flex; flex-direction: column; gap: var(--space-lg); min-width: 0; padding: var(--space-xl); border: 1px solid var(--ap-line); border-radius: var(--ap-radius-md); }
  .ap-discovery-card-head { display: flex; align-items: start; justify-content: space-between; gap: var(--space-lg); }
  .ap-discovery-score { flex: none; font-size: var(--ap-text-xl); color: var(--ap-accent); font-variant-numeric: tabular-nums; font-weight: var(--ap-weight-medium); line-height: var(--ap-leading-normal); white-space: nowrap; }
  .ap-discovery-score small { margin-left: var(--space-xs-sm); color: var(--ap-muted); font-size: var(--ap-text-xs); font-weight: var(--ap-weight-regular); }
  .ap-discovery-differences { display: grid; gap: var(--space-md); margin: 0; font-size: var(--ap-text-sm); line-height: var(--ap-leading-relaxed); }
  .ap-discovery-differences > div { display: grid; gap: var(--space-xs-sm); }
  .ap-discovery-differences dt { color: var(--ap-muted); font-size: var(--ap-text-xs); }
  .ap-discovery-differences dd { margin: 0; }
  .ap-discovery-route { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ap-discovery-route .ap-discovery-card { border: 0; border-top: 1px solid var(--ap-line); border-radius: 0; padding: var(--space-lg) 0 0; }
  .ap-discovery-step { display: flex; align-items: baseline; gap: var(--space-md); }
  .ap-discovery-step > span { color: var(--ap-muted); font-size: var(--ap-text-sm); font-variant-numeric: tabular-nums; }
  .ap-discovery-route .ap-discovery-perfume strong { font-size: var(--ap-text-xl); }
  .ap-discovery-step-help { margin-top: auto; font-size: var(--ap-text-sm); }
  .ap-discovery-step-help p { padding: var(--space-md) var(--space-sm); color: var(--ap-muted); line-height: var(--ap-leading-relaxed); }
  /* Composition neighbourhood: a reference and aligned, directly readable comparisons. */
  .ap-neighbours { min-width: 0; }
  .ap-neighbours-origin { display: grid; grid-template-columns: var(--ap-thumb-md) minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--space-lg); padding: var(--space-xl); margin-bottom: var(--space-xl); background: var(--ap-sunk); border-radius: var(--ap-radius-md); }
  .ap-neighbours-origin .ap-discovery-perfume strong { font-size: var(--ap-text-lg); }
  .ap-neighbours-label { display: block; margin: 0 0 var(--space-sm); font-size: var(--ap-text-xs); font-weight: var(--ap-weight-regular); line-height: var(--ap-leading-normal); color: var(--ap-muted); }
  .ap-neighbours-heading, .ap-neighbour { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-2xl); }
  .ap-neighbours-heading { padding-bottom: var(--space-md); color: var(--ap-muted); font-size: var(--ap-text-xs); }
  .ap-neighbours-list { padding: 0; margin: 0; list-style: none; }
  .ap-neighbour { row-gap: var(--space-xs); padding-block: var(--space-lg); border-top: var(--ap-stroke) solid var(--ap-line); }
  .ap-neighbour-identity { display: grid; grid-template-columns: var(--ap-thumb-md) minmax(0, 1fr); align-items: start; gap: var(--space-md); }
  .ap-neighbour-identity .ap-discovery-perfume { min-height: var(--ap-touch); }
  .ap-neighbour-identity .ap-discovery-perfume > span { font-size: var(--ap-text-xs); }
  .ap-neighbour-identity .ap-discovery-perfume strong { font-size: var(--ap-text-base); }
  .ap-neighbour-score { display: flex; align-items: center; gap: var(--space-md); margin-top: var(--space-md); }
  .ap-neighbour-score .ap-discovery-score { font-size: var(--ap-text-lg); }
  .ap-neighbour-score .ap-bar-track { flex: 1; max-width: var(--ap-thumb-xl); }
  .ap-neighbours-terms { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs-sm); padding: 0; margin: 0; list-style: none; font-size: var(--ap-text-sm); line-height: var(--ap-leading-normal); }
  .ap-neighbours-terms > li { padding: var(--space-xs) var(--space-sm); border-radius: var(--ap-radius-xs); background: var(--ap-sunk); overflow-wrap: anywhere; }
  .ap-neighbour-common .ap-neighbours-terms > li { color: var(--ap-accent); background: var(--ap-accent-soft); }
  .ap-neighbours-terms > .ap-neighbours-rest { color: var(--ap-muted); background: transparent; }
  .ap-neighbours-empty { margin: 0; color: var(--ap-muted); font-size: var(--ap-text-sm); line-height: var(--ap-leading-relaxed); }
  .ap-neighbour-details { grid-column: 2 / -1; min-width: 0; font-size: var(--ap-text-xs); }
  .ap-neighbour-details > summary { justify-content: flex-start; gap: var(--space-sm); min-height: var(--ap-touch); padding: 0; color: var(--ap-accent); }
  .ap-neighbour-details .ap-discovery-differences { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: var(--space-md); gap: var(--space-lg); }
  .ap-neighbours-more { border-top: var(--ap-stroke) solid var(--ap-line); font-size: var(--ap-text-sm); }
  .ap-neighbours-more > summary { gap: var(--space-md); }
  .ap-neighbours-more > summary .ap-neighbours-label { margin: 0 0 0 auto; }
  @media (max-width: 900px) {
    .ap-discovery-note-body { gap: var(--space-xl); }
    .ap-discovery-route { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
    .ap-discovery-route .ap-discovery-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); align-items: start; gap: var(--space-md) var(--space-xl); }
    .ap-discovery-route .ap-discovery-step { grid-column: 1 / -1; }
    .ap-discovery-step-help { grid-column: 1 / -1; }
    .ap-neighbours-heading, .ap-neighbour { column-gap: var(--space-lg); }
    .ap-neighbour-identity { grid-template-columns: var(--ap-thumb-sm) minmax(0, 1fr); }
    .ap-neighbours-origin { padding: var(--space-lg); }
  }
  @media (max-width: 640px) {
    .ap-discovery-section h2 { font-size: var(--ap-text-3xl); }
    .ap-discovery-note > summary { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xs-sm) var(--space-md); }
    .ap-discovery-note-layer { grid-column: 1; grid-row: 2; font-size: var(--ap-text-xs); }
    .ap-discovery-note-share { grid-column: 2; grid-row: 1 / 3; font-size: var(--ap-text-xs); }
    .ap-discovery-note-body, .ap-discovery-cards { grid-template-columns: minmax(0, 1fr); }
    .ap-discovery-note-body { gap: var(--space-2xl); padding-top: var(--space-lg); }
    .ap-discovery-form label { width: 100%; }
    .ap-discovery-form .ap-button { width: 100%; }
    .ap-discovery-form [role="status"] { flex-basis: 100%; }
    .ap-discovery-card { padding: var(--space-lg); }
    .ap-discovery-route .ap-discovery-card { grid-template-columns: minmax(0, 1fr); }
    .ap-neighbours-origin { grid-template-columns: var(--ap-thumb-md) minmax(0, 1fr); }
    .ap-neighbours-signature { grid-column: 1 / -1; }
    .ap-neighbours-heading { display: none; }
    .ap-neighbour { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ap-neighbour-identity { grid-column: 1 / -1; grid-template-columns: var(--ap-thumb-md) minmax(0, 1fr); margin-bottom: var(--space-md); }
    .ap-neighbour-score .ap-bar-track { max-width: none; }
    .ap-neighbour-details { grid-column: 1 / -1; }
    .ap-neighbours-more > summary .ap-neighbours-label { display: none; }
  }
  @media (max-width: 380px) {
    .ap-neighbour, .ap-neighbour-details .ap-discovery-differences { grid-template-columns: minmax(0, 1fr); }
    .ap-neighbour-different { margin-top: var(--space-sm); }
  }
}

/* Personal dossier: portrait (scoped to the portrait). */
@layer pages {
  .ap-dossier {
    container: dossier / inline-size;
    position: relative;
    isolation: isolate;
    color: var(--ap-ink);
    max-width: var(--ap-content-wide);
    margin: 0 auto;
    font-family: var(--ap-body);
    line-height: var(--ap-leading-relaxed);
  }
  .ap-dossier h1,
  .ap-dossier h2,
  .ap-dossier h3 {
    font-family: var(--ap-display);
    font-weight: var(--ap-weight-semibold);
    letter-spacing: var(--ap-tracking-tight);
    color: var(--ap-ink);
  }
  .ap-dossier h2 {
    font-size: var(--ap-text-section);
    line-height: var(--ap-leading-heading);
    margin: var(--space-xs-sm) 0 var(--space-lg);
  }
  .ap-dossier p {
    margin: 0 0 var(--space-lg);
  }
  .ap-dossier a:focus-visible,
  .ap-dossier button:focus-visible,
  .ap-dossier summary:focus-visible {
    outline: var(--ap-focus-width) solid var(--ap-accent);
    outline-offset: var(--ap-focus-offset-lg);
  }
  .ap-dossier-summary {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: var(--space-4xl);
    padding: var(--space-3xl) var(--space-sm) var(--space-2xl-3xl);
    scroll-margin-top: var(--space-xl);
  }
  .ap-dossier-summary > div:first-child > p {
    font-size: var(--ap-text-sm);
    line-height: var(--ap-leading-loose);
    color: var(--ap-muted);
    max-width: var(--ap-measure-xs);
  }
  .ap-dossier-summary-copy {
    padding-top: var(--space-xs);
  }
  .ap-dossier-claim {
    margin-bottom: var(--space-xl);
  }
  .ap-dossier-claim > p {
    font-size: var(--ap-text-base);
    line-height: var(--ap-leading-loose);
    margin: var(--space-xs) 0 var(--space-sm);
    max-width: 70ch;
  }
  .ap-dossier-summary-copy > .ap-dossier-claim > p {
    font-size: var(--ap-text-xl);
    line-height: var(--ap-leading-loose);
  }
  .ap-dossier-kind {
    font-size: var(--ap-text-xs);
    font-weight: var(--ap-weight-medium);
    color: var(--ap-sage);
    letter-spacing: var(--ap-tracking-wide);
  }
  .ap-dossier-evidence {
    font-size: var(--ap-text-xs);
    color: var(--ap-muted);
    border: 0;
  }
  .ap-dossier-evidence > div {
    display: flex;
    gap: var(--space-xs-sm);
    flex-wrap: wrap;
    padding: var(--space-xs-sm) 0 var(--space-md);
  }
  .ap-dossier-evidence > div > span {
    padding: var(--space-xs-sm) var(--space-sm);
    background: var(--ap-paper);
    border-radius: var(--ap-radius-xs);
  }
  .ap-dossier-source {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    text-align: left;
    color: var(--ap-ink);
    background: var(--ap-sunk);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius-xs);
    padding: var(--space-xs-sm) var(--space-sm-md);
    font: inherit;
    min-height: var(--ap-control-md);
    cursor: pointer;
  }
  .ap-dossier-source > span {
    color: var(--ap-accent);
    white-space: nowrap;
  }
  .ap-dossier-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-xl);
  }
  .ap-dossier-heading h2 {
    margin-bottom: 0;
  }
  .ap-dossier-heading > p {
    font-size: var(--ap-text-xs);
    color: var(--ap-muted);
    margin: 0;
    max-width: 240px;
  }
  .ap-dossier-tabs {
    display: flex;
    background: var(--ap-sunk);
    padding: var(--space-xs);
    border-radius: var(--ap-radius-sm);
    gap: var(--space-2xs);
    flex-shrink: 0;
  }
  .ap-dossier-tabs > button {
    background: transparent;
    border: 0;
    color: var(--ap-muted);
    padding: var(--space-sm) var(--space-lg);
    min-height: var(--ap-control-md);
    border-radius: var(--ap-radius-xs);
    font: var(--ap-weight-medium) var(--ap-text-xs) var(--ap-body);
    cursor: pointer;
  }
  .ap-dossier-tabs > button[aria-pressed='true'] {
    background: var(--ap-surface);
    color: var(--ap-accent);
    box-shadow: var(--ap-shadow-sm);
  }
  .ap-dossier-favorites {
    padding: var(--space-2xl) var(--space-sm) var(--space-3xl);
    border-bottom: 1px solid var(--ap-line);
  }
  .ap-dossier-perfumes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-lg-xl);
    margin-top: var(--space-xl);
  }
  .ap-dossier-perfume {
    display: flex;
    flex-direction: column;
    text-align: left;
    appearance: none;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ap-ink);
    font: inherit;
    cursor: pointer;
  }
  .ap-dossier-bottle {
    position: relative;
    background: var(--ap-sunk);
    border-radius: var(--ap-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 175px;
    overflow: hidden;
    margin-bottom: var(--space-md);
  }
  .ap-dossier-bottle > img {
    object-fit: contain;
    width: 80%;
    height: 80%;
    mix-blend-mode: multiply;
    transition: transform var(--ap-dur-state);
  }
  .ap-dossier-perfume:hover img {
    transform: scale(var(--ap-hover-scale));
  }
  .ap-dossier-bottle > span {
    position: absolute;
    bottom: var(--space-sm-md);
    right: var(--space-sm-md);
    font: var(--ap-weight-semibold) var(--ap-text-3xl) var(--ap-display);
    color: var(--ap-accent);
    background: var(--ap-surface);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--ap-radius-xs);
  }
  .ap-dossier-bottle > span > small {
    font-size: var(--ap-text-xs);
    margin-left: var(--space-xs);
  }
  .ap-dossier-perfume > small {
    font-size: var(--ap-text-xs);
    color: var(--ap-muted);
    margin-bottom: var(--space-xs);
  }
  .ap-dossier-perfume > strong {
    font-weight: var(--ap-weight-medium);
    font-size: var(--ap-text-md);
    line-height: var(--ap-leading-normal);
  }
  .ap-dossier-perfume > span {
    font-size: var(--ap-text-xs);
    color: var(--ap-muted);
    margin-top: var(--space-xs-sm);
  }
  .ap-dossier-reading-head {
    padding: var(--space-2xl-3xl) var(--space-sm) var(--space-lg-xl);
  }
  .ap-dossier-reading-head > p {
    font-size: var(--ap-text-sm);
    color: var(--ap-muted);
  }
  .ap-dossier-essays {
    padding: 0 var(--space-sm);
  }
  .ap-dossier-essay {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: var(--space-4xl);
    padding: var(--space-2xl) 0;
    border-top: 1px solid var(--ap-line);
  }
  .ap-dossier-essay-heading {
    display: flex;
    gap: var(--space-lg);
  }
  .ap-dossier-essay-heading > span {
    font: var(--ap-text-xs) var(--ap-body);
    color: var(--ap-faint);
    line-height: var(--ap-art-sm);
  }
  .ap-dossier-essay-heading h2 {
    font-size: var(--ap-text-5xl);
    margin-top: 0;
  }
  .ap-dossier-essay-heading p {
    font-size: var(--ap-text-sm);
    color: var(--ap-muted);
    line-height: var(--ap-leading-loose);
    max-width: var(--ap-measure-xs);
  }
  .ap-dossier-essay-copy > .ap-dossier-claim:last-child {
    margin-bottom: 0;
  }
  .ap-dossier-essay.is-discovery {
    background: var(--ap-sunk);
    border-radius: var(--ap-radius-lg);
    padding: var(--space-2xl);
    margin: var(--space-lg-xl) calc(var(--space-sm) * -1);
    border: 0;
    gap: var(--space-2xl-3xl);
  }
  .ap-dossier-notice {
    border: 1px solid var(--ap-line-strong);
    border-radius: var(--ap-radius-md);
    background: var(--ap-sunk);
    margin: var(--space-lg-xl) 0;
    padding: var(--space-lg) var(--space-lg-xl);
    font-size: var(--ap-text-sm);
  }
  .ap-dossier-notice strong {
    font-weight: var(--ap-weight-medium);
  }
  .ap-dossier-notice p {
    margin: var(--space-xs-sm) 0 0;
    color: var(--ap-muted);
  }
  .ap-dossier-notice a {
    color: var(--ap-accent);
  }
  .ap-dossier-footer {
    padding: var(--space-xl) var(--space-sm);
    display: flex;
    justify-content: space-between;
    gap: var(--space-lg-xl);
    color: var(--ap-muted);
    font-size: var(--ap-text-xs);
  }
  .ap-dossier-footer p {
    margin: 0;
  }
  .ap-dossier-footer span {
    text-align: right;
  }
  @media (max-width: 1100px) {
    .ap-dossier-summary,
    .ap-dossier-essay {
      gap: var(--space-2xl);
      grid-template-columns: 1fr 1.3fr;
    }
  }
  @media (max-width: 740px) {
    .ap-dossier-summary {
      grid-template-columns: 1fr;
      gap: var(--space-md);
      padding: var(--space-2xl) var(--space-2xs) var(--space-lg-xl);
    }
    .ap-dossier-summary h2 br {
      display: none;
    }
    .ap-dossier-summary > div:first-child > p {
      max-width: none;
    }
    .ap-dossier-summary-copy > .ap-dossier-claim > p {
      font-size: var(--ap-text-lg);
    }
    .ap-dossier-heading {
      align-items: flex-start;
      flex-direction: column;
      gap: var(--space-lg-xl);
    }
    .ap-dossier-heading > p {
      max-width: none;
    }
    .ap-dossier-favorites {
      padding: var(--space-xl) var(--space-2xs) var(--space-2xl);
    }
    .ap-dossier-perfumes {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-xl) var(--space-lg);
    }
    .ap-dossier-bottle {
      height: 155px;
    }
    .ap-dossier-reading-head {
      padding: var(--space-2xl) var(--space-2xs) var(--space-md);
    }
    .ap-dossier-essays {
      padding: 0 var(--space-2xs);
    }
    .ap-dossier-essay {
      grid-template-columns: 1fr;
      gap: var(--space-xs-sm);
      padding: var(--space-xl) 0;
    }
    .ap-dossier-essay-heading h2 {
      font-size: var(--ap-text-4xl);
      margin-bottom: var(--space-sm-md);
    }
    .ap-dossier-essay-heading p {
      max-width: none;
    }
    .ap-dossier-essay-copy {
      padding-left: var(--space-2xl);
    }
    .ap-dossier-claim > p {
      font-size: var(--ap-text-md);
      line-height: var(--ap-leading-loose);
    }
    .ap-dossier-essay.is-discovery {
      padding: var(--space-xl) var(--space-lg-xl);
      margin: var(--space-lg) calc(var(--space-2xs) * -1);
      gap: var(--space-xs-sm);
    }
    .ap-dossier-footer {
      flex-direction: column;
      gap: var(--space-xs-sm);
      padding: var(--space-lg-xl) var(--space-2xs);
    }
    .ap-dossier-footer span {
      text-align: left;
    }
  }
  .ap-dossier-anchor {
    scroll-margin-top: var(--space-xl);
  }
  .ap-dossier-block {
    padding: var(--space-3xl) var(--space-sm) var(--space-2xl-3xl);
    border-top: 1px solid var(--ap-line);
    scroll-margin-top: var(--space-xl);
  }
  .ap-dossier-block-head p {
    font-size: var(--ap-text-sm);
    color: var(--ap-muted);
    margin: 0;
  }
  .ap-dossier-block-head a {
    color: var(--ap-accent);
  }
  .ap-dossier-block p {
    max-width: 68ch;
  }
  .ap-dossier-refs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs-sm);
    font-size: var(--ap-text-xs);
    color: var(--ap-muted);
  }
  .ap-dossier-refs > span {
    letter-spacing: 0;
    font-size: var(--ap-text-xs);
    margin-right: var(--space-xs);
  }
  .ap-dossier-refs > i {
    font-style: normal;
    padding: var(--space-xs) var(--space-sm);
    background: var(--ap-paper);
    border-radius: var(--ap-radius-xs);
  }
  .ap-dossier-refs .ap-dossier-source {
    min-height: var(--ap-control-xs);
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--ap-text-xs);
  }
  @media (max-width: 740px) {
    .ap-dossier-block {
      padding: var(--space-2xl) 0;
    }
  }
  /* Contents shares the photograph overlay and sticky states of every page menu. */
  .ap-dossier-block,
  .ap-dossier-map,
  .ap-dossier-picks,
  .ap-dossier-band .ap-section {
    scroll-margin-top: calc(var(--ap-header) + var(--ap-subnav-offset));
  }
  /* Section heads carry an icon in a soft accent circle. */
  .ap-dossier-block-head {
    display: grid;
    grid-template-columns: var(--ap-touch) minmax(0, 1fr);
    gap: var(--space-lg);
    align-items: start;
    max-width: var(--ap-measure-md);
    margin-bottom: var(--space-2xl);
  }
  .ap-dossier-block-head h2 {
    margin-bottom: var(--space-sm);
    margin-top: var(--space-xs);
  }
  .ap-dossier-badge {
    display: inline-grid;
    place-items: center;
    width: var(--ap-touch);
    height: var(--ap-touch);
    flex: 0 0 var(--ap-touch);
    border-radius: var(--ap-round);
    background: var(--ap-accent-soft);
    color: var(--ap-accent);
  }
  .ap-dossier-heading-title {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
  }
  .ap-dossier-heading-title h2 {
    margin: 0;
  }
  /* Wine band at the end: numbers, feedback, archive; it flows into the footer like the perfume page. */
  .ap-dossier-band {
    display: grid;
    gap: var(--space-4xl);
    margin-top: var(--space-4xl);
  }
  .ap-dossier-band .ap-dossier-history,
  .ap-dossier-band .ap-dossier-footer {
    padding-inline: 0;
  }
  .ap-dossier-band .ap-dossier-history {
    border-color: var(--ap-line);
  }
  .ap-portrait-feedback .ap-form {
    max-width: var(--ap-measure);
    margin-top: var(--space-lg);
  }
  .ap-portrait-feedback .ap-button {
    justify-self: start;
  }
  @media (max-width: 740px) {
    .ap-dossier-block-head {
      grid-template-columns: var(--ap-control-md) minmax(0, 1fr);
      gap: var(--space-md);
    }
    .ap-dossier-badge {
      width: var(--ap-control-md);
      height: var(--ap-control-md);
      flex-basis: var(--ap-control-md);
    }
  }
  /* Sections are focused after a jump from the menu for screen readers; the ring is not shown for that. */
  .ap-dossier [tabindex='-1']:focus {
    outline: none;
  }
}

/* Portrait and Trend share the editorial hero geometry from sections.css. */
@layer pages {
  /* Repeats the editorial title on purpose: it must outrank .ap-dossier h1 from the same pages layer. */
  .ap-dossier-cover h1 {
    font-size: var(--ap-text-trend-hero);
    font-weight: var(--ap-weight-regular);
    line-height: var(--ap-leading-display);
    letter-spacing: var(--ap-tracking-tightest);
    margin: var(--space-2xl) 0;
  }
  .ap-dossier-cover h1.is-thesis { font-size: var(--ap-text-hero); line-height: var(--ap-leading-tight); max-width: 14ch; }
  .ap-dossier-cover p:not(.ap-eyebrow) { font-size: var(--ap-text-2xl); max-width: 38ch; line-height: var(--ap-leading-loose); }
  .ap-dossier-cover .ap-editorial-footer p { font-size: var(--ap-text-xs); margin: 0; }
  .ap-dossier-cover-status { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm); font-size: var(--ap-text-xs); color: var(--ap-ink-soft); margin-top: var(--space-2xl); }
  .ap-dossier-status-dot { width: var(--ap-dot); height: var(--ap-dot); flex: 0 0 var(--ap-dot); border-radius: var(--ap-round); background: var(--ap-sage); }
  .ap-dossier-status-dot.is-working { animation: ap-portrait-pulse var(--ap-dur-pulse) linear infinite; }
  @keyframes ap-portrait-pulse { 50% { opacity: var(--ap-opacity-ghost); } }
  .ap-dossier-keywords { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-sm); padding: 0; margin: var(--space-xl) 0 0; }
  .ap-dossier-keywords > li { font-size: var(--ap-text-xs); padding: var(--space-xs-sm) var(--space-md); border: 1px solid var(--ap-line-strong); border-radius: var(--ap-pill); color: var(--ap-ink); }
  @media (max-width: 740px) {
    .ap-dossier-cover h1, .ap-dossier-cover h1.is-thesis { font-size: var(--ap-text-hero); }
    .ap-dossier-cover p:not(.ap-eyebrow) { font-size: var(--ap-text-md); max-width: 30ch; }
  }
  .ap-portrait-tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-md);
    padding: var(--space-md) 0 var(--space-xl);
  }
  .ap-portrait-progress {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    margin-top: var(--space-xl);
    padding: var(--space-lg);
    background: var(--ap-surface);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius-lg);
  }
  .ap-portrait-progress strong { font-size: var(--ap-text-md); }
  .ap-dossier-cover .ap-portrait-progress p {
    margin: var(--space-xs) 0 0;
    font-size: var(--ap-text-sm);
  }
}

/* Personal dossier: charts (scoped to the portrait). */
@layer pages {
  .ap-dossier-map {
    background: var(--ap-surface);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius-xl);
    padding: var(--space-2xl);
    margin-bottom: var(--space-2xl);
  }
  /* Outranks the dossier paragraph margin (.ap-dossier p) without !important. */
  .ap-dossier .ap-dossier-map-intro {
    font-size: var(--ap-text-sm);
    color: var(--ap-muted);
    margin: var(--space-lg) 0 0;
  }
  .ap-dossier-chart {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-2xl);
    align-items: center;
    margin-top: var(--space-2xl);
  }
  .ap-dossier-radar {
    min-width: 0;
  }
  .ap-dossier-radar > svg {
    width: 100%;
    max-height: 390px;
    display: block;
    overflow: visible;
  }
  .ap-dossier-radar-grid {
    fill: none;
    stroke: var(--ap-line);
    stroke-width: 1;
  }
  .ap-dossier-radar-axis {
    stroke: var(--ap-line);
    stroke-width: 1;
  }
  .ap-dossier-radar-shape {
    fill: var(--ap-accent-wash);
    stroke: var(--ap-accent);
    stroke-width: 2.5;
    stroke-linejoin: round;
  }
  .ap-dossier-radar circle {
    fill: var(--ap-accent);
    stroke: var(--ap-surface);
    stroke-width: var(--ap-stroke-bold);
  }
  .ap-dossier-radar text {
    fill: var(--ap-muted);
    font: var(--ap-text-xs) var(--ap-body);
  }
  .ap-dossier-radar .ap-dossier-radar-scale {
    font-size: var(--ap-text-chart);
    fill: var(--ap-faint);
  }
  .ap-dossier-bars {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .ap-dossier-bars > li {
    margin-bottom: var(--space-lg);
  }
  .ap-dossier-bars > li > div:first-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-lg);
    font-size: var(--ap-text-sm);
    margin-bottom: var(--space-xs-sm);
  }
  .ap-dossier-bars strong {
    font-weight: var(--ap-weight-medium);
    color: var(--ap-accent);
  }
  .ap-dossier-bars strong > small {
    font-size: var(--ap-text-xs);
    color: var(--ap-muted);
    margin-left: var(--space-xs);
  }
  .ap-dossier-bars > li > small {
    font-size: var(--ap-text-xs);
    line-height: var(--ap-leading-normal);
    color: var(--ap-muted);
    display: block;
    margin-top: var(--space-xs-sm);
  }
  .ap-dossier .ap-dossier-chart-note {
    display: block;
    font-size: var(--ap-text-xs);
    color: var(--ap-muted);
    line-height: var(--ap-leading-relaxed);
    margin: var(--space-lg-xl) 0 0;
  }
  .ap-dossier-chart-empty {
    padding: var(--space-2xl-3xl) var(--space-lg-xl);
    max-width: 350px;
    margin: auto;
    color: var(--ap-muted);
    text-align: center;
  }
  .ap-dossier-chart-empty > span {
    font: var(--ap-weight-semibold) var(--ap-text-3xl) var(--ap-display);
    color: var(--ap-ink);
  }
  .ap-dossier-chart-empty > p {
    font-size: var(--ap-text-sm);
    margin-top: var(--space-md);
  }
  @media (max-width: 1100px) {
    .ap-dossier-chart {
      gap: var(--space-lg-xl);
    }
  }
  @media (max-width: 740px) {
    .ap-dossier-map {
      padding: var(--space-xl) var(--space-lg-xl);
    }
    .ap-dossier .ap-dossier-map-intro {
      font-size: var(--ap-text-xs);
    }
    .ap-dossier-chart {
      grid-template-columns: 1fr;
      gap: var(--space-md);
      margin-top: var(--space-lg);
    }
    .ap-dossier-radar > svg {
      max-height: 330px;
    }
    .ap-dossier-bars {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-lg);
    }
    .ap-dossier-bars > li {
      margin: 0;
    }
    .ap-dossier-bars > li > div:first-child {
      font-size: var(--ap-text-xs);
      gap: var(--space-sm);
      align-items: flex-start;
    }
    .ap-dossier-bars strong {
      white-space: nowrap;
    }
  }
  .ap-dossier-wardrobe {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--space-2xl-3xl);
    align-items: start;
  }
  .ap-dossier-wardrobe-grid {
    display: grid;
    gap: var(--space-xs-sm);
  }
  .ap-dossier-wardrobe-grid > div {
    display: grid;
    grid-template-columns: 64px repeat(4, minmax(0, 1fr));
    gap: var(--space-xs-sm);
  }
  .ap-dossier-wardrobe-grid [role='columnheader'],
  .ap-dossier-wardrobe-grid [role='rowheader'] {
    font-size: var(--ap-text-xs);
    color: var(--ap-muted);
    align-self: center;
  }
  .ap-dossier-wardrobe-grid [role='columnheader'] {
    text-align: center;
  }
  .ap-dossier-slot {
    border-radius: var(--ap-radius-md);
    padding: var(--space-md) var(--space-xs-sm);
    text-align: center;
    display: flex;
    flex-direction: column;
    min-height: 74px;
    justify-content: center;
    background: var(--ap-surface);
    border: 1px dashed var(--ap-line-strong);
  }
  .ap-dossier-slot > b {
    font: var(--ap-weight-semibold) var(--ap-text-4xl)/var(--ap-leading-tight) var(--ap-display);
  }
  .ap-dossier-slot > small {
    font-size: var(--ap-text-xs);
    color: var(--ap-muted);
  }
  .ap-dossier-slot[data-fill='0'] > b {
    color: var(--ap-accent);
  }
  .ap-dossier-slot:not([data-fill='0']) {
    border-style: solid;
    border-color: transparent;
  }
  /* Muted text fails 4.5:1 on the darker tints; filled cells take the soft ink. */
  .ap-dossier-slot:not([data-fill='0']) > small {
    color: var(--ap-ink-soft);
  }
  .ap-dossier-slot[data-fill='1'] {
    background: var(--ap-accent-tint-1);
  }
  .ap-dossier-slot[data-fill='2'] {
    background: var(--ap-accent-tint-2);
  }
  .ap-dossier-slot[data-fill='3'] {
    background: var(--ap-accent-tint-3);
  }
  .ap-dossier-slot[data-fill='4'] {
    background: var(--ap-accent);
    color: var(--ap-accent-ink);
  }
  .ap-dossier-slot[data-fill='4'] > small {
    color: inherit;
  }
  @media (max-width: 1100px) {
    .ap-dossier-wardrobe {
      grid-template-columns: 1fr;
      gap: var(--space-xl);
    }
  }
  @media (max-width: 740px) {
    .ap-dossier-wardrobe-grid > div {
      grid-template-columns: 46px repeat(4, minmax(0, 1fr));
      gap: var(--space-xs);
    }
    .ap-dossier-slot {
      min-height: 60px;
      padding: var(--space-sm) var(--space-2xs);
    }
    .ap-dossier-slot > small {
      display: none;
    }
  }
}

/* Personal dossier: picks (scoped to the portrait). */
@layer pages {
  .ap-dossier-picks {
    background: var(--ap-surface);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius-xl);
    padding: var(--space-2xl) var(--space-2xl) var(--space-lg);
    margin: var(--space-xs-sm) 0 var(--space-2xl);
    scroll-margin-top: var(--space-xl);
  }
  .ap-dossier-picks .ap-dossier-heading > p {
    max-width: var(--ap-measure-xs);
  }
  .ap-dossier-picks .ap-dossier-notice .ap-button {
    margin-top: var(--space-md);
  }
  .ap-dossier-picks-strategy {
    margin: var(--space-xl) 0 var(--space-xs);
    padding: var(--space-xl);
    border-radius: var(--ap-radius-lg);
    background: var(--ap-paper);
  }
  .ap-dossier-picks-strategy .ap-dossier-claim:last-child {
    margin-bottom: 0;
  }
  .ap-dossier-pick-group {
    padding: var(--space-2xl) 0 var(--space-sm);
    border-bottom: 1px solid var(--ap-line);
  }
  .ap-dossier-pick-group:last-child {
    border-bottom: 0;
  }
  .ap-dossier-pick-group-head {
    display: flex;
    align-items: baseline;
    gap: var(--space-lg);
    flex-wrap: wrap;
    margin-bottom: var(--space-lg-xl);
  }
  .ap-dossier-pick-group-head > h3 {
    font-size: var(--ap-text-3xl);
    margin: 0;
  }
  .ap-dossier-pick-group-head > p {
    font-size: var(--ap-text-sm);
    color: var(--ap-muted);
    margin: 0;
    flex: 1 1 220px;
  }
  .ap-dossier-pick-group-head > span {
    font: var(--ap-text-xs) var(--ap-body);
    color: var(--ap-faint);
  }
  .ap-dossier-pick {
    display: grid;
    grid-template-columns: var(--ap-thumb-xl) minmax(0, 1fr);
    gap: var(--space-xl);
    padding: var(--space-lg-xl) 0;
    border-top: 1px dashed var(--ap-line);
  }
  .ap-dossier-pick-group-head + .ap-dossier-pick {
    border-top: 0;
    padding-top: 0;
  }
  .ap-dossier-pick-image {
    appearance: none;
    border: 0;
    padding: 0;
    background: var(--ap-surface);
    border-radius: var(--ap-radius-lg);
    width: var(--ap-thumb-xl);
    height: var(--ap-thumb-xl);
    overflow: hidden;
    cursor: pointer;
  }
  .ap-dossier-pick-image > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform var(--ap-dur-state);
  }
  .ap-dossier-pick-image:hover > img {
    transform: scale(var(--ap-hover-scale));
  }
  .ap-dossier-pick-body > header > small {
    font-size: var(--ap-text-xs);
    letter-spacing: var(--ap-tracking-wide);
    color: var(--ap-muted);
  }
  .ap-dossier-pick-body h4 {
    font: var(--ap-weight-semibold) var(--ap-text-4xl)/var(--ap-leading-snug) var(--ap-display);
    letter-spacing: var(--ap-tracking-snug);
    margin: var(--space-2xs) 0;
  }
  .ap-dossier-pick-body h4 > button {
    appearance: none;
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    color: var(--ap-ink);
    cursor: pointer;
    text-align: left;
  }
  .ap-dossier-pick-body h4 > button:hover {
    color: var(--ap-accent);
  }
  .ap-dossier-pick-body > header > span {
    font-size: var(--ap-text-xs);
    color: var(--ap-muted);
  }
  /* Both are paragraphs: the dossier scope outranks .ap-dossier p without !important. */
  .ap-dossier .ap-dossier-pick-title {
    font: var(--ap-weight-semibold) var(--ap-text-lg)/var(--ap-leading-normal) var(--ap-display);
    color: var(--ap-accent);
    margin: var(--space-md) 0 var(--space-xs-sm);
  }
  .ap-dossier .ap-dossier-pick-why {
    font-size: var(--ap-text-base);
    line-height: var(--ap-leading-loose);
    max-width: 72ch;
    margin: var(--space-sm) 0 var(--space-md);
  }
  .ap-dossier-pick dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md);
    margin: var(--space-lg) 0;
  }
  .ap-dossier-pick dl > div {
    background: var(--ap-paper);
    border-radius: var(--ap-radius-md);
    padding: var(--space-md) var(--space-lg);
  }
  .ap-dossier-pick dt {
    font-size: var(--ap-text-xs);
    font-weight: var(--ap-weight-semibold);
    letter-spacing: 0;
    color: var(--ap-sage);
    margin-bottom: var(--space-xs-sm);
  }
  .ap-dossier-pick dd {
    margin: 0;
    font-size: var(--ap-text-sm);
    line-height: var(--ap-leading-relaxed);
  }
  .ap-dossier-pick-compare {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin: var(--space-xs-sm) 0 var(--space-sm);
    font-size: var(--ap-text-xs);
    color: var(--ap-muted);
  }
  @media (max-width: 1100px) {
    .ap-dossier-pick dl {
      grid-template-columns: 1fr 1fr;
    }
    .ap-dossier-pick dl > div:last-child {
      grid-column: 1/-1;
    }
  }
  @media (max-width: 740px) {
    .ap-dossier-picks {
      padding: var(--space-xl) var(--space-lg) var(--space-xs-sm);
      border-radius: var(--ap-radius-lg);
    }
    .ap-dossier-picks .ap-dossier-heading {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-sm);
    }
    .ap-dossier-pick {
      display: block;
    }
    .ap-dossier-pick-image {
      float: left;
      width: var(--ap-thumb-lg);
      height: var(--ap-thumb-lg);
      border-radius: var(--ap-radius-md);
      margin: 0 var(--space-lg) var(--space-sm) 0;
    }
    .ap-dossier-pick-body > header {
      min-height: var(--ap-thumb-lg);
    }
    .ap-dossier-pick-body > header ~ * {
      clear: both;
    }
    .ap-dossier-pick dl {
      grid-template-columns: 1fr;
    }
    .ap-dossier-pick dl > div:last-child {
      grid-column: auto;
    }
    .ap-dossier-pick-body h4 {
      font-size: var(--ap-text-2xl);
    }
    .ap-dossier-picks-strategy {
      padding: var(--space-lg);
    }
  }
  /* A pick the catalog does not have yet. */
  .ap-dossier-pick-image.is-missing {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--space-xs-sm);
    border: 1px dashed var(--ap-line-strong);
    background: transparent;
    color: var(--ap-muted);
    font-size: var(--ap-text-xs);
    text-align: center;
    cursor: default;
  }
  .ap-dossier-pick-body > header > h4 {
    margin: 0;
  }
  .ap-dossier-request {
    margin-top: var(--space-md);
  }
  .ap-dossier-link-button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ap-accent);
    font-size: var(--ap-text-sm);
    font-weight: var(--ap-weight-medium);
    text-decoration: underline;
    text-underline-offset: var(--ap-underline-offset);
    cursor: pointer;
  }
}

/* Personal dossier: taste (scoped to the portrait). */
@layer pages {
  /* Taste profile: level and explained metrics at the top of the dossier. */
  .ap-taste {
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    gap: 0;
    margin: var(--space-xl) 0 var(--space-2xl);
    background: var(--ap-surface);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius-xl);
    overflow: hidden;
  }
  .ap-taste-level {
    padding: var(--space-2xl);
    background: var(--ap-paper);
    border-right: 1px solid var(--ap-line);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }
  .ap-taste-level h2 {
    font-size: var(--ap-text-7xl);
    line-height: var(--ap-leading-tight);
    letter-spacing: var(--ap-tracking-snug);
    margin: 0;
  }
  .ap-taste-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ap-taste-steps li {
    position: relative;
    overflow-wrap: anywhere;
    padding-top: var(--space-sm-md);
    font-size: var(--ap-text-xs);
    line-height: var(--ap-leading-snug);
    color: var(--ap-muted);
  }
  .ap-taste-steps li:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--ap-bar-thin);
    border-radius: var(--ap-radius-2xs);
    background: var(--ap-line);
  }
  .ap-taste-steps li.is-done:before {
    background: var(--ap-accent-mid);
  }
  .ap-taste-steps li.is-current {
    color: var(--ap-ink);
    font-weight: var(--ap-weight-semibold);
  }
  .ap-taste-steps li.is-current:before {
    background: var(--ap-accent);
  }
  .ap-taste-why {
    margin: 0;
    font-size: var(--ap-text-sm);
    color: var(--ap-muted);
    line-height: var(--ap-leading-normal);
  }
  .ap-taste-facts {
    display: flex;
    gap: var(--space-xl);
    margin: auto 0 0;
    padding-top: var(--space-lg);
    border-top: 1px solid var(--ap-line);
  }
  .ap-taste-facts div {
    display: flex;
    flex-direction: column-reverse;
  }
  .ap-taste-facts dt {
    font-size: var(--ap-text-xs);
    color: var(--ap-muted);
  }
  .ap-taste-facts dd {
    margin: 0;
    font-size: var(--ap-text-4xl);
    font-weight: var(--ap-weight-medium);
    letter-spacing: var(--ap-tracking-snug);
    line-height: var(--ap-leading-heading);
  }
  .ap-taste-facts dd small {
    font-size: var(--ap-text-xs);
    color: var(--ap-muted);
    padding-left: var(--space-2xs);
    letter-spacing: 0;
  }
  .ap-taste-body {
    padding: var(--space-xl) var(--space-2xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg-xl);
    min-width: 0;
  }
  .ap-taste-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg-xl) var(--space-2xl);
  }
  .ap-taste-metric-head {
    display: grid;
    grid-template-columns: var(--ap-art) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
  }
  .ap-taste-metric h3 {
    font-size: var(--ap-text-md);
    font-weight: var(--ap-weight-semibold);
    margin: 0;
    letter-spacing: 0;
  }
  .ap-taste-metric strong {
    font-size: var(--ap-text-3xl);
    font-weight: var(--ap-weight-medium);
    letter-spacing: var(--ap-tracking-snug);
    font-variant-numeric: tabular-nums;
  }
  .ap-taste-metric strong small {
    font-size: var(--ap-text-xs);
    color: var(--ap-muted);
    padding-left: var(--space-2xs);
    letter-spacing: 0;
  }
  .ap-taste-bar {
    height: var(--ap-bar);
    border-radius: var(--ap-radius-2xs);
    background: var(--ap-line-soft);
    overflow: hidden;
  }
  .ap-taste-bar i {
    width: var(--value, 0%);
    display: block;
    height: 100%;
    border-radius: var(--ap-radius-2xs);
    background: var(--ap-accent);
    transform-origin: left;
    animation: ap-taste-grow var(--ap-dur-enter) var(--ap-ease-out) both;
  }
  .ap-taste-metric[data-metric='coherence'] .ap-taste-bar i,
  .ap-taste-metric[data-metric='breadth'] .ap-taste-bar i {
    background: var(--ap-sage);
  }
  @keyframes ap-taste-grow {
    from {
      transform: scaleX(0);
    }
  }
  .ap-taste-metric p {
    margin: var(--space-sm) 0 0;
    font-size: var(--ap-text-sm);
    line-height: var(--ap-leading-normal);
    color: var(--ap-muted);
  }
  .ap-taste-metric p b {
    color: var(--ap-ink);
    font-weight: var(--ap-weight-semibold);
  }
  .ap-taste-signature {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs-sm);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--ap-line);
  }
  .ap-taste-signature > span {
    font-size: var(--ap-text-xs);
    font-weight: var(--ap-weight-semibold);
    letter-spacing: 0;
    color: var(--ap-accent);
    margin-right: var(--space-xs-sm);
  }
  .ap-taste-signature b {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-xs-sm);
    padding: var(--space-xs) var(--space-sm-md);
    border-radius: var(--ap-pill);
    border: 1px solid var(--ap-line);
    font-size: var(--ap-text-sm);
    font-weight: var(--ap-weight-medium);
  }
  .ap-taste-signature b small {
    font-size: var(--ap-text-xs);
    color: var(--ap-muted);
    font-variant-numeric: tabular-nums;
  }
  .ap-taste-empty {
    margin: auto 0;
    color: var(--ap-muted);
    font-size: var(--ap-text-sm);
  }
  @container dossier (min-width: 641px) and (max-width: 960px) {
    .ap-taste .ap-taste-level h2 {
      font-size: var(--ap-text-5xl);
    }
    .ap-taste {
      grid-template-columns: 240px minmax(0, 1fr);
    }
    .ap-taste-level,
    .ap-taste-body {
      padding: var(--space-lg-xl);
    }
    .ap-taste-steps {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-md);
    }
    .ap-taste-metrics {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  @container dossier (max-width: 640px) {
    .ap-taste {
      grid-template-columns: minmax(0, 1fr);
    }
    .ap-taste-level {
      border-right: 0;
      border-bottom: 1px solid var(--ap-line);
    }
  }
  @media (max-width: 740px) {
    .ap-taste {
      margin: var(--space-lg) 0 var(--space-xl);
      border-radius: var(--ap-radius-lg);
    }
    .ap-taste-level,
    .ap-taste-body {
      padding: var(--space-lg-xl);
    }
    .ap-taste-level h2 {
      font-size: var(--ap-text-6xl);
    }
    .ap-taste-metrics {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-lg-xl);
    }
  }
  @media (max-width: 420px) {
    .ap-taste-steps {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-md);
    }
  }
  .ap-portrait-art { display: block; width: 100%; height: auto; object-fit: contain; }
  .ap-taste-empty-art { max-width: var(--ap-measure-xs); max-height: 200px; margin: auto; }
  .ap-taste-art { max-height: 180px; margin: 0 auto var(--space-sm); }
  .ap-portrait-miniature { width: var(--ap-art); height: var(--ap-art); object-fit: contain; flex: none; }
  .ap-taste-metric-head h3 { min-width: 0; overflow-wrap: anywhere; }
  .ap-portrait-axis-layout { display: grid; grid-template-columns: minmax(180px, 280px) minmax(0, 1fr); align-items: center; gap: var(--space-2xl); }
  .ap-portrait-bar-label { display: flex; min-width: 0; gap: var(--space-sm); align-items: center; }
  .ap-portrait-bar-label > span:last-child { min-width: 0; overflow-wrap: anywhere; }
  @media (max-width: 740px) {
    .ap-portrait-axis-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
    .ap-portrait-axis-layout > img { max-width: 240px; margin: auto; }
  }
}

/* Personal dossier: blocks (scoped to the portrait). */
@layer pages {
  .ap-dossier-sure {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--ap-text-xs);
    letter-spacing: var(--ap-tracking-wide);
    color: var(--ap-sage);
    margin-right: var(--space-sm-md);
    white-space: nowrap;
  }
  .ap-dossier-sure > i {
    width: var(--ap-dot);
    height: var(--ap-dot);
    border-radius: var(--ap-round);
    border: 1px solid var(--ap-sage);
  }
  .ap-dossier-sure > i:last-of-type {
    margin-right: var(--space-xs-sm);
  }
  .ap-dossier-sure[data-level='1'] > i:nth-child(1),
  .ap-dossier-sure[data-level='2'] > i:nth-child(-n + 2),
  .ap-dossier-sure[data-level='3'] > i {
    background: var(--ap-sage);
  }
  .ap-dossier-insights {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
    gap: var(--space-lg-xl);
  }
  .ap-dossier-insights > li {
    background: var(--ap-surface);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius-lg);
    padding: var(--space-xl) var(--space-xl) var(--space-lg-xl);
    display: flex;
    flex-direction: column;
  }
  .ap-dossier-insights > li:first-child {
    grid-column: 1 / -1;
    background: var(--ap-paper);
  }
  .ap-dossier-insights > li:first-child h3 {
    font-size: var(--ap-text-6xl);
  }
  .ap-dossier-insight-num {
    font: var(--ap-weight-semibold) var(--ap-text-sm) var(--ap-display);
    color: var(--ap-accent);
  }
  .ap-dossier-insights h3 {
    font-size: var(--ap-text-3xl);
    line-height: var(--ap-leading-snug);
    margin: var(--space-sm) 0 var(--space-sm-md);
  }
  .ap-dossier-insights p {
    font-size: var(--ap-text-md);
    line-height: var(--ap-leading-loose);
  }
  .ap-dossier-insights footer,
  .ap-dossier-boundaries footer {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm) 0;
    padding-top: var(--space-xs-sm);
  }
  .ap-dossier-axes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: var(--space-2xl) var(--space-4xl);
  }
  .ap-dossier-axes p {
    font-size: var(--ap-text-sm);
    line-height: var(--ap-leading-relaxed);
    margin: var(--space-md) 0 0;
  }
  .ap-dossier-pairings {
    border-top: 1px solid var(--ap-line);
    margin-top: var(--space-2xl);
    padding-top: var(--space-2xl);
  }
  .ap-dossier-pairings > p {
    font-size: var(--ap-text-sm);
    color: var(--ap-muted);
    margin: 0 0 var(--space-lg-xl);
  }
  .ap-dossier-pairings h3 {
    font-size: var(--ap-text-xl);
    margin: 0 0 var(--space-xs);
  }
  .ap-dossier-pairings ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: var(--space-xl) var(--space-2xl);
  }
  .ap-dossier-pairing {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs-sm);
    margin-bottom: var(--space-sm);
  }
  .ap-dossier-pairing > b {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs-sm);
    font-weight: var(--ap-weight-medium);
    font-size: var(--ap-text-sm);
    padding: var(--space-xs) var(--space-sm-md);
    border-radius: var(--ap-pill);
    background: var(--ap-sunk);
  }
  .ap-dossier-pairing > span {
    color: var(--ap-accent);
  }
  .ap-dossier-pairings p {
    font-size: var(--ap-text-sm);
    line-height: var(--ap-leading-relaxed);
    margin: 0 0 var(--space-sm);
  }
  .ap-dossier-boundaries,
  .ap-dossier-overlaps,
  .ap-dossier-wear {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: var(--space-lg);
  }
  .ap-dossier-boundaries > article {
    border: 1px solid var(--ap-accent-line);
    background: var(--ap-surface);
    border-radius: var(--ap-radius-lg);
    padding: var(--space-lg-xl) var(--space-lg-xl) var(--space-lg);
    display: flex;
    flex-direction: column;
  }
  .ap-dossier-boundaries h3 {
    font-size: var(--ap-text-xl);
    margin: 0 0 var(--space-sm);
  }
  .ap-dossier-boundaries p,
  .ap-dossier-overlaps p,
  .ap-dossier-wear p,
  .ap-dossier-gaps p {
    font-size: var(--ap-text-md);
    line-height: var(--ap-leading-relaxed);
    margin: 0 0 var(--space-sm-md);
  }
  .ap-dossier-roles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);
  }
  .ap-dossier-role {
    appearance: none;
    display: flex;
    gap: var(--space-md);
    align-items: center;
    text-align: left;
    background: var(--ap-surface);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius-lg);
    padding: var(--space-sm-md) var(--space-lg) var(--space-sm-md) var(--space-sm-md);
    font: inherit;
    color: var(--ap-ink);
    cursor: pointer;
    transition: border-color var(--ap-dur-hover);
  }
  .ap-dossier-role:hover {
    border-color: var(--ap-faint);
  }
  .ap-dossier-role > img {
    width: var(--ap-control-xl);
    height: var(--ap-control-xl);
    object-fit: contain;
    border-radius: var(--ap-radius-sm);
    background: var(--ap-paper);
    flex: 0 0 var(--ap-control-xl);
  }
  .ap-dossier-role > span {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: var(--ap-leading-snug);
  }
  .ap-dossier-role small {
    font-size: var(--ap-text-xs);
    color: var(--ap-muted);
  }
  .ap-dossier-role strong {
    font-weight: var(--ap-weight-medium);
    font-size: var(--ap-text-md);
  }
  .ap-dossier-role em {
    font-style: normal;
    font-size: var(--ap-text-xs);
    color: var(--ap-accent);
    margin-top: var(--space-xs);
  }
  .ap-dossier-gaps h3 {
    font-size: var(--ap-text-xl);
    margin: 0 0 var(--space-lg);
  }
  .ap-dossier-gaps > article {
    padding: var(--space-lg) 0;
    border-top: 1px dashed var(--ap-line);
  }
  .ap-dossier-gaps > article > strong {
    display: block;
    font-weight: var(--ap-weight-medium);
    color: var(--ap-accent);
    margin-bottom: var(--space-xs);
  }
  .ap-dossier-overlaps > article,
  .ap-dossier-wear > article {
    background: var(--ap-surface);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius-lg);
    padding: var(--space-lg-xl) var(--space-lg-xl) var(--space-md);
  }
  .ap-dossier-overlap-pair {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
  }
  .ap-dossier-overlap-pair > span {
    font-size: var(--ap-text-3xl);
    color: var(--ap-accent);
  }
  .ap-dossier-wear h3 {
    font-size: var(--ap-text-lg);
    margin: 0 0 var(--space-sm);
  }
  .ap-dossier-route {
    list-style: none;
    margin: var(--space-lg-xl) 0 var(--space-sm);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: var(--space-md);
    counter-reset: none;
  }
  .ap-dossier-route > li {
    display: flex;
    gap: var(--space-md);
    background: var(--ap-paper);
    border-radius: var(--ap-radius-lg);
    padding: var(--space-lg) var(--space-lg-xl);
  }
  .ap-dossier-route > li > span {
    flex: 0 0 var(--ap-control-xs);
    height: var(--ap-control-xs);
    border-radius: var(--ap-round);
    background: var(--ap-accent);
    color: var(--ap-surface);
    font-size: var(--ap-text-xs);
    display: grid;
    place-items: center;
  }
  .ap-dossier-route p {
    font-size: var(--ap-text-sm);
    line-height: var(--ap-leading-relaxed);
    margin: 0;
  }
  .ap-dossier-questions {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-2xs);
    counter-reset: q;
  }
  .ap-dossier-questions > li {
    counter-increment: q;
    position: relative;
    padding: var(--space-lg-xl) 0 var(--space-lg-xl) var(--space-3xl);
    border-top: 1px solid var(--ap-line);
  }
  .ap-dossier-questions > li:before {
    content: counter(q);
    position: absolute;
    left: 0;
    top: var(--space-md);
    font: var(--ap-weight-semibold) var(--ap-text-3xl) var(--ap-display);
    color: var(--ap-accent);
  }
  .ap-dossier-questions p {
    font-size: var(--ap-text-lg);
    line-height: var(--ap-leading-normal);
    margin: 0 0 var(--space-xs);
  }
  .ap-dossier-questions small {
    font-size: var(--ap-text-xs);
    color: var(--ap-muted);
  }
  @media (max-width: 740px) {
    .ap-dossier-axes {
      grid-template-columns: 1fr;
      gap: var(--space-2xl);
    }
    .ap-dossier-insights {
      grid-template-columns: 1fr;
    }
    .ap-dossier-insights > li {
      padding: var(--space-lg-xl) var(--space-lg-xl) var(--space-lg);
    }
  }
  /* Note pairs show the group icon of each note. */
  .ap-dossier-pairing .ap-vote-icon {
    width: var(--ap-icon-md);
    height: var(--ap-icon-md);
    color: var(--ap-accent);
  }
  /* Questions with quick answers and an own answer in one row. */
  .ap-dossier-question .ap-chip-row {
    margin-top: var(--space-md);
    gap: var(--space-sm);
  }
  .ap-dossier-own {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
  }
  .ap-dossier-own .ap-input {
    width: min(240px, 60vw);
    min-height: var(--ap-control-sm);
    padding: var(--space-xs) var(--space-lg);
    border-radius: var(--ap-pill);
    font-size: var(--ap-text-sm);
  }
  .ap-dossier-own .ap-icon-button {
    width: var(--ap-control-sm);
    height: var(--ap-control-sm);
  }
  .ap-dossier-saved {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs-sm);
    margin-top: var(--space-sm-md);
    color: var(--ap-muted);
    font-size: var(--ap-text-xs);
  }
  .ap-dossier-saved svg {
    color: var(--ap-sage);
  }
  .ap-dossier-saved a {
    color: var(--ap-accent);
  }
  @media (max-width: 1023px), (pointer: coarse) {
    .ap-dossier-own .ap-input {
      font-size: var(--ap-input-text);
    }
    .ap-dossier-own .ap-icon-button {
      width: var(--ap-touch);
      height: var(--ap-touch);
    }
  }
  .ap-dossier-axis-labels {
    display: flex;
    justify-content: space-between;
    gap: var(--space-lg);
    font-size: var(--ap-text-sm);
    color: var(--ap-muted);
    margin-bottom: var(--space-sm-md);
  }
  .ap-dossier-axis-labels > span { min-width: 0; overflow-wrap: anywhere; }
  .ap-dossier-axis-labels > span:last-child { text-align: right; }
  .ap-dossier-axis-labels > .is-near {
    color: var(--ap-ink);
    font-weight: var(--ap-weight-medium);
  }
  .ap-dossier-axis-track {
    position: relative;
    height: var(--ap-bar);
    border-radius: var(--ap-radius-xs);
    background: var(--ap-line);
  }
  .ap-dossier-axis-track:before {
    content: '';
    position: absolute;
    left: 50%;
    top: calc(var(--space-xs) * -1);
    bottom: calc(var(--space-xs) * -1);
    width: 1px;
    background: var(--ap-line-strong);
  }
  .ap-dossier-axis-track > i {
    position: absolute;
    top: 50%;
    left: var(--position, 50%);
    translate: -50% -50%;
    width: var(--ap-icon);
    height: var(--ap-icon);
    border-radius: var(--ap-round);
    background: var(--ap-accent);
    border: var(--ap-stroke-heavy) solid var(--ap-surface);
    box-shadow: var(--ap-shadow-knob);
  }
}

/* Utilities: single-purpose classes in the last layer, so no component or page rule can override them. */
@layer utilities {
  /* Read by screen readers, not shown: live status lines and labels that the layout already makes obvious. */
  .ap-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}