/*
  Patterns: compositions of components that recur across pages — app chrome, page
  shells, search bars, filters, listing cards, booking card, workspace layouts.
  Classes are p-* (and may style c-* children).
*/
@layer patterns {
  .p-walkthrough { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--color-text); overflow: visible; }
  .p-walkthrough:not([open]) { display: none; }
  .p-walkthrough::backdrop { background: transparent; }
  .p-walkthrough__spotlight { position: fixed; border: var(--focus-width) solid var(--color-accent); border-radius: var(--radius-lg); box-shadow: var(--walkthrough-shadow); pointer-events: none; }
  .p-walkthrough__card { position: fixed; z-index: var(--z-raised); width: min(var(--walkthrough-width), calc(100% - var(--space-8))); max-height: var(--walkthrough-height); padding: var(--space-5); border: var(--border-width) solid var(--color-accent-subtle-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); background: var(--color-surface); overflow: auto; overscroll-behavior: contain; overflow-wrap: anywhere; }
  @media (prefers-reduced-motion: no-preference) {
    .p-walkthrough[open] .p-walkthrough__card { animation: p-arrive var(--duration-normal) var(--ease-standard); }
  }
  .p-managed-space-cover { width: 10rem; max-width: 100%; height: auto; aspect-ratio: 16 / 11; object-fit: cover; border-radius: var(--radius-md); }
  .p-tour-invitation, .p-tour-story { padding: var(--space-6); border: var(--border-width) solid var(--color-accent-subtle-border); border-radius: var(--radius-xl); background: var(--color-accent-subtle); overflow-wrap: anywhere; }
  .p-tour-invitation { display: grid; gap: var(--space-6); align-items: center; }
  .p-tour-layout { display: grid; gap: var(--space-6); align-items: start; }
  .p-tour-layout > * { min-width: 0; }
  .p-tour-story form { max-width: 100%; }
  .p-tour-story .c-button { max-width: 100%; white-space: normal; }
  .p-tour-roles, .p-tour-guide { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
  .p-tour-roles { padding-block: var(--space-4); border-block: var(--border-width) solid var(--color-border); }
  .p-tour-guide { margin-bottom: var(--space-6); padding-block: var(--space-3); border-block-end: var(--border-width) solid var(--color-border); }
  .p-tour-guide__progress { display: inline-block; margin-inline-start: var(--space-3); color: var(--color-text-secondary); }
  .p-tour-cast { display: flex; align-items: center; gap: var(--space-3); }
  .p-tour-cast > p { flex: 1; min-width: 0; margin: var(--space-0); }
  .p-tour-cast__faces { display: inline-flex; flex: none; }
  /* Overlapping discs, each ringed in the band's own tint so the overlap reads as a cutout. */
  .p-tour-cast__faces > .c-avatar { border: var(--border-width-strong) solid var(--color-accent-subtle); }
  .p-tour-cast__faces > .c-avatar + .c-avatar { margin-inline-start: calc(var(--space-2) * -1); }
  /* A persona's landing greeting: tinted like the tour invitation, since both are the demo speaking rather than the product. */
  .p-demo-welcome { border-color: var(--color-accent-subtle-border); background: var(--color-accent-subtle); }
  /* A demo profile's "Start here" checklist: ordered steps, the next one lifted and flagged in words, done ones ticked. Embedded in the welcome card it drops its own chrome. */
  .p-guide { min-width: 0; overflow-wrap: anywhere; }
  .p-guide--embedded { padding-block-start: var(--space-4); border-block-start: var(--border-width) solid var(--color-accent-subtle-border); }
  .p-guide__head, .p-guide__bar, .p-guide__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .p-guide__head { align-items: flex-start; }
  .p-guide__intro { display: grid; gap: var(--space-1); min-width: 0; }
  .p-guide__offer { display: grid; gap: var(--space-3); padding: var(--space-4); border: var(--border-width) solid var(--color-accent-subtle-border); border-radius: var(--radius-lg); background: var(--color-surface); }
  .p-guide__steps { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
  .p-guide-step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
  .p-guide-step[data-state="primary"] { border-color: var(--color-accent); box-shadow: var(--shadow-sm); }
  .p-guide-step__marker { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--control-sm); height: var(--control-sm); border-radius: var(--radius-full); background: var(--color-surface-subtle); color: var(--color-text-secondary); font-weight: var(--weight-semibold); }
  .p-guide-step[data-state="primary"] .p-guide-step__marker { background: var(--color-accent); color: var(--color-text-on-accent); }
  .p-guide-step[data-state="done"] .p-guide-step__marker { background: var(--color-success-subtle); color: var(--color-success); }
  .p-guide-step__body { display: grid; gap: var(--space-1); justify-items: start; min-width: 0; }
  .p-guide-step__body > p { margin: var(--space-0); }
  .p-guide-step__flag { justify-self: start; }
  .p-guide-step__body .c-button { max-width: 100%; height: auto; min-height: var(--control-sm); padding-block: var(--space-2); white-space: normal; text-align: start; }
  .p-guide-step__link { display: inline-flex; align-items: center; min-height: var(--target-min); font-weight: var(--weight-semibold); }
  /* The shared demo accounts on the sign-in form: full-width toggle buttons whose "Role · Name — headline" label wraps on phones; the picked one is outlined. */
  .p-sandbox-accounts { display: grid; gap: var(--space-2); }
  .p-sandbox-accounts .c-button { justify-content: flex-start; max-width: 100%; height: auto; padding-block: var(--space-3); line-height: var(--leading-snug); white-space: normal; text-align: start; }
  .p-sandbox-accounts .c-button[aria-pressed="true"] { border-color: var(--color-accent); box-shadow: var(--shadow-sm); }
  .p-guide__expander { display: none; }
  @media (width < 40em) {
    .p-guide__expander { display: inline-flex; }
    .p-guide[data-collapsed] .p-guide-step:not([data-state="primary"]) { display: none; }
    .p-guide[data-collapsed] .p-guide__steps { margin-block-start: var(--space-0); }
  }
  .p-tour-mark { display: inline-flex; align-items: center; justify-content: center; width: var(--control-lg); height: var(--control-lg); border-radius: var(--radius-lg); color: var(--color-accent); background: var(--color-surface); box-shadow: var(--shadow-sm); }
  .p-tour-steps { list-style: none; padding: var(--space-6); margin: 0; display: grid; gap: var(--space-6); }
  .p-tour-step { display: flex; gap: var(--space-3); min-width: 0; }
  .p-tour-step__number { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--control-sm); height: var(--control-sm); border-radius: var(--radius-full); background: var(--color-surface-subtle); color: var(--color-text-secondary); font-weight: var(--weight-semibold); }
  .p-tour-step[aria-current="step"] .p-tour-step__number { background: var(--color-accent); color: var(--color-text-on-accent); }
  .p-tour-step[data-complete="true"] .p-tour-step__number { background: var(--color-success-subtle); color: var(--color-success); }
  @media (width >= 64em) {
    .p-tour-layout { grid-template-columns: 1.2fr 1fr; }
    .p-tour-story { padding: var(--space-10); }
    .p-tour-invitation { grid-template-columns: 1fr auto; padding: var(--space-8); }
  }
  @media (prefers-reduced-motion: no-preference) {
    .p-tour-story { animation: p-arrive var(--duration-slow) var(--ease-standard); }
    .p-demo-welcome { animation: p-arrive var(--duration-slow) var(--ease-standard); }
    .p-tour-step[data-complete="true"] .p-tour-step__number { animation: p-heart-in var(--duration-slow) var(--ease-emphasized); }
  }
  .p-tab-rail { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
  .p-tab-rail > .c-tabs { flex: 1; min-width: 0; }
  /* site.js sets data-tabs-fade on the edges with more tabs beyond them (the filter rail's fade,
     on both sides because the current tab can sit mid-rail). The mask only uses the color's alpha. */
  .p-tab-rail > .c-tabs[data-tabs-fade="end"] { mask-image: linear-gradient(to right, var(--color-text) calc(100% - var(--space-8)), transparent); }
  .p-tab-rail > .c-tabs[data-tabs-fade="start"] { mask-image: linear-gradient(to left, var(--color-text) calc(100% - var(--space-8)), transparent); }
  .p-tab-rail > .c-tabs[data-tabs-fade="both"] { mask-image: linear-gradient(to right, transparent, var(--color-text) var(--space-8), var(--color-text) calc(100% - var(--space-8)), transparent); }
  .p-tab-rail__controls { display: flex; gap: var(--space-1); flex-shrink: 0; }
  .p-journey-card { overflow-wrap: anywhere; }
  .p-event-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--listing-photo-min)), 1fr)); }
  .p-event-grid > .c-panel { display: flex; min-width: 0; }
  .p-event-grid .c-panel__body { display: flex; flex-direction: column; width: 100%; }
  .p-event-grid .c-panel__body > .c-cluster { margin-top: auto; padding-top: var(--space-2); }
  .p-event-date { display: grid; justify-items: center; align-content: center; width: var(--control-lg); padding: var(--space-2); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-subtle); }
  .p-event-date > span { font-size: var(--text-xs); color: var(--color-text-secondary); }
  .p-event-date > strong { font-size: var(--text-xl); line-height: var(--leading-tight); }
  @media (prefers-reduced-motion: no-preference) {
    .p-workspace-main .c-page-header { animation: p-arrive var(--duration-slow) var(--ease-standard); }
    .p-journey-card { animation: p-arrive var(--duration-slow) var(--ease-standard); }
    .p-work-list > .c-panel { transition: border-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard); }
  }
  @media (hover: hover) and (pointer: fine) {
    .p-work-list > .c-panel:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); }
  }
  .p-admission-qr { display: block; max-width: 100%; height: auto; }
  .p-pass-camera { display: block; width: 100%; border-radius: var(--radius-md); }
  .p-pass-code { overflow-wrap: anywhere; }
  .p-payment-reference { min-width: 0; overflow-wrap: anywhere; }
  .p-money-contact { min-width: 0; overflow-wrap: anywhere; }
  .p-day-notes { white-space: pre-wrap; overflow-wrap: anywhere; }
  .p-workspace-tasks { min-width: 0; overflow-wrap: anywhere; }
  .p-workspace-readiness .c-link { display: inline-flex; align-items: center; min-height: var(--control-md); }
  .p-check-in-feedback:not(:empty) { padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-subtle); }
  @media (prefers-reduced-motion: no-preference) {
    .p-check-in-feedback[data-saved] { animation: p-arrive var(--duration-slow) var(--ease-standard); }
  }
  .p-saved-entry { min-width: 0; }
  @media (prefers-reduced-motion: no-preference) {
    .p-saved-entry[data-saved-state="removed"] [data-saved-removed],
    .p-saved-entry[data-saved-state="saved"] article { animation: p-arrive var(--duration-slow) var(--ease-standard); }
  }
  .p-share-fallback { margin-block-start: var(--space-3); max-width: var(--reader-rail); }
  .p-edit-status { color: var(--color-text-secondary); }
  .p-character-count[data-near-limit="true"] { color: var(--color-warning); font-weight: var(--weight-semibold); }
  .p-host-request { scroll-margin-block: var(--space-6); }
  .p-host-request[data-needs-host-action="true"] { border-color: var(--color-accent-subtle-border); }
  .p-host-request__next { display: flex; align-items: flex-start; gap: var(--space-2); color: var(--color-text-secondary); }
  .p-host-request__next .c-icon { flex-shrink: 0; }
  .p-host-request__feedback { padding: var(--space-5) var(--space-6); border-block-start: var(--border-width) solid var(--color-border); background: var(--color-surface-subtle); }
  .p-host-request__feedback p { margin: 0; }
  .p-host-request__feedback[data-state="error"] { background: var(--color-warning-subtle); }
  .p-host-request__feedback .c-link { display: inline-flex; align-items: center; min-height: var(--control-md); }

  /* On a phone each action takes the card's width, rather than wrapping into a ragged right-aligned column. */
  @media (width < 40em) {
    .p-host-request .c-panel__footer > * { flex: 1 1 100%; }
    .p-host-request .c-panel__footer .c-button { width: 100%; }
  }

  @media (prefers-reduced-motion: no-preference) {
    .p-host-request[data-request-updated] { animation: p-arrive var(--duration-slow) var(--ease-standard); }
  }

  .p-setup-progress__check { display: inline-flex; color: var(--color-success); }

  @media (prefers-reduced-motion: no-preference) {
    .p-setup-progress__check:not([hidden]) .c-icon {
      animation: p-heart-in var(--duration-slow) var(--ease-emphasized);
    }
  }

  .p-setup-save {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
  }

  .p-setup-save__status {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1 1 var(--menu-min-width);
    margin: 0;
  }

  .p-setup-save__status > span:first-child,
  .p-setup-save__status > span:nth-child(2),
  .p-setup-save__status > span:nth-child(3) { flex-shrink: 0; }

  .p-setup-save[data-save-state="saved"] .c-icon { color: var(--color-success); }
  .p-setup-save[data-save-state="error"],
  .p-setup-save[data-save-state="invalid"] {
    border-color: var(--color-warning-border);
    background: var(--color-warning-subtle);
  }
  .p-setup-save[data-save-state="error"] .c-icon,
  .p-setup-save[data-save-state="invalid"] .c-icon { color: var(--color-warning); }

  @media (prefers-reduced-motion: no-preference) {
    .p-setup-save[data-save-state="saved"] .c-icon {
      animation: p-heart-in var(--duration-slow) var(--ease-emphasized);
    }
  }

  .p-request-sent__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--control-lg);
    height: var(--control-lg);
    border-radius: var(--radius-round);
    background: var(--color-success-subtle);
    color: var(--color-success);
  }

  .p-request-sent__steps {
    display: grid;
    gap: var(--space-5);
    margin: 0;
    padding-inline-start: var(--space-6);
  }

  .p-request-sent__steps li { padding-inline-start: var(--space-2); }
  .p-request-sent__steps p { margin-block: var(--space-1) 0; }
  .p-request-sent .c-panel__footer { flex-wrap: wrap; }

  @media (prefers-reduced-motion: no-preference) {
    .p-request-sent { animation: p-arrive var(--duration-slow) var(--ease-standard); }
    .p-request-sent__mark .c-icon { animation: p-heart-in var(--duration-slow) var(--ease-emphasized); }
  }

  /* A persistent live region, visually present only while it has feedback. */
  .p-save-feedback {
    position: fixed;
    inset-inline: var(--gutter);
    bottom: var(--space-6);
    z-index: var(--z-toast);
    width: fit-content;
    max-width: calc(100% - var(--gutter) * 2);
    margin-inline: auto;
    border-radius: var(--radius-lg);
    background: var(--color-surface-inverse);
    color: var(--color-text-on-inverse);
    box-shadow: var(--shadow-lg);
    font-size: var(--text-sm);
    pointer-events: none;
  }

  .p-save-feedback:not(:empty) { padding: var(--space-3) var(--space-5); }

  .p-detail-head__save[aria-pressed="true"] .c-icon { fill: currentColor; }

  @media (prefers-reduced-motion: no-preference) {
    .p-save-feedback:not(:empty),
    .p-photo-preview:not([hidden]),
    .p-listing-grid,
    .p-host-photos {
      animation: p-arrive var(--duration-slow) var(--ease-standard);
    }

    .p-listing-card__save-button[data-save-confirmed] .c-icon,
    .p-detail-head__save[data-save-confirmed] .c-icon {
      animation: p-heart-in var(--duration-slow) var(--ease-emphasized);
    }
  }

  @keyframes p-arrive {
    from { opacity: 0; transform: translateY(var(--motion-enter-distance)); }
  }

  @keyframes p-heart-in {
    from { transform: scale(var(--motion-check-scale)); }
  }

  .p-setup-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--space-6);
  }

  .p-setup-layout .c-button { white-space: normal; }

  .p-setup-layout .c-tile__face { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-3); }
  .p-setup-layout .c-tile__icon { grid-column: 1; grid-row: 1 / span 2; margin: var(--space-0); }
  .p-setup-layout .c-tile__title { grid-column: 2; padding-inline-end: var(--space-6); }
  .p-setup-layout .c-tile__description { grid-column: 2; }
  .p-setup-layout .c-tiles { grid-template-columns: minmax(0, 1fr); }

  @media (width >= 40em) {
    .p-setup-wording .c-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .p-setup-wording .c-tile:first-child { grid-column: 1 / -1; }
  }

  @media (width >= 64em) {
    .p-setup-layout { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  }

  .p-work-search {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-3);
  }

  .p-work-search .c-field { flex: 1 1 var(--listing-photo-min); }
  /* "Clear filters" sits on the controls' line, not mid-way up the labels above them: it takes
     the control height and centers its words in it, so it lines up with the button. */
  .p-work-search > .c-link { display: inline-flex; align-items: center; min-height: var(--control-md); }

  .p-work-list {
    display: grid;
    gap: var(--space-4);
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .p-work-list--divided { gap: 0; }
  .p-work-list--divided > li + li { border-top: var(--border-width) solid var(--color-border); }

  .p-work-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
  }

  .p-work-row > .c-stack,
  .p-work-row > .c-identity { flex: 1 1 var(--listing-photo-preview); min-width: 0; }

  /* The glyph beside a "needs you" row: same tile as a feature icon, sized to sit on one line. */
  .p-work-row__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: var(--control-md);
    height: var(--control-md);
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
    color: var(--color-text-secondary);
  }

  .p-work-row .c-subheading { overflow-wrap: anywhere; }
  .p-work-row .c-subheading > a {
    display: inline-flex;
    align-items: center;
    min-height: var(--target-touch);
  }

  .p-host-photos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--listing-photo-min)), 1fr));
    gap: var(--space-6);
    padding: 0;
    list-style: none;
  }

  /* A gallery of many photos reads as tiles, not a column of banners; a lone photo keeps tile size
     because auto-fill leaves the empty tracks in place. */
  .p-host-photos--compact {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--listing-photo-tile)), 1fr));
    gap: var(--space-4);
  }

  .p-host-photos__image,
  .p-photo-preview {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    background: var(--color-surface);
  }

  .p-photo-preview {
    max-width: var(--listing-photo-preview);
    border-radius: var(--radius-md);
    object-fit: contain;
  }

  .p-photo-preview[hidden] { display: none; }

  .p-listing-progress {
    width: 100%;
    height: var(--space-3);
    accent-color: var(--color-accent);
  }

  .p-listing-checks {
    padding: var(--space-6);
    margin: 0;
    list-style: none;
  }

  .p-listing-checks > li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding-block: var(--space-4);
  }

  .p-listing-checks > li + li { border-top: var(--border-width) solid var(--color-border); }
  /* @pattern p-app-shell ---------------------------------------------------- */

  .p-skip-link {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    z-index: var(--z-toast);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-surface-inverse);
    color: var(--color-text-on-inverse);
    font-weight: var(--weight-semibold);
    transform: translateY(-200%);
  }

  .p-skip-link:focus {
    color: var(--color-text-on-inverse);
    transform: none;
  }

  .p-sandbox-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--gutter);
    background: var(--color-surface-inverse);
    color: var(--color-text-on-inverse);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    line-height: var(--leading-snug);
    text-align: center;
  }

  /* On a phone the sample-data notice and the profile indicator can't share a row without wrapping
     into two ragged columns, so the indicator takes its own centered line. */
  .p-sandbox-banner {
    flex-wrap: wrap;
  }

  .p-sandbox-banner__demo {
    flex-basis: 100%;
  }

  @media (width >= 48em) {
    .p-sandbox-banner__demo {
      flex-basis: auto;
    }
  }

  /* The default .c-link purple is tuned for light surfaces and fails contrast here. */
  .p-sandbox-banner__demo .c-link,
  .p-sandbox-banner__demo .c-link:hover {
    color: var(--color-text-on-inverse);
  }

  /* "Switch profile" is a 15px-high line of text by default; give it a full-size target. */
  .p-sandbox-banner__demo .c-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--target-min);
    vertical-align: middle;
  }

  .p-app-main {
    flex: 1;
    padding-block: var(--space-8) var(--space-20);
  }

  /* The one-shot message a POST leaves for the page it redirects to (<ez-flash>). */
  .p-app-flash {
    margin-block-end: var(--space-6);
  }

  /* @pattern p-brand -------------------------------------------------------- */

  .p-brand {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-0);
    color: var(--color-text);
    text-decoration: none;
  }

  .p-brand:hover {
    color: var(--color-text);
    text-decoration: none;
  }

  .p-brand__mark {
    width: var(--control-sm);
    height: var(--control-sm);
    border-radius: var(--radius-sm);
  }

  .p-brand__word {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-tight);
  }

  .p-brand__ez {
    color: var(--color-accent);
  }

  /* @pattern p-app-header --------------------------------------------------- */

  .p-app-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    border-block-end: var(--border-width) solid var(--color-border);
    background: var(--color-surface);
  }

  /*
    Frosted where the browser can blur what scrolls beneath, opaque where it cannot: a
    translucent header without the blur would put page text behind its links. The phone menu
    panel keeps its own opaque surface.
  */
  @supports (backdrop-filter: blur(1px)) {
    .p-app-header {
      background: var(--color-surface-frosted);
      backdrop-filter: var(--backdrop-frosted);
    }
  }

  .p-app-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    min-height: var(--header-height);
  }

  .p-app-header__toggle {
    margin-inline-start: auto;
  }

  .p-app-nav {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
  }

  .p-app-nav__links,
  .p-app-nav__account {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin: var(--space-0);
    padding: var(--space-0);
    list-style: none;
  }

  .p-app-nav__account form {
    margin: var(--space-0);
  }

  /*
    The signed-in name beside the avatar. The header row is already at its tightest signed in
    (AppHeaderTests pins 1280px), and this is the one item with unbounded length, so it is capped
    and ellipsised rather than allowed to push the row sideways. The menu's own heading repeats
    the name in full, so a truncated one here loses nothing.
  */
  .p-app-nav__me {
    max-width: 7.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .p-app-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--control-md);
    padding-inline: var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--duration-fast) var(--ease-standard);
  }

  .p-app-nav__link:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
    text-decoration: none;
  }

  .p-app-nav__link[aria-current] {
    color: var(--color-text);
  }

  .p-app-nav__link[aria-current]::after {
    content: "";
    position: absolute;
    right: var(--space-3);
    bottom: var(--space-1);
    left: var(--space-3);
    height: var(--border-width-strong);
    border-radius: var(--radius-full);
    background: var(--color-accent);
  }

  /* Forced colors repaint backgrounds as Canvas, which would erase the underline bar and the
     phone menu's tinted current row. */
  @media (forced-colors: active) {
    .p-app-nav__link[aria-current]::after {
      forced-color-adjust: none;
      height: var(--focus-width);
      background: Highlight;
    }

    :root[data-js] .p-app-header[data-nav-open] .p-app-nav__link[aria-current] {
      border-inline-start: var(--focus-width) solid Highlight;
    }
  }

  /* The inline nav takes over at xl: signed in, its links need about 1,080px, more than lg gives. */
  @media (width >= 80em) {
    .p-app-header__toggle {
      display: none;
    }
  }

  /* Below xl without JavaScript: the links stay reachable as a scrolling row. */
  @media (width < 80em) {
    :root:not([data-js]) .p-app-header__inner {
      flex-wrap: wrap;
      gap: var(--space-2);
      padding-block: var(--space-2);
    }

    :root:not([data-js]) .p-app-nav {
      flex-basis: 100%;
      gap: var(--space-2);
      overflow-x: auto;
    }

    /* With JavaScript the menu button opens the same links as a panel. */
    :root[data-js] .p-app-nav {
      display: none;
    }

    :root[data-js] .p-app-header[data-nav-open] .p-app-nav {
      position: absolute;
      top: calc(100% + var(--space-2));
      inset-inline-end: var(--gutter);
      display: grid;
      align-items: stretch;
      justify-content: stretch;
      gap: var(--space-2);
      width: min(var(--app-nav-width), calc(100% - var(--gutter) * 2));
      max-height: calc(var(--app-nav-available-height) - var(--space-4));
      padding: var(--space-2);
      overflow-y: auto;
      overscroll-behavior: contain;
      border: var(--border-width) solid var(--color-border);
      border-radius: var(--radius-xl);
      background: var(--color-surface);
      box-shadow: var(--shadow-lg);
    }

    :root[data-js] .p-app-header[data-nav-open] .p-app-nav__links,
    :root[data-js] .p-app-header[data-nav-open] .p-app-nav__account {
      display: grid;
      gap: var(--space-1);
    }

    :root[data-js] .p-app-header[data-nav-open] .p-app-nav__account {
      padding-block-start: var(--space-2);
      border-block-start: var(--border-width) solid var(--color-border);
    }

    :root[data-js] .p-app-header[data-nav-open] .p-app-nav__link {
      width: 100%;
      min-height: var(--control-md);
    }

    :root[data-js] .p-app-header[data-nav-open] .p-app-nav__link[aria-current] {
      color: var(--color-accent-text);
      background: var(--color-accent-subtle);
    }

    :root[data-js] .p-app-header[data-nav-open] .p-app-nav__link[aria-current]::after {
      content: none;
    }

    :root[data-js] .p-app-nav .c-menu__trigger--account {
      width: 100%;
      min-height: var(--control-md);
      padding-inline: var(--space-3);
      border-radius: var(--radius-md);
      background: var(--color-surface-subtle);
    }

    :root[data-js] .p-app-nav__me {
      flex: 1;
      min-width: 0;
      max-width: none;
    }

    /* Expand the account choices in the same scroll area, never behind its edge. */
    :root[data-js] .p-app-nav .c-menu__panel--account {
      position: static;
      min-width: 0;
      max-height: none;
      margin-block-start: var(--space-2);
      padding: var(--space-2);
      overflow: visible;
      border: 0;
      background: var(--color-surface-subtle);
      box-shadow: var(--shadow-none);
    }

    :root[data-js] .p-app-nav .c-menu__footer .c-button {
      min-height: var(--control-md);
    }

    @media (prefers-reduced-motion: no-preference) {
      :root[data-js] .p-app-header[data-nav-open] .p-app-nav {
        animation: p-arrive var(--duration-normal) var(--ease-standard);
      }
    }
  }

  /* @pattern p-app-footer --------------------------------------------------- */

  .p-app-footer {
    border-block-start: var(--border-width) solid var(--color-border);
    background: var(--color-surface-subtle);
  }

  .p-app-footer__inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
    gap: var(--space-8);
    padding-block: var(--space-12);
  }

  .p-app-footer__brand {
    display: grid;
    align-content: start;
    gap: var(--space-3);
    grid-column: 1 / -1;
  }

  .p-app-footer__brand > * {
    margin: var(--space-0);
  }

  .p-app-footer__heading {
    margin: var(--space-0) var(--space-0) var(--space-3);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-normal);
  }

  .p-app-footer__links {
    display: grid;
    gap: var(--space-1);
    margin: var(--space-0);
    padding: var(--space-0);
    list-style: none;
  }

  .p-app-footer__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--target-min);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    text-decoration: none;
  }

  .p-app-footer__link:hover {
    color: var(--color-text);
    text-decoration: underline;
  }

  @media (width >= 48em) {
    .p-app-footer__inner {
      grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
    }

    .p-app-footer__brand {
      grid-column: auto;
    }
  }

  /* @pattern p-search ------------------------------------------------------- */

  .p-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .p-search__bar {
    display: grid;
    grid-template-columns: 1fr;
    padding: var(--space-2);
    border: var(--border-width) solid var(--color-border-control);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
  }

  .p-search__segment {
    position: relative;
    display: grid;
    align-content: center;
    gap: var(--space-0-5);
    min-width: 0;
    min-height: var(--control-lg);
    padding-inline: var(--space-4);
    border-radius: var(--radius-lg);
    transition: background-color var(--duration-fast) var(--ease-standard);
  }

  .p-search__segment + .p-search__segment::before {
    content: "";
    position: absolute;
    top: 0;
    right: var(--space-4);
    left: var(--space-4);
    height: var(--border-width);
    background: var(--color-border);
  }

  .p-search__segment:hover {
    background: var(--color-surface-hover);
  }

  .p-search__segment:has(> .p-search__trigger:focus-visible),
  .p-search__segment:has(> .p-search__input:focus-visible) {
    outline: var(--focus-width) solid var(--color-focus);
    outline-offset: calc(var(--focus-width) * -1);
  }

  .p-search__segment--input {
    cursor: text;
  }

  .p-search__label {
    display: block;
    margin: var(--space-0);
    color: var(--color-text);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
  }

  .p-search__input {
    width: 100%;
    min-width: 0;
    min-height: var(--target-min);
    padding: var(--space-0);
    border: 0;
    background: transparent;
    color: var(--color-text);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
  }

  .p-search__input:focus-visible {
    outline: none;
  }

  .p-search__trigger {
    display: grid;
    align-content: center;
    gap: var(--space-0-5);
    min-height: var(--control-lg);
    margin-inline: calc(var(--space-4) * -1);
    padding-inline: var(--space-4);
    border-radius: var(--radius-lg);
    list-style: none;
    cursor: pointer;
  }

  .p-search__trigger::-webkit-details-marker {
    display: none;
  }

  .p-search__trigger:focus-visible {
    outline: none;
  }

  .p-search__value {
    overflow: hidden;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .p-search__panel {
    display: grid;
    gap: var(--space-4);
    padding-block: var(--space-2) var(--space-4);
    cursor: auto;
  }

  .p-search__submit {
    width: 100%;
    margin-block-start: var(--space-2);
  }

  .p-search__toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .p-search__toolbar > nav {
    flex: 1;
    min-width: 0;
  }

  @media (width >= 48em) {
    .p-search__bar {
      grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 1fr) auto;
      align-items: center;
      border-radius: var(--radius-full);
    }

    .p-search__segment {
      padding-inline: var(--space-6);
      border-radius: var(--radius-full);
    }

    .p-search__segment + .p-search__segment::before {
      top: var(--space-3);
      right: auto;
      bottom: var(--space-3);
      left: 0;
      width: var(--border-width);
      height: auto;
    }

    .p-search__segment:hover::before,
    .p-search__segment:hover + .p-search__segment::before,
    .p-search__segment[open]::before,
    .p-search__segment[open] + .p-search__segment::before {
      background: transparent;
    }

    .p-search__segment[open] {
      background: var(--color-surface);
      box-shadow: var(--shadow-lg);
    }

    .p-search__trigger {
      margin-inline: calc(var(--space-6) * -1);
      padding-inline: var(--space-6);
      border-radius: var(--radius-full);
    }

    .p-search__panel {
      position: absolute;
      top: calc(100% + var(--space-3));
      left: 0;
      z-index: var(--z-dropdown);
      width: min(24rem, 100vw - var(--gutter) * 2);
      padding: var(--space-5);
      border: var(--border-width) solid var(--color-border);
      border-radius: var(--radius-lg);
      background: var(--color-surface);
      box-shadow: var(--shadow-lg);
    }

    .p-search__submit {
      width: auto;
      min-height: var(--control-lg);
      margin: var(--space-0);
      padding-inline: var(--space-6);
      border-radius: var(--radius-full);
    }
  }

  /* @pattern p-filters ------------------------------------------------------ */

  .p-filters {
    position: relative;
    flex-shrink: 0;
  }

  .p-filters__trigger {
    list-style: none;
  }

  .p-filters__trigger::-webkit-details-marker {
    display: none;
  }

  .p-filters__panel {
    display: block;
  }

  .p-filters__amenities {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
    gap: var(--space-6) var(--space-8);
  }

  .p-filters__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block-start: var(--space-4);
    border-block-start: var(--border-width) solid var(--color-border);
  }

  /* Without JavaScript the sheet content opens as a dropdown panel under the button. */
  :root:not([data-js]) .p-filters[open] > .p-filters__panel {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    z-index: var(--z-dropdown);
    width: min(40rem, 100vw - var(--gutter) * 2);
    max-height: 70vh;
    padding: var(--space-6);
    overflow-y: auto;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
  }

  /* @pattern p-results ------------------------------------------------------ */

  .p-results-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
  }

  /* Phones: Sort and List | Map share one row. The segment icons are decorative (the words
     stay), so they drop first, and the segments and gap tighten. Still wraps if it can't fit. */
  @media (width < 40em) {
    .p-results-head .c-cluster:has(> .c-segmented) {
      gap: var(--space-2);
    }

    .p-results-head .c-segmented__link {
      padding-inline: var(--space-3);
    }

    .p-results-head .c-segmented__link .c-icon {
      display: none;
    }
  }

  .p-listing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
    gap: var(--space-10) var(--space-6);
    margin: var(--space-0);
    padding: var(--space-0);
    list-style: none;
  }

  /* Exactly three cards (related gatherings, more spaces) fill the row instead of leaving a
     fourth track empty. */
  @media (width >= 64em) {
    .p-listing-grid:has(> :nth-child(3):last-child) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* @pattern p-listing-card ------------------------------------------------- */

  .p-listing-card {
    position: relative;
    display: grid;
    align-content: start;
    gap: var(--space-3);
    /* Room under the last text line so the focus ring around the whole card never touches it. */
    padding-block-end: var(--space-1);
    color: var(--color-text);
  }

  .p-listing-card__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    border-radius: var(--radius-lg);
    /* Until a lazy image arrives (or if it never does), the slot shows the brand washes rather
       than a flat gray box. Event covers replace this with their kind's gradient. */
    background:
      linear-gradient(135deg, var(--color-brand-glow-indigo), var(--color-brand-glow-coral) 60%, var(--color-brand-glow-teal)),
      var(--color-surface-muted);
  }

  .p-listing-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-standard);
  }

  /* The hover lift below turns the media into a stacking context, which would trap the save
     button's z-index under the card's stretched link. Lifting the media above the link and
     letting pointer events fall through it keeps both the heart and the whole-card link
     clickable; only the save form takes pointer events back. */
  .p-listing-card__media {
    z-index: var(--z-card-action);
    pointer-events: none;
  }

  .p-listing-card__save {
    pointer-events: auto;
  }

  @media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
    .p-listing-card__media {
      transition: transform var(--duration-slow) var(--ease-standard), box-shadow var(--duration-slow) var(--ease-standard);
    }

    .p-listing-card:hover .p-listing-card__media,
    .p-listing-card:focus-within .p-listing-card__media {
      transform: translateY(var(--motion-hover-lift));
    }

    .p-listing-card:hover .p-listing-card__media {
      box-shadow: var(--shadow-md);
    }

    .p-listing-card:hover .p-listing-card__image,
    .p-listing-card:focus-within .p-listing-card__image {
      transform: scale(1.03);
    }
  }

  .p-listing-card__badge {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    background: var(--color-surface);
    color: var(--color-text);
  }

  .p-listing-card__save {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    z-index: var(--z-card-action);
    margin: var(--space-0);
  }

  .p-listing-card__save-button {
    border-color: transparent;
    box-shadow: var(--shadow-sm);
  }

  .p-listing-card__save-button[aria-pressed="true"] {
    color: var(--color-accent);
  }

  .p-listing-card__save-button[aria-pressed="true"] .c-icon {
    fill: currentColor;
  }

  .p-listing-card__body {
    display: grid;
    gap: var(--space-1);
  }

  .p-listing-card__body > * {
    margin: var(--space-0);
  }

  .p-listing-card__title {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-normal);
  }

  .p-listing-card__price {
    font-size: var(--text-sm);
  }

  .p-listing-card .c-badge {
    white-space: normal;
  }

  .p-listing-card__requirements {
    display: flex;
    align-items: flex-start;
    gap: var(--space-1-5);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
  }

  .p-listing-card__requirements > .c-icon {
    margin-block-start: var(--space-0-5);
  }

  .p-listing-card__meta {
    display: flex;
    align-items: flex-start;
    gap: var(--space-1-5);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
  }

  .p-listing-card__meta > .c-icon {
    margin-block-start: var(--space-0-5);
  }

  /* @pattern p-event-cover -------------------------------------------------- */

  /* Illustration zone: gradients from brand tokens stand in for missing event photos. */
  .p-event-cover {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--color-brand-lilac), var(--color-brand-indigo));
  }

  .p-event-cover--general {
    background: linear-gradient(135deg, var(--color-brand-lilac), var(--color-brand-indigo));
  }

  .p-event-cover--celebration {
    background: linear-gradient(135deg, var(--color-brand-coral), var(--color-brand-indigo));
  }

  .p-event-cover--business {
    background: linear-gradient(135deg, var(--color-brand-night), var(--color-brand-indigo));
  }

  .p-event-cover--activity {
    background: linear-gradient(135deg, var(--color-brand-teal), var(--color-brand-indigo));
  }

  .p-event-cover--ticketed {
    background: linear-gradient(135deg, var(--color-brand-indigo), var(--color-brand-coral));
  }

  .p-date-badge {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    display: grid;
    justify-items: center;
    min-width: var(--control-md);
    padding: var(--space-1-5) var(--space-2);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-sm);
    line-height: var(--leading-none);
  }

  .p-date-badge__month {
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
  }

  .p-date-badge__day {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
  }

  /* @pattern p-planning-guides --------------------------------------------- */

  /* Guide links after a page's results: a divider and a larger gap mark the change from
     listings to advice (the results grid's own row gap is --space-10). */
  .p-planning-guides {
    margin-block-start: var(--space-4);
    padding-block-start: var(--space-8);
    border-block-start: var(--border-width) solid var(--color-border);
  }

  /* @pattern p-section-head ------------------------------------------------- */

  .p-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3) var(--space-4);
  }

  /*
    A text-style action beside a heading bleeds its padding into the gutter, so its words line up
    with the heading's edge when it wraps under it on a phone, and its arrow with the column's end
    edge when it sits beside it.
  */
  .p-section-head > .c-button--tertiary {
    margin-inline: calc(var(--space-3) * -1);
  }

  /* @pattern p-home --------------------------------------------------------- */

  .p-home-hero {
    padding-block-start: var(--space-4);
  }

  .p-home-hero__inner {
    display: grid;
    align-items: center;
    gap: var(--space-8) var(--space-12);
  }

  .p-home-hero__copy {
    min-width: 0;
  }


  .p-home-search {
    display: grid;
    grid-column: 1 / -1;
    justify-items: start;
    gap: var(--space-3);
  }

  .p-home-search__form {
    width: 100%;
  }

  .p-home-search__form--gatherings {
    display: none;
  }

  .p-home-search:has(input[value="gatherings"]:checked) .p-home-search__form--spaces {
    display: none;
  }

  .p-home-search:has(input[value="gatherings"]:checked) .p-home-search__form--gatherings {
    display: grid;
  }

  @supports not (selector(:has(*))) {
    .p-home-search__form--gatherings {
      display: grid;
    }

    .p-home-search__switch {
      display: none;
    }
  }

  .p-home-hero__art {
    position: relative;
    display: grid;
    order: 1;
    min-width: 0;
    margin: var(--space-0);
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: var(--color-surface-subtle);
  }

  .p-home-hero__image {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }

  .p-home-hero__caption {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-6);
  }

  .p-home-hero__caption > * {
    margin: var(--space-0);
  }

  .p-home-steps {
    display: grid;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-6);
    border-radius: var(--radius-xl);
    background: var(--color-surface-subtle);
  }

  .p-home-steps__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    gap: var(--space-8);
    margin: var(--space-0);
    padding: var(--space-0);
    list-style: none;
  }

  .p-home-steps__step {
    display: grid;
    align-content: start;
    gap: var(--space-2);
  }

  .p-home-steps__step > * {
    margin: var(--space-0);
  }

  .p-home-steps__icon {
    display: grid;
    place-items: center;
    width: var(--control-md);
    height: var(--control-md);
    margin-block-end: var(--space-2);
    border-radius: var(--radius-round);
    background: var(--color-surface-muted);
    color: var(--color-text-secondary);
  }

  @media (width >= 64em) {
    .p-home-hero__inner {
      grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    }

    .p-home-hero__art {
      order: 0;
    }

    .p-home-steps {
      padding: var(--space-12) var(--space-10);
    }
  }

  /* @pattern p-detail (space and event detail pages) ------------------------ */

  .p-back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    min-height: var(--target-min);
    font-size: var(--text-sm);
    text-decoration: none;
  }

  .p-detail-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
  }

  .p-detail-head form {
    margin: var(--space-0);
  }

  .p-detail-head__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-0);
    color: var(--color-text-secondary);
  }

  .p-detail-head__save[aria-pressed="true"] {
    border-color: var(--color-accent-subtle-border);
    background: var(--color-accent-subtle);
    color: var(--color-accent-text);
  }

  .p-detail-head__save[aria-pressed="true"] .c-icon {
    fill: currentColor;
  }

  /* Event cover: a photo when the organizer added one, otherwise the kind's illustration. */
  .p-event-hero {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-xl);
  }

  .p-event-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @media (width >= 48em) {
    .p-event-hero {
      aspect-ratio: 5 / 2;
    }

    /*
      Stage illustrations (/img/stages/*.svg) are 3:2 compositions; cropping them to the 5:2
      frame cuts off their subject. Show the whole drawing, centered on a quiet surface.
    */
    .p-event-hero:has(> .p-event-hero__image[src*=".svg"]) {
      background: var(--color-surface-subtle);
    }

    /* Pinned to the frame: the hero's height comes from its aspect ratio, not its grid row, so a
       percentage height in flow never resolves and the drawing grew to 3:2 and was clipped. */
    .p-event-hero__image[src*=".svg"] {
      position: absolute;
      inset: 0;
      object-fit: contain;
    }
  }

  /* Date and location: the two facts a guest checks first, side by side from tablet up. */
  .p-event-facts {
    display: grid;
    gap: var(--space-6);
  }

  .p-event-fact {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--space-4);
  }

  .p-event-fact__tile {
    display: grid;
    place-content: center;
    justify-items: center;
    width: var(--control-lg);
    height: var(--control-lg);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
    color: var(--color-text-secondary);
    line-height: var(--leading-none);
  }

  .p-event-fact__body {
    display: grid;
    justify-items: start;
    gap: var(--space-1);
    min-width: 0;
  }

  .p-event-fact__body > * {
    margin: var(--space-0);
  }

  .p-event-fact__primary {
    color: var(--color-text);
    font-weight: var(--weight-semibold);
  }

  /* A link on its own line is a target, not inline text: it gets the minimum target height. */
  .p-event-fact__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--target-min);
  }

  .p-event-fact__secondary {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
  }

  .p-event-fact__body > .c-button,
  .p-event-fact__body > .c-badge {
    margin-block-start: var(--space-2);
  }

  @media (width >= 48em) {
    .p-event-facts {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .p-gallery {
    position: relative;
  }

  .p-gallery__grid {
    position: relative;
    display: grid;
    gap: var(--space-2);
    overflow: hidden;
    border-radius: var(--radius-xl);
  }

  .p-gallery__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--color-surface-muted);
  }

  .p-gallery__image--main {
    aspect-ratio: 3 / 2;
  }

  .p-gallery__grid > .p-gallery__image:not(.p-gallery__image--main) {
    display: none;
  }

  .p-gallery__badge {
    position: absolute;
    bottom: var(--space-4);
    left: var(--space-4);
    background: var(--color-surface);
    color: var(--color-text);
  }

  .p-gallery__all {
    position: absolute;
    right: var(--space-4);
    bottom: var(--space-4);
  }

  .p-gallery__all-trigger {
    border-color: transparent;
    box-shadow: var(--shadow-sm);
    list-style: none;
  }

  .p-gallery__all-trigger::-webkit-details-marker {
    display: none;
  }

  :root:not([data-js]) .p-gallery__all {
    position: static;
    margin-block-start: var(--space-3);
  }

  :root:not([data-js]) .p-gallery__all[open] > .p-gallery__list {
    margin-block-start: var(--space-4);
  }

  .p-gallery__list {
    display: grid;
    gap: var(--space-6);
  }

  .p-gallery__figure {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-0);
  }

  .p-gallery__figure > .p-gallery__image {
    border-radius: var(--radius-lg);
  }

  .p-gallery__dialog {
    width: min(100% - var(--gutter) * 2, 64rem);
  }

  /* Tablet and up: the mosaic adapts to how many photos exist, so it never shows empty cells. */
  @media (width >= 48em) {
    .p-gallery__grid {
      grid-template-rows: repeat(2, 11rem);
    }

    .p-gallery__grid > .p-gallery__image:not(.p-gallery__image--main) {
      display: block;
    }

    .p-gallery__grid > .p-gallery__image--main {
      grid-row: 1 / 3;
      aspect-ratio: auto;
    }

    /* A stage illustration is a 3:2 drawing; the wide mosaic cell would crop its subject (as on
       the event hero), so it shows whole on the quiet surface. */
    .p-gallery__image[src*=".svg"] {
      object-fit: contain;
      background: var(--color-surface-subtle);
    }

    .p-gallery__grid--count-1 {
      grid-template-columns: 1fr;
    }

    .p-gallery__grid--count-2 {
      grid-template-columns: 1fr 1fr;
    }

    .p-gallery__grid--count-2 > .p-gallery__image {
      grid-row: 1 / 3;
    }

    .p-gallery__grid--count-3 {
      grid-template-columns: 2fr 1fr;
    }

    .p-gallery__grid--count-4 {
      grid-template-columns: 2fr 1fr 1fr;
    }

    .p-gallery__grid--count-4 > .p-gallery__image:last-child {
      grid-column: span 2;
    }

    .p-gallery__grid--count-5 {
      grid-template-columns: 2fr 1fr 1fr;
    }
  }

  @media (width >= 64em) {
    .p-gallery__grid {
      grid-template-rows: repeat(2, 14rem);
    }
  }

  .p-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--space-10);
  }

  .p-detail-layout__main {
    display: grid;
    min-width: 0;
  }

  .p-detail-section {
    display: grid;
    gap: var(--space-5);
    padding-block: var(--space-8);
    border-block-start: var(--border-width) solid var(--color-border);
  }

  .p-detail-section:first-child {
    padding-block-start: var(--space-0);
    border-block-start: 0;
  }

  .p-detail-section > * {
    margin: var(--space-0);
  }

  /* Organizer- and host-written text: a long URL breaks rather than widening the page. */
  .p-detail-section__prose {
    max-width: var(--measure);
    overflow-wrap: anywhere;
  }

  .p-host {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--space-4);
  }

  .p-host__avatar {
    display: grid;
    place-items: center;
    width: var(--control-lg);
    height: var(--control-lg);
    border-radius: var(--radius-round);
    background: var(--color-surface-muted);
    color: var(--color-text-secondary);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
  }

  .p-space-use {
    gap: var(--space-1-5);
    padding: var(--space-1-5) var(--space-3);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
  }

  .p-space-amenities,
  .p-things {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
    gap: var(--space-8);
  }

  .p-avail {
    display: grid;
    gap: var(--space-4);
    max-width: 30rem;
  }

  .p-avail__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .p-avail-cal {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    caption-side: bottom;
  }

  .p-avail-cal caption {
    padding-block-start: var(--space-3);
    text-align: start;
  }

  .p-avail-cal th {
    padding-block: var(--space-1);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-align: center;
  }

  .p-avail-cal td {
    padding: var(--space-0-5);
    text-align: center;
  }

  .p-avail-cal__day {
    display: inline-grid;
    place-items: center;
    width: var(--control-md);
    max-width: 100%;
    height: var(--control-md);
    border-radius: var(--radius-round);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
  }

  .p-avail-cal__day--past {
    color: var(--color-text-tertiary);
  }

  .p-avail-cal__day--blocked {
    color: var(--color-text-tertiary);
    text-decoration: line-through;
  }

  /* Forced colors keep the strikethrough but flatten its color; a dashed outline marks a day
     that cannot be picked in shape as well as in line. */
  @media (forced-colors: active) {
    .p-avail-cal__day--past,
    .p-avail-cal__day--blocked {
      color: GrayText;
      outline: var(--border-width) dashed GrayText;
      outline-offset: calc(var(--border-width) * -1);
    }
  }

  .p-avail-cal__day--open {
    color: var(--color-text);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-standard);
  }

  .p-avail-cal__day--open:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
    text-decoration: none;
  }

  .p-avail-cal__day--open[aria-current="date"] {
    background: var(--color-surface-inverse);
    color: var(--color-text-on-inverse);
  }

  /* Leaflet's attribution link is 15px high and its map frame clips overflow, so the ring is
     drawn inside the link and the link grows to a 24px target. */
  .p-space-map .leaflet-control-attribution a,
  .p-map-layout__map .leaflet-control-attribution a {
    display: inline-flex;
    align-items: center;
    min-height: var(--target-min);
    padding-inline: var(--space-1);
    outline-offset: calc(var(--focus-width) * -1);
  }

  .p-space-map {
    display: grid;
    place-items: center;
    height: 20rem;
    overflow: hidden;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-muted);
    color: var(--color-text-secondary);
  }

  .p-action {
    min-width: 0;
  }

  .p-action__card {
    display: grid;
    gap: var(--space-5);
    padding: var(--space-6);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
  }

  .p-action__card > * {
    margin: var(--space-0);
  }

  .p-action__price {
    display: grid;
    gap: var(--space-1);
  }

  .p-action__price > * {
    margin: var(--space-0);
  }

  .p-action__rate {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
  }

  .p-action__when {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-4);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-lg);
  }

  .p-action__rules-link {
    display: inline-flex;
    align-items: center;
    align-self: start;
    min-height: var(--target-min);
    margin-inline-start: calc(var(--checkbox-size) + var(--space-3));
  }

  .p-action__requirements {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
  }

  .p-action__requirements > * {
    margin: var(--space-0);
  }

  .p-action-bar {
    position: sticky;
    bottom: 0;
    z-index: var(--z-sticky);
    padding-block: var(--space-3);
    border-block-start: var(--border-width) solid var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
  }

  .p-action-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
  }

  .p-action-bar__inner > p {
    margin: var(--space-0);
  }

  @media (width >= 64em) {
    .p-detail-layout {
      grid-template-columns: minmax(0, 1fr) 24rem;
      gap: var(--space-16);
    }

    .p-action {
      position: sticky;
      top: calc(var(--header-height) + var(--space-6));
    }

    .p-action-bar {
      display: none;
    }
  }

  /* @pattern p-feature ------------------------------------------------------- */

  /* Choice cards with one explicit action each (Plan an event, Six paths). */
  /*
    Persona picker (the demo sign-in page). Unlike p-feature-grid, this one uses auto-fill so a
    group holding a single persona keeps a card's width instead of stretching one card across the
    page, and caps at three columns so a card never grows wider than its own text wants to be.
  */
  .p-persona-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
    gap: var(--space-4);
    margin: var(--space-0);
    padding: var(--space-0);
    list-style: none;
  }

  @media (width >= 64em) {
    .p-persona-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .p-persona {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    height: 100%;
    padding: var(--space-5);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
  }

  .p-persona > * {
    margin: var(--space-0);
  }

  /* The face sits beside the title and the person, top-aligned; everything after runs the card's full width. */
  .p-persona__head {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
  }

  .p-persona__heading {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
  }

  .p-persona__heading > * {
    margin: var(--space-0);
  }

  /* The person first: their avatar in their own tone, with the profile's role as a badge on its corner. */
  .p-persona__face {
    position: relative;
    flex: none;
  }

  .p-persona__face > .c-avatar {
    width: var(--control-lg);
    height: var(--control-lg);
    font-size: var(--text-lg);
  }

  .p-persona__role {
    position: absolute;
    inset-block-end: calc(var(--space-1) * -1);
    inset-inline-end: calc(var(--space-1) * -1);
    display: grid;
    place-items: center;
    width: var(--avatar-sm);
    height: var(--avatar-sm);
    border: var(--border-width-strong) solid var(--color-surface);
    border-radius: var(--radius-round);
    background: var(--color-accent-subtle);
    color: var(--color-accent-text);
  }

  .p-persona__title {
    margin: var(--space-0);
    color: var(--color-text);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
  }

  .p-persona__points {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-0);
    padding: var(--space-0);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    list-style: none;
  }

  .p-persona__points > li {
    display: grid;
    grid-template-columns: var(--icon-sm) minmax(0, 1fr);
    gap: var(--space-2);
    align-items: start;
  }

  .p-persona__points svg {
    margin-block-start: var(--space-0-5);
    color: var(--color-success);
  }

  /* Steps still to take, not things already done: a neutral arrow instead of the success check. */
  .p-persona__points--steps svg {
    color: var(--color-text-tertiary);
  }

  .p-persona__empty {
    color: var(--color-text-tertiary);
    font-size: var(--text-sm);
    font-style: italic;
    line-height: var(--leading-snug);
  }

  /* Pushed to the bottom so every card in a row lines its button up with the others. */
  .p-persona__action {
    display: grid;
    gap: var(--space-2);
    justify-items: start;
    margin-block-start: auto;
  }

  /* @pattern p-plan ---------------------------------------------------------- */

  /* Plan cards (the pricing page, an organization's plan page): price, fee, and what each plan includes. */
  .p-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
    gap: var(--space-4);
    margin: var(--space-0);
    padding: var(--space-0);
    list-style: none;
  }

  .p-plan {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    height: 100%;
    padding: var(--space-6);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
  }

  .p-plan > * {
    margin: var(--space-0);
  }

  /* The plan recurring organizers are pointed to: an accent edge and a lifted card, not a louder fill. */
  .p-plan--featured {
    border-color: var(--color-accent-subtle-border);
    box-shadow: var(--shadow-md);
  }

  .p-plan__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
  }

  .p-plan__name {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
  }

  .p-plan__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
  }

  .p-plan__amount {
    font-size: var(--text-4xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-tight);
    font-variant-numeric: tabular-nums;
  }

  .p-plan__per {
    color: var(--color-text-secondary);
  }

  .p-plan__fee {
    padding-block-end: var(--space-4);
    border-block-end: var(--border-width) solid var(--color-border);
  }

  .p-plan__features {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-0);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    list-style: none;
  }

  .p-plan__features > li {
    display: grid;
    grid-template-columns: var(--icon-sm) minmax(0, 1fr);
    gap: var(--space-2);
    align-items: start;
    color: var(--color-text-secondary);
  }

  .p-plan__features strong {
    color: var(--color-text);
  }

  .p-plan__features svg {
    margin-block-start: var(--space-0-5);
    color: var(--color-success);
  }

  /* Pushed to the bottom so both cards line their actions up. */
  .p-plan__action {
    margin-block-start: auto;
  }

  /* @pattern p-fee-split ----------------------------------------------------- */

  /* Words beside their worked example (a host's booking on /pricing and /list): stacked on a phone, side by side from md. */
  .p-fee-split {
    display: grid;
    gap: var(--space-6);
    align-items: center;
  }

  @media (width >= 48em) {
    .p-fee-split {
      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
      gap: var(--space-10);
    }
  }

  .p-fee-receipt {
    box-shadow: var(--shadow-sm);
  }

  /* The line a money table adds up to (a report's totals, an example's result): set apart on its own tint. */
  .p-money-total {
    background: var(--color-surface-subtle);
    font-weight: var(--weight-semibold);
  }

  .p-money-total > td,
  .p-money-total > th {
    color: var(--color-text);
  }

  .p-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
    gap: var(--space-4);
  }

  .p-feature {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    height: 100%;
    padding: var(--space-6);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
  }

  .p-feature > * {
    margin: var(--space-0);
  }

  .p-feature__icon {
    display: grid;
    place-items: center;
    width: var(--control-md);
    height: var(--control-md);
    margin-block-end: var(--space-2);
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
    color: var(--color-text-secondary);
  }

  /* A step badge for cards worth counting ("Three ways to start"). It sits inside
     the overline and stays aria-hidden: the list already announces each item's
     position, so this only repeats that for sighted scanning. */
  .p-feature__step {
    display: inline-grid;
    place-items: center;
    min-width: var(--icon-md);
    height: var(--icon-md);
    margin-inline-end: var(--space-1-5);
    border-radius: var(--radius-full);
    background: var(--color-surface-muted);
    letter-spacing: var(--tracking-normal);
    text-transform: none;
    vertical-align: middle;
  }

  .p-feature__title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-normal);
  }

  /* The action sits on the card's bottom edge, so a row of cards lines its actions up. */
  .p-feature__action {
    margin-block-start: auto;
    padding-block-start: var(--space-4);
  }

  /* @pattern p-pitch --------------------------------------------------------- */

  /*
    The persona pages (/for-venues, /for-organizers): words beside a framed picture of the
    real screen, drawn with the real components and labeled as sample figures. Stacked on a
    phone; side by side from lg, with --flip putting the picture first.
  */
  .p-pitch-hero,
  .p-pitch-row {
    display: grid;
    align-items: center;
    gap: var(--space-8);
  }

  /* The page's one flourish (principle 4: gradients belong to hero art). */
  .p-pitch-hero {
    position: relative;
    isolation: isolate;
    padding: var(--space-8) var(--space-4);
  }

  .p-pitch-hero::before {
    position: absolute;
    inset: 0;
    z-index: var(--z-behind);
    border-radius: var(--radius-xl);
    background:
      radial-gradient(50% 70% at 6% 10%, var(--color-brand-glow-indigo), transparent 70%),
      radial-gradient(45% 60% at 96% 90%, var(--color-brand-glow-teal), transparent 72%),
      radial-gradient(40% 50% at 70% 0%, var(--color-brand-glow-coral), transparent 70%);
    content: "";
    pointer-events: none;
  }

  .p-pitch-row {
    padding-block-start: var(--space-10);
    border-block-start: var(--border-width) solid var(--color-border);
  }

  @media (width >= 64em) {
    .p-pitch-hero {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
      gap: var(--space-12);
      padding: var(--space-12) var(--space-10);
    }

    .p-pitch-row {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
      gap: var(--space-12);
    }

    .p-pitch-row--flip > :first-child {
      order: 2;
    }
  }

  /* A screen in a frame: a title bar, then the components that screen really uses. */
  .p-pitch-window {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-0);
  }

  .p-pitch-window > .c-caption {
    padding-inline: var(--space-2);
  }

  .p-pitch-window__bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: var(--border-width) solid var(--color-border);
    border-block-end: 0;
    border-radius: var(--radius-xl) var(--radius-xl) var(--radius-none) var(--radius-none);
    background: var(--color-surface-muted);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
  }

  .p-pitch-window__bar > .c-badge {
    margin-inline-start: auto;
  }

  /* Three window dots: the span is the first; its pseudo-elements are the other two. */
  .p-pitch-window__dots {
    position: relative;
    flex-shrink: 0;
    width: var(--badge-dot);
    height: var(--badge-dot);
    margin-inline-end: var(--space-8);
    border-radius: var(--radius-full);
    background: var(--color-border-strong);
  }

  .p-pitch-window__dots::before,
  .p-pitch-window__dots::after {
    position: absolute;
    inset-block: 0;
    width: var(--badge-dot);
    border-radius: var(--radius-full);
    background: var(--color-border-strong);
    content: "";
  }

  .p-pitch-window__dots::before {
    inset-inline-start: var(--space-4);
  }

  .p-pitch-window__dots::after {
    inset-inline-start: var(--space-8);
  }

  .p-pitch-window__body {
    padding: var(--space-4);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-none) var(--radius-none) var(--radius-xl) var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
  }

  @media (width >= 48em) {
    .p-pitch-window__body {
      padding: var(--space-6);
    }
  }

  /* Tiles share the frame's width: a tile that wraps fills its row rather than leaving a hole. */
  .p-pitch-window .c-stat-grid {
    display: flex;
    flex-wrap: wrap;
  }

  .p-pitch-window .c-stat {
    flex: 1 1 7rem;
  }

  .p-pitch-window__title {
    margin: var(--space-0);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
  }

  /* A bar chart: the SVG stretches to the column; month labels are HTML, so text never scales. */
  .p-pitch-chart {
    display: grid;
    gap: var(--space-2);
  }

  .p-pitch-chart > p {
    margin: var(--space-0);
  }

  .p-pitch-chart__plot {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 1;
  }

  .p-pitch-chart__bar {
    fill: var(--color-accent-subtle-border);
  }

  .p-pitch-chart__bar--current {
    fill: var(--color-accent);
  }

  .p-pitch-chart__grid,
  .p-pitch-chart__axis {
    stroke: var(--color-border);
    stroke-width: var(--border-width);
    vector-effect: non-scaling-stroke;
  }

  .p-pitch-chart__axis,
  .p-pitch-chart__grid--limit {
    stroke: var(--color-border-strong);
  }

  .p-pitch-chart__labels {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    margin: var(--space-0);
    padding: var(--space-0);
    list-style: none;
    color: var(--color-text-tertiary);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    text-align: center;
  }

  @media (forced-colors: active) {
    .p-pitch-chart__bar {
      fill: GrayText;
    }

    .p-pitch-chart__bar--current {
      fill: Highlight;
    }

    .p-pitch-chart__grid,
    .p-pitch-chart__axis {
      stroke: CanvasText;
    }
  }

  /* Checked selling points beside a picture. */
  .p-pitch-points {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-0);
    padding: var(--space-0);
    list-style: none;
  }

  .p-pitch-points > li {
    display: flex;
    align-items: start;
    gap: var(--space-3);
  }

  .p-pitch-points .c-icon {
    flex-shrink: 0;
    color: var(--color-success);
  }

  /* Rows inside a framed screen: an avatar or icon, two lines, and a status. */
  .p-pitch-list {
    display: grid;
    margin: var(--space-0);
    padding: var(--space-0);
    list-style: none;
  }

  .p-pitch-list__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-block: var(--space-3);
    border-block-end: var(--border-width) solid var(--color-border);
  }

  .p-pitch-list__item:first-child {
    padding-block-start: var(--space-0);
  }

  .p-pitch-list__item:last-child {
    padding-block-end: var(--space-0);
    border-block-end: 0;
  }

  .p-pitch-list__item .p-feature__icon {
    flex-shrink: 0;
    margin: var(--space-0);
  }

  .p-pitch-list__main {
    flex: 1;
    min-width: 0;
  }

  .p-pitch-list__main > p {
    margin: var(--space-0);
  }

  .p-pitch-list__title {
    font-weight: var(--weight-semibold);
  }

  /* How the money moves, one numbered step at a time. */
  .p-pitch-flow {
    display: grid;
    gap: var(--space-4);
    margin: var(--space-0);
    padding: var(--space-0);
    list-style: none;
  }

  .p-pitch-flow > li {
    display: flex;
    align-items: start;
    gap: var(--space-3);
  }

  .p-pitch-flow > li > .c-badge {
    flex-shrink: 0;
  }

  .p-pitch-flow p {
    margin: var(--space-0);
  }

  .p-pitch-flow__title {
    font-weight: var(--weight-semibold);
  }

  .p-pitch-cta {
    align-items: center;
    padding: var(--space-10) var(--space-6);
    border-radius: var(--radius-xl);
    background: var(--color-surface-subtle);
    text-align: center;
  }

  /* @pattern p-cta-band ------------------------------------------------------ */

  /* A closing prompt: a sentence or two and one action, side by side when there is room. */
  .p-cta-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4) var(--space-6);
  }

  .p-cta-band > * {
    margin: var(--space-0);
  }

  /* @pattern p-status -------------------------------------------------------- */

  /* Not found and error pages: what happened, what did not happen, where to go. */
  .p-status {
    display: grid;
    justify-items: center;
    gap: var(--space-4);
    max-width: var(--container-prose);
    margin-inline: auto;
    padding-block: var(--space-12);
    text-align: center;
  }

  .p-status > * {
    margin: var(--space-0);
  }

  .p-status__icon {
    display: grid;
    place-items: center;
    width: calc(var(--empty-icon-size) * 1.5);
    height: calc(var(--empty-icon-size) * 1.5);
    border-radius: var(--radius-round);
    background: var(--color-surface-muted);
    color: var(--color-text-secondary);
  }

  .p-status__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin-block-start: var(--space-2);
  }

  /* @pattern p-prose --------------------------------------------------------- */

  /* Long-form text whose markup we don't write (rendered Markdown, policy copy). */
  .p-prose {
    max-width: var(--measure);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
  }

  .p-prose > * {
    margin: var(--space-0);
  }

  .p-prose > * + * {
    margin-block-start: var(--space-5);
  }

  .p-prose h2 {
    margin-block-start: var(--space-12);
    font-size: var(--text-2xl);
  }

  .p-prose h3 {
    margin-block-start: var(--space-8);
    font-size: var(--text-xl);
  }

  .p-prose > h2:first-child,
  .p-prose > h3:first-child {
    margin-block-start: var(--space-0);
  }

  .p-prose h2 + *,
  .p-prose h3 + * {
    margin-block-start: var(--space-3);
  }

  /* Links inside running text are underlined: color alone doesn't mark them. */
  .p-prose a {
    text-decoration: underline;
  }

  .p-prose :not(pre) > code {
    overflow-wrap: anywhere;
  }

  .p-prose ul,
  .p-prose ol {
    padding-inline-start: var(--space-6);
  }

  .p-prose li + li {
    margin-block-start: var(--space-2);
  }

  .p-prose blockquote {
    padding-inline-start: var(--space-4);
    border-inline-start: var(--border-width-strong) solid var(--color-border-strong);
    color: var(--color-text-secondary);
  }

  .p-prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
  }

  .p-prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
  }

  .p-prose th,
  .p-prose td {
    padding: var(--space-2) var(--space-3);
    border-block-end: var(--border-width) solid var(--color-border);
    text-align: start;
  }

  .p-prose pre {
    overflow-x: auto;
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
  }

  .p-prose pre code {
    padding: var(--space-0);
    background: transparent;
  }

  /* @pattern p-article ------------------------------------------------------- */

  /* A playbook: header, then the body with an "On this page" rail from 64em. */
  .p-article {
    display: grid;
    gap: var(--space-8);
  }

  .p-article__header {
    display: grid;
    gap: var(--space-3);
    max-width: var(--container-prose);
  }

  .p-article__header > * {
    margin: var(--space-0);
  }

  .p-article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
  }

  .p-article__hero {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-xl);
  }

  .p-article__layout {
    display: grid;
    gap: var(--space-8);
  }

  .p-article__body {
    display: grid;
    align-content: start;
    gap: var(--space-12);
    min-width: 0;
  }

  .p-article__toc {
    align-self: start;
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--color-surface-subtle);
  }

  .p-article__toc-title {
    margin: var(--space-0) var(--space-0) var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-normal);
  }

  .p-article__toc-link {
    display: flex;
    align-items: center;
    min-height: var(--target-min);
    padding-block: var(--space-1);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
  }

  .p-article__toc-link:hover {
    color: var(--color-text);
  }

  .p-article__toc-item--l3 {
    padding-inline-start: var(--space-4);
  }

  @media (width >= 64em) {
    .p-article__layout {
      grid-template-columns: minmax(0, 1fr) 16rem;
      column-gap: var(--space-16);
    }

    .p-article__body {
      grid-row: 1;
      grid-column: 1;
    }

    .p-article__toc {
      position: sticky;
      top: calc(var(--header-height) + var(--space-6));
      grid-row: 1;
      grid-column: 2;
    }
  }

  /* @pattern p-article-list -------------------------------------------------- */

  /* Titles with a one-line summary, separated by hairlines (playbook groups). */
  .p-article-list {
    display: grid;
    border-block-start: var(--border-width) solid var(--color-border);
  }

  .p-article-list__item {
    position: relative;
    display: grid;
    gap: var(--space-1);
    padding-block: var(--space-4);
    border-block-end: var(--border-width) solid var(--color-border);
  }

  .p-article-list__item > * {
    margin: var(--space-0);
  }

  .p-article-list__title {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-normal);
  }

  /* The title link covers the row; the underline shows which row the pointer is on. */
  .p-article-list__item:hover .c-card__link {
    text-decoration: underline;
  }

  /* @pattern p-inline-search ------------------------------------------------- */

  .p-inline-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2);
    max-width: var(--container-form);
  }

  /* On a phone the button would squeeze the field until its prompt is cut off, so they stack. */
  @media (width < 40em) {
    .p-inline-search {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* @pattern p-breadcrumb ---------------------------------------------------- */

  .p-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
  }

  .p-breadcrumb__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
  }

  .p-breadcrumb__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--target-min);
  }

  .p-breadcrumb__separator {
    color: var(--color-text-tertiary);
  }

  /* @pattern p-workspace ---------------------------------------------------- */

  /* An event workspace overview: the next action beside the counts that matter. */
  .p-workspace-overview {
    display: grid;
    align-items: start;
    gap: var(--space-6);
  }

  @media (width >= 64em) {
    .p-workspace-overview {
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    }
  }

  /* @pattern p-editor ------------------------------------------------------- */

  /* Repeated groups inside one panel (house-rule requirements), separated by hairlines. */
  .p-requirement-list {
    display: grid;
  }

  .p-requirement {
    padding-block: var(--space-5);
    border-block-start: var(--border-width) solid var(--color-border);
  }

  .p-requirement:first-child {
    padding-block-start: var(--space-0);
    border-block-start: 0;
  }

  .p-requirement:last-child {
    padding-block-end: var(--space-0);
  }

  /* A long form's save action stays within reach at the bottom of the viewport. */
  .p-save-bar {
    position: sticky;
    bottom: var(--space-4);
    z-index: var(--z-sticky);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-6);
    padding: var(--space-4) var(--space-5);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
  }

  .p-save-bar > p {
    flex: 1 1 20rem;
    margin: var(--space-0);
  }

  /* @pattern p-auth ---------------------------------------------------------- */

  /* Single-task account screens (sign in): one card, one primary action. */
  .p-auth {
    display: grid;
    gap: var(--space-6);
    padding: var(--space-6) var(--space-4);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
  }

  .p-auth > * {
    margin: var(--space-0);
  }

  @media (width >= 40em) {
    .p-auth {
      padding: var(--space-10) var(--space-8);
    }
  }

  /* @pattern p-contact ------------------------------------------------------- */

  .p-contact {
    display: grid;
    align-items: start;
    gap: var(--space-8);
  }

  @media (width >= 64em) {
    .p-contact {
      grid-template-columns: minmax(0, 1fr) 20rem;
      gap: var(--space-12);
    }
  }

  /* Leaflet sets its own font stack on maps; attribution and popups use the product's type. */
  .leaflet-container {
    font-family: var(--font-sans);
  }

  /* @pattern p-map-layout --------------------------------------------------- */

  .p-map-layout {
    display: grid;
    align-items: start;
    gap: var(--space-6);
  }

  /* The sticky, sized frame. Leaflet takes over __canvas and forces its own
     position: relative inline, clobbering position: sticky if it's applied
     there directly — so the frame that stays in view has to be its parent. */
  .p-map-layout__map {
    height: 60vh;
    min-height: 22rem;
    overflow: hidden;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-muted);
    color: var(--color-text-secondary);
  }

  .p-map-layout__canvas {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
  }

  .p-map-layout__list {
    display: grid;
    align-content: start;
    gap: var(--space-6);
    margin: var(--space-0);
    padding: var(--space-0);
    list-style: none;
  }

  @media (width >= 64em) {
    .p-map-layout {
      grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    }

    .p-map-layout__map {
      order: 2;
      position: sticky;
      top: calc(var(--header-height) + var(--space-6));
    }
  }

/* Editorial reading surfaces. All dimensions and colors come from tokens. */
  .p-breadcrumbs { margin-block-end: var(--space-5); font-size: var(--text-sm); color: var(--color-text-secondary); }
  .p-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
  .p-breadcrumbs li { display: flex; align-items: center; gap: var(--space-2); min-width: 0; overflow-wrap: anywhere; }
  .p-breadcrumbs li + li::before { content: "/"; }
  .p-breadcrumbs a { display: inline-flex; align-items: center; min-height: var(--control-sm); }
  /* The current page repeats the h1 below, so it truncates rather than wrapping under its separator. */
  .p-breadcrumbs li:last-child { max-width: 100%; }
  .p-breadcrumbs [aria-current="page"] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .p-guide-progress { padding-block: var(--space-3); border-block-end: var(--border-width) solid var(--color-border); margin-block-end: var(--space-3); }
  .p-guide-progress progress { width: 100%; height: var(--space-3); accent-color: var(--color-accent); }
  .p-guide-checklist .p-guide-progress label { padding-block: 0; }
  .p-reader-print-source { display: none; overflow-wrap: anywhere; }
  .p-workbench-help { padding: var(--space-5); border-block-start: var(--border-width) solid var(--color-border); }
  @media print {
    body:has([data-guide]) .p-app-header, body:has([data-guide]) .p-app-footer, body:has([data-guide]) .p-sandbox-banner,
    [data-guide] .p-breadcrumbs, [data-guide] .p-reader__toc, [data-guide] .p-reader__visual,
    [data-guide] .p-reader__related, [data-guide] .p-reader__cta, [data-guide] .p-reader__header .c-button { display: none; }
    [data-guide] .p-reader__opening, [data-guide] .p-reader__layout { display: block; }
    [data-guide] .p-reader__body { max-width: none; }
    [data-guide] .p-reader__faq details::details-content { content-visibility: visible; }
    [data-guide] .p-reader-print-source { display: block; border-block-start: var(--reader-border); margin-block-start: var(--space-6); padding-block-start: var(--space-4); }
    [data-guide] h2, [data-guide] h3, [data-guide] summary { break-after: avoid; }
    [data-guide] .p-guide-checklist label { break-inside: avoid; }
  }
.p-reader { margin-inline: auto; max-width: var(--reader-page); }
.p-reader__opening { display: grid; align-items: center; gap: var(--reader-space-lg); padding-block-end: var(--reader-space-xl); border-block-end: var(--reader-border); }
.p-reader__header > * { margin: var(--reader-zero); }
.p-reader__header > * + * { margin-block-start: var(--reader-space-md); }
.p-reader__header h1 { font-size: var(--reader-title); line-height: var(--reader-tight); letter-spacing: var(--reader-tracking); text-wrap: balance; }
.p-reader__eyebrow { font-family: var(--reader-sans); font-size: var(--reader-small); font-weight: var(--reader-bold); color: var(--reader-muted); }
.p-reader__lead { font-size: var(--reader-lead); line-height: var(--reader-relaxed); color: var(--reader-muted); }
.p-reader__meta { display: flex; flex-wrap: wrap; gap: var(--reader-space-sm); font-size: var(--reader-small); color: var(--reader-muted); }
.p-reader__visual { min-width: 0; margin: var(--reader-zero); }
.p-reader__hero { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--reader-radius); }
.p-reader__visual figcaption { margin-block-start: var(--reader-space-sm); font-size: var(--reader-small); line-height: var(--reader-normal); color: var(--reader-muted); }
.p-reader__layout { display: grid; gap: var(--reader-space-xl); margin-block-start: var(--reader-space-xl); }
.p-reader__toc { align-self: start; padding: var(--reader-space-md); border: var(--reader-border); border-radius: var(--reader-radius); background: var(--reader-surface); }
.p-reader__toc h2 { font-size: var(--reader-small); margin: var(--reader-zero) var(--reader-zero) var(--reader-space-sm); }
.p-reader__toc ol { list-style: none; padding: var(--reader-zero); margin: var(--reader-zero); }
.p-reader__toc li { margin: var(--reader-zero); }
.p-reader__toc a { display: block; padding-block: var(--reader-space-sm); font-size: var(--reader-small); line-height: var(--reader-normal); text-decoration: none; color: var(--reader-muted); }
.p-reader__toc a:hover { color: var(--reader-link); text-decoration: underline; }
.p-reader__toc-sub { padding-inline-start: var(--reader-space-md); }
.p-reader__all { margin-block-start: var(--reader-space-md); border-block-start: var(--reader-border); }
.p-reader__body { min-width: 0; max-width: var(--reader-measure); }
.p-reader__prose { font-family: var(--reader-sans); font-size: var(--reader-body); line-height: var(--reader-relaxed); color: var(--reader-text); overflow-wrap: anywhere; }
.p-reader__prose > * { margin: var(--reader-zero); }
.p-reader__prose > * + * { margin-block-start: var(--reader-space-md); }
.p-reader__prose > p:first-child { font-size: var(--reader-lead); }
.p-reader__prose h2, .p-reader__prose h3 { font-family: var(--reader-sans); line-height: var(--reader-tight); text-wrap: balance; scroll-margin-block-start: var(--reader-anchor-offset); }
.p-reader__prose h2 { margin-block-start: var(--reader-space-xl); padding-block-start: var(--reader-space-lg); border-block-start: var(--reader-border); font-size: var(--reader-heading); }
.p-reader__prose h3 { font-size: var(--reader-lead); margin-block-start: var(--reader-space-lg); }
.p-reader__prose h2 + *, .p-reader__prose h3 + * { margin-block-start: var(--reader-space-md); }
.p-reader__prose a:not(.c-button) { color: var(--reader-link); text-decoration: underline; text-underline-offset: var(--reader-underline); }
.p-reader__prose ul, .p-reader__prose ol { padding-inline-start: var(--reader-space-lg); }
.p-reader__prose li + li { margin-block-start: var(--reader-space-sm); }
.p-reader__table-scroll { overflow-x: auto; border: var(--reader-border); border-radius: var(--reader-radius-sm); }
.p-reader__prose table { width: 100%; border-collapse: collapse; font-family: var(--reader-sans); font-size: var(--reader-table); line-height: var(--reader-relaxed); }
/* Prose breaks anywhere so a long URL can't widen the page; table cells opt out so they size to their longest word and the wrapper scrolls instead. */
.p-reader__prose th, .p-reader__prose td { padding: var(--reader-space-md); text-align: start; vertical-align: top; border-block-end: var(--reader-border); min-width: var(--reader-cell); overflow-wrap: normal; }
.p-reader__prose th { background: var(--reader-surface); font-weight: var(--reader-bold); }
.p-reader__prose tr:nth-child(even) td { background: var(--reader-surface); }
.p-reader__prose tr:last-child td { border-block-end: none; }
/* A wide table (five columns or more) also stacks: below tablet each row becomes a labelled block (c-table--stack, data-label) instead of a 900px scroll. The scroll region stays as the fallback. */
@media (width < 48em) {
  .p-reader__prose .c-table--stack tbody tr:nth-child(even) { background: var(--reader-surface); }
  .p-reader__prose .c-table--stack td { min-width: var(--reader-zero); padding: var(--reader-zero); border-block-end: none; background: none; overflow-wrap: anywhere; }
  .p-reader__prose .c-table--stack tr:nth-child(even) td { background: none; }
}
.p-reader__prose blockquote { padding: var(--reader-space-md) var(--reader-space-lg); border-inline-start: var(--reader-accent-border); background: var(--reader-surface); }
.p-reader__prose blockquote p { margin: var(--reader-zero); }
.p-reader__faq { margin-block-start: var(--reader-space-xl); padding-block-start: var(--reader-space-lg); border-block-start: var(--reader-border); }
.p-reader__faq h2, .p-reader__cta h2, .p-reader__related h2 { font-size: var(--reader-heading); line-height: var(--reader-tight); }
.p-reader__faq details { border-block-end: var(--reader-border); }
.p-reader__faq summary { padding-block: var(--reader-space-md); font-size: var(--reader-table); font-weight: var(--reader-bold); cursor: pointer; }
.p-reader__faq details p { margin: var(--reader-zero); padding-block-end: var(--reader-space-md); font-size: var(--reader-table); line-height: var(--reader-relaxed); color: var(--reader-muted); }
.p-reader__cta { margin-block-start: var(--reader-space-xl); padding: var(--reader-space-lg); border: var(--reader-border); border-radius: var(--reader-radius); background: var(--reader-surface); }
.p-reader__cta > * { margin: var(--reader-zero); }
.p-reader__cta > * + * { margin-block-start: var(--reader-space-md); }
.p-reader__cta > p { line-height: var(--reader-relaxed); }
.p-reader__related { margin-block-start: var(--reader-space-xl); padding-block-start: var(--reader-space-xl); border-block-start: var(--reader-border); }
.p-reader__cards { list-style: none; padding: var(--reader-zero); display: grid; gap: var(--reader-space-lg); }
.p-reader__card { min-width: 0; overflow: hidden; border: var(--reader-border); border-radius: var(--reader-radius); }
.p-reader__card img, .p-reader__thumbnail { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.p-reader__card > div { padding: var(--reader-space-md); }
.p-reader__card h3 { font-size: var(--reader-lead); line-height: var(--reader-tight); }
.p-reader__card h3 a { display: block; }
.p-reader__card p:last-child { font-size: var(--reader-table); line-height: var(--reader-relaxed); color: var(--reader-muted); }
.p-reader__thumbnail { border-radius: var(--reader-radius-sm); margin-block-end: var(--reader-space-md); }
.p-venue-guide__nav { display: flex; flex-wrap: wrap; gap: var(--reader-space-sm); margin-block-start: var(--reader-space-lg); }
.p-venue-guide__nav a { display: inline-flex; align-items: center; padding: var(--reader-space-sm) var(--reader-space-md); border: var(--reader-border); border-radius: var(--reader-radius-sm); font-size: var(--reader-table); line-height: var(--reader-relaxed); }
@media (width >= 48em) {
  .p-reader__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .p-venue-guide__topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (width >= 64em) {
  .p-reader__opening { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--reader-space-xl); }
  .p-reader__layout { grid-template-columns: var(--reader-rail) minmax(0, 1fr); gap: var(--reader-space-xl); }
  .p-reader__toc { position: sticky; top: var(--reader-anchor-offset); max-height: var(--reader-toc-height); overflow-y: auto; }
  .p-reader__body { grid-column: 2; }
  .p-venue-guide__topics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

  /* Guide discovery, audience paths, and practical reader tools. */
  .p-guide-search { padding: var(--space-5); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-subtle); }
  .p-guide-filters, .p-guide-audiences, .p-guide-collections, .p-guide-featured { display: grid; gap: var(--space-5); }
  .p-guide-audiences .c-card__body { height: 100%; }
  .p-guide-audiences .c-cluster { margin-block-start: auto; }
  .p-guide-collections a { display: grid; gap: var(--space-2); padding: var(--space-5); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); color: var(--color-text); }
  .p-guide-collections span { color: var(--color-text-secondary); }
  .p-guide-featured { list-style: none; margin: var(--space-0); padding: var(--space-0); }
  .p-guide-pagination { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .p-guide-pagination [aria-current="page"] { background: var(--color-accent); color: var(--color-text-on-accent); }
  .p-guide-summary, .p-guide-checklist { padding: var(--space-5); margin-block-end: var(--space-8); border: var(--border-width) solid var(--color-accent-subtle-border); border-radius: var(--radius-lg); background: var(--color-accent-subtle); }
  .p-guide-summary h2, .p-guide-checklist h2 { font-size: var(--reader-lead); margin-block: var(--space-0) var(--space-3); }
  .p-guide-summary li + li { margin-block-start: var(--space-3); }
  .p-guide-checklist { margin-block-start: var(--space-8); }
  .p-guide-checklist > label { display: flex; align-items: flex-start; gap: var(--space-3); padding-block: var(--space-3); cursor: pointer; }
  .p-guide-checklist > label input { margin-block-start: var(--space-1); flex-shrink: 0; }
  .p-guide-checklist [data-guide-check]:checked + span { text-decoration: line-through; }
  .p-reader__toc summary { cursor: pointer; font-weight: var(--weight-semibold); padding-block: var(--space-3); }
  .p-reader__toc a[aria-current="location"] { color: var(--color-accent-text); font-weight: var(--weight-semibold); text-decoration: underline; }
  @media (width >= 48em) {
    .p-guide-audiences { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .p-guide-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .p-guide-featured, .p-guide-collections { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (width >= 64em) { .p-guide-filters { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  /* Guided venue comparison. */
  .p-space-picker, .p-shortlist-notice { padding: var(--space-4); border: var(--border-width) solid var(--color-accent-subtle-border); border-radius: var(--radius-lg); background: var(--color-accent-subtle); }
  .p-space-picker__results { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--reader-rail), 100%), 1fr)); gap: var(--space-4); }
  .p-space-picker__card { min-width: 0; padding: var(--space-3); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); overflow-wrap: anywhere; }
  .p-space-picker__card > img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-lg); }
  .p-space-picker__card > button { margin-block-start: auto; }
  .p-listing-reference { padding: var(--space-3); border-inline-start: var(--border-width) solid var(--color-accent); background: var(--color-surface-subtle); overflow-wrap: anywhere; }
  .p-workbench-layout { display: grid; gap: var(--space-6); align-items: start; }
  .p-workbench-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
  .p-workbench-steps button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-text-secondary); font: inherit; font-size: var(--text-sm); cursor: pointer; }
  .p-workbench-steps button[aria-current] { border-color: var(--color-accent); color: var(--color-accent-text); background: var(--color-accent-subtle); font-weight: var(--weight-semibold); }
  .p-workbench-steps button span, .p-shortlist-number { display: inline-grid; place-items: center; min-width: var(--control-sm); min-height: var(--control-sm); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-full); font-weight: var(--weight-semibold); }
  .p-workbench-steps button[aria-current] span { color: var(--color-text-on-accent); background: var(--color-accent); border-color: var(--color-accent); }
  .p-workbench-stage { padding: var(--space-5); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); min-width: 0; }
  .p-workbench-stage h2:focus { outline: none; }
  .p-workbench-fields { display: grid; gap: var(--space-4); }
  .p-workbench-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-block-start: var(--space-4); border-block-start: var(--border-width) solid var(--color-border); }
  .p-workbench-details > summary { cursor: pointer; padding-block: var(--space-3); font-weight: var(--weight-semibold); font-size: var(--text-sm); }
  .p-workbench-details > div { padding-block: var(--space-4); }
  .p-shortlist-card { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); }
  .p-shortlist-card > summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-4); cursor: pointer; font-weight: var(--weight-semibold); }
  .p-shortlist-card > summary::after { content: "+"; margin-inline-start: auto; }
  .p-shortlist-card[open] > summary::after { content: "−"; }
  .p-shortlist-card > summary .c-caption { font-weight: var(--weight-regular); color: var(--color-text-secondary); }
  .p-shortlist-card > div { padding: var(--space-4); border-block-start: var(--border-width) solid var(--color-border); }
  .p-workbench-brief { padding: var(--space-5); border-radius: var(--radius-xl); background: var(--color-surface-subtle); border: var(--border-width) solid var(--color-border); }
  .p-workbench-facts { display: grid; gap: var(--space-1); margin: 0; }
  .p-workbench-facts dt { font-size: var(--text-sm); color: var(--color-text-secondary); }
  .p-workbench-facts dd { margin: 0 0 var(--space-3); font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
  .p-comparison-results { display: grid; gap: var(--space-4); }
  .p-venue-result { padding: var(--space-4); border: var(--border-width) solid var(--color-accent-subtle-border); border-radius: var(--radius-lg); background: var(--color-accent-subtle); min-width: 0; overflow-wrap: anywhere; }
  .p-venue-result > button { margin-block-start: auto; }
  .p-venue-result ul { padding-inline-start: var(--space-5); font-size: var(--text-sm); }
  .p-venue-result li + li { margin-block-start: var(--space-3); }
  .p-venue-note { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--text-sm); }
  .p-workbench-inquiry { border-block-start: var(--border-width) solid var(--color-border); padding-block-start: var(--space-6); }
  .p-inquiry-preview { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: var(--text-sm); line-height: var(--leading-relaxed); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-surface-subtle); }
  .p-comparison-report { display: none; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
  @media (width >= 48em) {
    .p-workbench-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .p-workbench-steps button { flex-direction: row; justify-content: flex-start; padding: var(--space-4); }
    .p-comparison-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (width >= 64em) {
    .p-workbench-layout { grid-template-columns: minmax(0, 1fr) var(--reader-rail); }
    .p-comparison-results { grid-template-columns: repeat(auto-fit, minmax(min(var(--reader-rail), 100%), 1fr)); }
    .p-workbench-brief { position: sticky; top: var(--reader-anchor-offset); }
    .p-workbench-stage { padding: var(--space-6); }
  }
  @media print {
    body:has([data-comparison]) .p-app-header, body:has([data-comparison]) .p-app-footer,
    [data-comparison][data-enhanced] > :not([data-print-report]) { display: none; }
    [data-comparison][data-enhanced] .p-comparison-report { display: block; }
  }

  /* A landscape phone or a 400% zoom leaves a few hundred pixels of height. Sticky chrome (the
     header, the booking bar, the save bar) would cover most of it, so it scrolls with the page. */
  @media (height <= 30em) {
    .p-app-header,
    .p-action-bar,
    .p-save-bar {
      position: static;
    }
  }
}