/* Paint Pairs theme (psg-c1d, polished in psg-c1d-fix1). Loaded after the core stylesheet
 * through the adapter's chrome hook. Every brand value is a token below: change a color here
 * and it changes everywhere. Light theme only, on purpose: paint has to be judged against a
 * neutral light background, so there is no dark mode.
 * Text contrast (WCAG): ink on primer 15.5, graphite on primer 6.08, teal on primer 7.50,
 * white on teal 7.83, verified on card 6.39. Clay measures 4.29 on white, so it is used
 * for marks only, never for text.
 * One content width (fix1, A): every block in main, the header and the footer line up on
 * both edges: 880 px on a wide screen, the screen minus a 16 px gutter each side below 912 px.
 * Every selector starts with "html": the build inlines the core stylesheet after this
 * file, so a rule here with equal specificity would lose to the core's. */
html:root {
  --pp-primer: #FBFAF7;      /* page background, warm white like primer */
  --pp-card: #FFFFFF;        /* cards, tables, the room frame */
  --pp-ink: #1E2124;         /* body text, headings and links */
  --pp-graphite: #5A6068;    /* secondary text, captions, table labels */
  --pp-hairline: #E6E2DB;    /* borders and dividers */
  --pp-teal: #0F5B5F;        /* link hover, buttons, focus ring, the selected switch */
  --pp-teal-dark: #0B4447;   /* hover and pressed */
  --pp-clay: #B5653F;        /* logo chip and small marks only */
  --pp-verified: #2F6B3A;    /* the verified badge */

  --pp-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --pp-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pp-radius: 10px;
  --pp-content: 880px;       /* the one content width */
  --pp-gutter: 16px;
  --pp-tap: 44px;            /* minimum tap height for cards and buttons */

  /* the core stylesheet's own variables, mapped onto the tokens */
  --accent: var(--pp-teal);
  --ink: var(--pp-ink);
  --muted: var(--pp-graphite);
  --line: var(--pp-hairline);
  --bg: var(--pp-primer);
  --soft: var(--pp-primer);
}

html { font-family: var(--pp-sans); background: var(--pp-primer); color: var(--pp-ink); line-height: 1.6; -webkit-text-size-adjust: 100%; }
html body { overflow-x: clip; }
/* links: ink with a quiet underline, teal on hover */
html a { color: var(--pp-ink); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(30, 33, 36, .35); text-underline-offset: 3px; }
html a:hover { color: var(--pp-teal); text-decoration-color: var(--pp-teal); }
html a:focus-visible, html button:focus-visible, html input:focus-visible, html summary:focus-visible { outline: 3px solid var(--pp-teal); outline-offset: 2px; border-radius: 3px; }
html h1, html h2, html h3 { font-family: var(--pp-serif); font-weight: 600; color: var(--pp-ink); letter-spacing: -0.005em; }
html h1 { font-size: 2.15rem; line-height: 1.18; margin: .75rem 0 1.25rem; overflow-wrap: anywhere; }
html h2 { font-size: 1.45rem; line-height: 1.25; margin: 0 0 .6rem; }
html h3 { font-size: 1.15rem; }
html .wrap { max-width: calc(var(--pp-content) + 2 * var(--pp-gutter)); padding: 0 var(--pp-gutter); }
.pp-vh, html .pp-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0; }

/* ---- header: logo, search, nav ---- */
html .site-header { background: var(--pp-card); border-bottom: 1px solid var(--pp-hairline); position: relative; z-index: 20; }
html .header-inner { padding-top: .7rem; padding-bottom: .7rem; gap: .5rem 1.25rem; flex-wrap: nowrap; }
html .site-name { display: inline-flex; align-items: center; gap: .55rem; color: var(--pp-ink); text-decoration: none; flex: none; }
html .site-name svg { display: block; width: 40px; height: 32px; flex: none; }
html .pp-wordmark { font-family: var(--pp-serif); font-size: 1.4rem; font-weight: 600; letter-spacing: -0.01em; color: var(--pp-ink); white-space: nowrap; }
html .site-nav { gap: .25rem 1.25rem; order: 2; flex: none; flex-wrap: nowrap; }
html .site-nav a { color: var(--pp-ink); font-size: .98rem; padding: .25rem 0; border-bottom: 2px solid transparent; text-decoration: none; }
html .site-nav a:hover { color: var(--pp-teal); border-bottom-color: var(--pp-teal); text-decoration: none; }
html .pp-search { order: 1; flex: 1 1 auto; min-width: 0; max-width: 380px; margin-left: auto; position: relative; }
html .pp-search-toggle { display: none; }
html .pp-search-form { position: relative; margin: 0; display: flex; align-items: center; }
html .pp-search-input { flex: 1; min-width: 0; width: 100%; font: inherit; font-size: .93rem; color: var(--pp-ink); background: var(--pp-primer); border: 1px solid #8C8F93; border-radius: 999px; padding: .55rem 3.1rem .55rem 1rem; min-height: 2.75rem; }
html .pp-search-input::placeholder { color: var(--pp-graphite); opacity: 1; }
html .pp-search-input:focus { outline: 3px solid var(--pp-teal); outline-offset: 1px; background-color: var(--pp-card); }
html .pp-search-input::-webkit-search-cancel-button { cursor: pointer; }
/* suggestions */
html .pp-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--pp-card); border: 1px solid var(--pp-hairline); border-radius: var(--pp-radius); box-shadow: 0 10px 30px rgba(30, 33, 36, .14); padding: .35rem; z-index: 30; min-width: 300px; }
html .pp-suggest[hidden] { display: none; }
html .pp-suggest-note { margin: .3rem .55rem .35rem; font-size: .82rem; font-weight: 600; color: var(--pp-graphite); }
html .pp-suggest ul { list-style: none; margin: 0; padding: 0; }
html .pp-opt { display: flex; align-items: center; gap: .65rem; padding: .45rem .55rem; border-radius: 7px; cursor: pointer; min-height: var(--pp-tap); }
html .pp-opt[aria-selected="true"], html .pp-opt:hover { background: color-mix(in srgb, var(--pp-teal) 9%, var(--pp-card)); }
html .pp-opt-chip { width: 1.9rem; height: 1.9rem; border-radius: 6px; border: 1px solid rgba(30, 33, 36, .15); flex: none; }
html .pp-opt-text { display: grid; min-width: 0; line-height: 1.3; }
html .pp-opt-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html .pp-opt-meta { font-size: .82rem; color: var(--pp-graphite); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html .pp-opt-all { color: var(--pp-teal); font-weight: 600; justify-content: center; border-top: 1px solid var(--pp-hairline); border-radius: 0 0 7px 7px; margin-top: .25rem; }
html .pp-suggest-empty { margin: .5rem .55rem; color: var(--pp-graphite); font-size: .9rem; }

/* ---- footer ---- */
html .site-footer { background: var(--pp-primer); border-top: 1px solid var(--pp-hairline); color: var(--pp-graphite); padding: 1.5rem 0 2.5rem; margin-top: 2rem; }
html .site-footer p { margin: .3rem 0; }
html .site-footer a { color: var(--pp-graphite); }
html .site-footer a:hover { color: var(--pp-teal); }
html .footer-nav a { color: var(--pp-ink); }

/* ---- layout: one width for every block ---- */
html .layout { padding-top: .5rem; padding-bottom: 2.5rem; }
html .content { max-width: none; }
html .content > *, html .entity > *, html .pair > *, html .static-page > *, html .utility-page > * { max-width: none; }
html .breadcrumbs ol { font-size: .88rem; margin-top: .6rem; }
html .breadcrumbs a { color: var(--pp-graphite); }
html .breadcrumbs li + li::before { color: var(--pp-graphite); }
html .block { margin: 2.25rem 0; }
html .block > h2 { scroll-margin-top: 1rem; }
html .intro { color: var(--pp-graphite); font-size: 1.06rem; }
/* the one-sentence summary */
html .verdict { font-family: var(--pp-serif); font-size: 1.2rem; font-weight: 400; line-height: 1.5; background: none; border: 0; padding: 0; margin: 1.5rem 0 1rem; color: var(--pp-ink); }
/* tables: clean hairlines */
html .data-table { border-collapse: collapse; background: var(--pp-card); font-variant-numeric: tabular-nums; font-size: .97rem; }
html .data-table th, html .data-table td { border: 0; border-bottom: 1px solid var(--pp-hairline); padding: .55rem .75rem; }
html .data-table thead th { background: var(--pp-card); color: var(--pp-graphite); font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--pp-ink); }
html .data-table tbody th { background: var(--pp-card); color: var(--pp-graphite); font-weight: 500; }
html .data-table caption { font-family: var(--pp-serif); }
html .table-wrap { border: 1px solid var(--pp-hairline); border-radius: var(--pp-radius); overflow-x: auto; background: var(--pp-card); }
html .table-wrap .data-table tr:last-child th, html .table-wrap .data-table tr:last-child td { border-bottom: 0; }
/* hubs and listings (index pages keep their layout; fix2 restyles them) */
html .card a { background: var(--pp-card); border: 1px solid var(--pp-hairline); border-radius: var(--pp-radius); padding: .6rem; text-decoration: none; }
html .card a:hover { border-color: var(--pp-teal); }
html .card .render-art { border-radius: 6px; border: 1px solid var(--pp-hairline); }
html .card-name { color: var(--pp-ink); font-weight: 600; margin-top: .35rem; }
html .card-summary { color: var(--pp-graphite); font-variant-numeric: tabular-nums; }
html .card-grid { gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
html .pair-list li { border-bottom-color: var(--pp-hairline); }
html .pair-verdict { color: var(--pp-graphite); }
html .render-art { border-color: var(--pp-hairline); border-radius: var(--pp-radius); }
html .render figcaption { color: var(--pp-graphite); }
html .faq dt { font-weight: 600; }
html .faq dd { color: var(--pp-ink); }
html .author-block { border-top-color: var(--pp-hairline); color: var(--pp-graphite); font-size: .95rem; }
html .sourcing { color: var(--pp-graphite); }
html .note { color: var(--pp-graphite); }
html .tool { border: 1px solid var(--pp-hairline); border-radius: var(--pp-radius); background: var(--pp-card); padding: 1.25rem; }
html .ai-disclosure { color: var(--pp-graphite); }
/* ---- small swatches: always on a card or primer background, hex and LRV beside or under ---- */
html .pp-chip-sm { display: inline-block; width: 1.25rem; height: 1.25rem; border-radius: 4px; border: 1px solid rgba(30, 33, 36, .18); vertical-align: -0.25rem; flex: none; }
html .pp-meta { color: var(--pp-graphite); font-size: .88rem; font-variant-numeric: tabular-nums; }
html .pp-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 600; color: var(--pp-card); background: var(--pp-verified); border-radius: 999px; padding: .12rem .6rem; white-space: nowrap; }
html .pp-badge svg { width: .8rem; height: .8rem; }
html .pp-est { font-size: .85rem; color: var(--pp-graphite); }
html .pp-note { color: var(--pp-graphite); font-size: .92rem; }

/* ---- swatch cards (fix1, B): every list of colors or comparisons ---- */
html .pp-cards { list-style: none; padding: 0; margin: .75rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .75rem; }
html .pp-cards > li { min-width: 0; }
html .pp-card { display: flex; flex-direction: column; gap: .12rem; height: 100%; min-height: var(--pp-tap); text-decoration: none; color: var(--pp-ink); background: var(--pp-card); border: 1px solid var(--pp-hairline); border-radius: var(--pp-radius); padding: .55rem .6rem .6rem; transition: border-color .15s, box-shadow .15s; }
html .pp-card:hover { border-color: var(--pp-teal); color: var(--pp-ink); box-shadow: 0 4px 14px rgba(30, 33, 36, .08); }
html .pp-card:focus-visible { outline-offset: 2px; }
html .pp-card-chip { display: block; aspect-ratio: 5 / 2; border-radius: 6px; border: 1px solid rgba(30, 33, 36, .12); margin-bottom: .4rem; }
html .pp-card-chips { display: flex; aspect-ratio: 5 / 2; border-radius: 6px; overflow: hidden; border: 1px solid rgba(30, 33, 36, .12); margin-bottom: .4rem; }
html .pp-card-chips span { flex: 1; }
html .pp-card-chips span + span { border-left: 2px solid var(--pp-card); }
html .pp-card-name { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
html .pp-card:hover .pp-card-name { text-decoration: underline; text-decoration-color: var(--pp-teal); text-underline-offset: 3px; }
html .pp-card-meta { color: var(--pp-graphite); font-size: .84rem; line-height: 1.35; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
html .pp-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html .pp-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html .pp-cards-2 .pp-card-chip { aspect-ratio: 4 / 1; }
/* compact cards: chip at the side (More comparisons with ...) */
html .pp-cards-1 { grid-template-columns: 1fr; gap: .5rem; margin-top: .4rem; }
html .pp-cards-1 .pp-card { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); column-gap: .7rem; align-items: center; padding: .45rem .55rem; }
html .pp-cards-1 .pp-card-chips { grid-column: 1; grid-row: 1 / span 3; margin: 0; aspect-ratio: auto; height: 2.4rem; align-self: center; }
html .pp-cards-1 .pp-card-name, html .pp-cards-1 .pp-card-meta { grid-column: 2; }
/* hub chips under the summary line */
html .pp-hubs, html .pp-hub-row { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; }
html .pp-hub-row { margin: .5rem 0 .25rem; }
html .pp-hub { display: inline-flex; align-items: center; min-height: var(--pp-tap); padding: .3rem 1rem; border: 1px solid var(--pp-hairline); border-radius: 999px; background: var(--pp-card); color: var(--pp-ink); text-decoration: none; font-size: .93rem; }
html .pp-hub:hover { border-color: var(--pp-teal); color: var(--pp-teal); }
/* lighter and darker */
html .pp-ladder-head { font-family: var(--pp-sans); font-size: .86rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--pp-graphite); margin: 1rem 0 0; }
/* see each color (comparison pages) */
html .pp-each-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
html .pp-each-col { min-width: 0; }
html .pp-card-wide { height: auto; }
html .pp-card-wide .pp-card-chip { aspect-ratio: 4 / 1; }
html .pp-more-head { font-family: var(--pp-sans); font-size: .86rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--pp-graphite); margin: .9rem 0 0; }

/* ---- the room hero ---- */
html .hero { margin: 0 0 1.25rem; }
html .pp-rooms { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
html .pp-room { margin: 0; min-width: 0; }
html .pp-room-frame { position: relative; aspect-ratio: 800 / 533; border-radius: var(--pp-radius); overflow: hidden; background: var(--pp-card); box-shadow: 0 1px 2px rgba(30, 33, 36, .06), 0 8px 24px rgba(30, 33, 36, .08); }
html .pp-room-frame img, html .pp-room-frame canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
html .pp-room-frame canvas { position: absolute; inset: 0; }
html .pp-room-frame canvas[hidden], html .pp-room-frame img[hidden] { display: none; }
html .pp-room-label { display: grid; gap: .1rem; margin-top: .55rem; min-width: 0; }
html .pp-room-line { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .45rem; min-width: 0; }
html .pp-room-name { font-family: var(--pp-serif); font-size: 1.12rem; font-weight: 600; color: var(--pp-ink); text-decoration: none; }
html a.pp-room-name:hover { text-decoration: underline; color: var(--pp-teal); }
html .pp-code { color: var(--pp-graphite); }

html .pp-color-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1rem; align-items: stretch; }
html .pp-bigchip { margin: 0; display: flex; flex-direction: column; background: var(--pp-card); border: 1px solid var(--pp-hairline); border-radius: var(--pp-radius); padding: .75rem; min-width: 0; }
html .pp-chip-lg { flex: 1; min-height: 9rem; border-radius: 6px; border: 1px solid rgba(30, 33, 36, .12); }
html .pp-bigchip figcaption { margin-top: .7rem; display: grid; gap: .25rem; }
html .pp-bigchip .pp-chip-name { font-family: var(--pp-serif); font-size: 1.15rem; font-weight: 600; }
html .pp-bigchip .pp-chip-data { font-variant-numeric: tabular-nums; color: var(--pp-ink); }
html .pp-aka { font-size: .9rem; color: var(--pp-graphite); }

html .pp-switches { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; margin: .9rem 0 .4rem; }
html:not(.pp-js) .pp-switches { display: none; }
html .pp-switch { display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
html .pp-switch-label { font-size: .85rem; font-weight: 600; color: var(--pp-graphite); text-transform: uppercase; letter-spacing: .05em; }
html .pp-seg { display: inline-flex; border: 1px solid var(--pp-teal); border-radius: 999px; overflow: hidden; background: var(--pp-card); }
html .pp-seg button { font: inherit; font-size: .93rem; border: 0; background: transparent; color: var(--pp-teal); padding: .42rem .95rem; cursor: pointer; min-height: 2.5rem; }
html .pp-seg button + button { border-left: 1px solid var(--pp-teal); }
html .pp-seg button:hover { background: color-mix(in srgb, var(--pp-teal) 9%, var(--pp-card)); color: var(--pp-teal-dark); }
html .pp-seg button[aria-pressed="true"] { background: var(--pp-teal); color: var(--pp-card); }
html .pp-seg button[aria-pressed="true"]:hover { background: var(--pp-teal-dark); }
html .pp-seg button:focus-visible { outline-offset: -3px; outline-color: var(--pp-ink); }
html .pp-caption { color: var(--pp-graphite); font-size: .9rem; margin: .55rem 0 0; }
html .pp-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html .pp-try-row { margin: .6rem 0 0; }
html .pp-try { display: inline-flex; align-items: center; gap: .5rem; min-height: var(--pp-tap); padding: .45rem 1.1rem; border-radius: 999px; background: var(--pp-card); border: 1px solid var(--pp-teal); color: var(--pp-teal); font-weight: 600; text-decoration: none; }
html .pp-try:hover { background: var(--pp-teal); color: var(--pp-card); text-decoration: none; }
html .pp-anchor { display: block; position: relative; top: -1rem; }

/* ---- Quick decision ---- */
html .lead { margin: 1.25rem 0 0; }
html .pp-quick { background: var(--pp-card); border: 1px solid var(--pp-hairline); border-radius: var(--pp-radius); padding: 1.1rem 1.25rem .6rem; }
html .pp-quick h2 { font-size: 1.2rem; margin: 0 0 .4rem; }
html .pp-quick dl { margin: 0; }
html .pp-quick dl > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .25rem 1rem; padding: .55rem 0; border-top: 1px solid var(--pp-hairline); }
html .pp-quick dt { font-weight: 600; color: var(--pp-graphite); font-size: .93rem; }
html .pp-quick dd { margin: 0; }
html .pp-quick .pp-chip-sm { margin-right: .3rem; }
/* ---- coordinating colors ---- */
html .pp-coord { list-style: none; padding: 0; margin: .75rem 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
html .pp-coord a { display: grid; align-content: start; gap: .15rem; height: 100%; min-height: var(--pp-tap); text-decoration: none; color: var(--pp-ink); background: var(--pp-card); border: 1px solid var(--pp-hairline); border-radius: var(--pp-radius); padding: .6rem; transition: border-color .15s, box-shadow .15s; }
html .pp-coord a:hover { border-color: var(--pp-teal); box-shadow: 0 4px 14px rgba(30, 33, 36, .08); }
html .pp-coord .pp-coord-chip { aspect-ratio: 3 / 2; border-radius: 6px; border: 1px solid rgba(30, 33, 36, .12); margin-bottom: .35rem; }
html .pp-role { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--pp-teal); }
html .pp-coord-name { font-weight: 600; }
html .pp-coord-note { color: var(--pp-graphite); font-size: .92rem; }
/* ---- north and south light ---- */
html .wedge-color { margin: 0 0 1rem; }
html .wedge-name { margin: 0 0 .4rem; font-weight: 600; }
html .wedge-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
html .wedge-row figure { margin: 0; }
html .wedge-chip { height: 110px; border: 1px solid rgba(30, 33, 36, .12); border-radius: 6px; }
html .wedge-row figcaption { font-size: .9rem; color: var(--pp-graphite); margin-top: .3rem; }
html .wedge-val { font-variant-numeric: tabular-nums; }
html .wedge-note, html .viz-note { font-size: .9rem; color: var(--pp-graphite); }
html .wedge[data-wedge-group]:has(> .wedge-color + .wedge-color) { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
html .wedge-note { grid-column: 1 / -1; margin: 0; }
@media (max-width: 560px) { html .wedge[data-wedge-group]:has(> .wedge-color + .wedge-color) { grid-template-columns: 1fr; } }

/* ---- the own-photo tool ---- */
html .tool-wrap { margin: 2.25rem 0; }
html .tool-wrap > .tool { margin: 0; }
html .viz[hidden], html .viz canvas[hidden], html [data-viz-nojs][hidden], html .viz-overlay[hidden], html .viz-alert[hidden] { display: none; }
html .viz fieldset { border: 1px solid var(--pp-hairline); border-radius: 8px; margin: .5rem 0; padding: .35rem .75rem .5rem; }
html .viz fieldset label { margin-right: 1rem; display: inline-block; }
html .viz-controls { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin: .25rem 0 .5rem; }
html .viz-file { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
html .viz-file-btn { font-weight: 600; }
html .viz button { font: inherit; min-height: 2.5rem; padding: .4rem .95rem; border: 1px solid var(--pp-teal); background: var(--pp-card); color: var(--pp-teal); border-radius: 999px; cursor: pointer; }
html .viz button:hover:not(:disabled) { background: var(--pp-teal); color: var(--pp-card); }
html .viz button:disabled { opacity: .45; cursor: default; }
/* fix3: Select, Exclude, Brush, Eraser as one pressed-button row; sizes beside it; Undo and Reset at the end */
html .viz-toolbar { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; margin: .6rem 0; }
html .viz-seg { display: inline-flex; flex-wrap: wrap; gap: .35rem; }
html .viz-seg[hidden], html .viz-fine[hidden], html .viz-notice[hidden], html .viz-progress[hidden] { display: none; }
html .viz .viz-seg button[aria-pressed="true"] { background: var(--pp-teal); color: var(--pp-card); }
html .viz .viz-seg button[aria-pressed="true"]:hover { background: var(--pp-teal-dark); }
html .viz-actions { display: inline-flex; gap: .35rem; margin-left: auto; }
html .viz-fine { margin: .4rem 0 .6rem; }
html .viz-fine summary { cursor: pointer; font-weight: 600; min-height: var(--pp-tap); display: flex; align-items: center; }
html .viz-spread { display: block; }
html .viz-spread-row { display: flex; align-items: center; gap: .6rem; margin-top: .25rem; }
html .viz-spread input { accent-color: var(--pp-teal); flex: 1; max-width: 22rem; }
html .viz-notice { margin: .6rem 0; padding: .6rem .9rem; border: 1px solid var(--pp-hairline); border-left: 5px solid var(--pp-teal); border-radius: 8px; background: var(--pp-card); }
html .viz-progress { margin: .6rem 0; padding: .6rem .9rem; border: 1px solid var(--pp-hairline); border-radius: 8px; background: var(--pp-card); }
html .viz-progress p { margin: 0 0 .4rem; font-weight: 500; }
html .viz-progress progress { width: 100%; height: .6rem; accent-color: var(--pp-teal); }
html .viz-progress .viz-quick { margin-top: .6rem; }
html .viz-steps { margin: .5rem 0 .25rem; padding-left: 1.4rem; }
html .viz-steps li { margin: .15rem 0; }
@media (max-width: 560px) {
  html .viz-toolbar { display: grid; gap: .45rem; }
  html .viz-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; }
  html .viz-seg.viz-sizes { grid-template-columns: repeat(3, 1fr); }
  html .viz .viz-seg button { padding: .4rem .25rem; }
  html .viz-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; margin-left: 0; }
}
html .viz-alert { margin: .6rem 0; padding: .7rem .9rem; border: 1px solid var(--pp-clay); border-left-width: 5px; border-radius: 8px; background: #FDF6F1; color: var(--pp-ink); font-weight: 500; }
html .viz-stage { position: relative; border: 2px dashed var(--pp-hairline); border-radius: var(--pp-radius); min-height: 120px; padding: .5rem; text-align: center; background: var(--pp-primer); scroll-margin-top: 1rem; }
html .viz-stage.dragging { border-color: var(--pp-teal); }
html .viz-stage.has-image { border-style: solid; padding: 0; overflow: hidden; }
html .viz-stage canvas { display: block; width: 100%; height: auto; max-height: 80vh; object-fit: contain; cursor: crosshair; touch-action: manipulation; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
html .viz-stage canvas.viz-painting { touch-action: none; cursor: cell; }
html .viz-hint { color: var(--pp-graphite); margin: 2rem 0; }
html .viz-stage.has-image .viz-hint { display: none; }
html .viz-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .7rem; pointer-events: none; background: rgba(30, 33, 36, .18); }
html .viz-overlay-text { background: var(--pp-card); color: var(--pp-ink); font-weight: 600; padding: .55rem 1rem; border-radius: 999px; box-shadow: 0 4px 16px rgba(30, 33, 36, .2); }
html .viz-pulse { width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--pp-card); border: 4px solid var(--pp-teal); box-shadow: 0 0 0 0 rgba(15, 91, 95, .6); animation: pp-pulse 1.4s ease-out infinite; }
@keyframes pp-pulse { 0% { box-shadow: 0 0 0 0 rgba(15, 91, 95, .6); } 100% { box-shadow: 0 0 0 1.1rem rgba(15, 91, 95, 0); } }
@media (prefers-reduced-motion: reduce) { html .viz-pulse { animation: none; } }
html .viz-status { min-height: 1.5em; margin: .5rem 0; }
html .viz-status:focus { outline: 2px solid var(--pp-teal); outline-offset: 2px; }

/* ---- the search results page ---- */
html .pp-sr-form label { display: block; font-weight: 600; margin-bottom: .4rem; }
html .pp-sr-row { display: flex; gap: .5rem; }
html .pp-sr-row input { flex: 1; min-width: 0; font: inherit; padding: .6rem .9rem; border: 1px solid var(--pp-hairline); border-radius: 999px; background: var(--pp-card); min-height: var(--pp-tap); }
html .pp-sr-row button, html .pp-sr-more button, html .pp-sr-empty button { font: inherit; font-weight: 600; min-height: var(--pp-tap); padding: .45rem 1.2rem; border-radius: 999px; border: 1px solid var(--pp-teal); background: var(--pp-teal); color: var(--pp-card); cursor: pointer; }
html .pp-sr-more button, html .pp-sr-empty button { background: var(--pp-card); color: var(--pp-teal); }
html .pp-sr-more button:hover, html .pp-sr-empty button:hover { background: var(--pp-teal); color: var(--pp-card); }
html .pp-sr[hidden], html [data-search-nojs][hidden], html .pp-sr-more button[hidden], html .pp-sr-empty[hidden] { display: none; }
html .pp-filters { margin: 1.25rem 0 .5rem; display: grid; gap: .55rem; }
html .pp-fgroup { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
html .pp-fgroup-label { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--pp-graphite); min-width: 6.5rem; }
html .pp-fchip { font: inherit; font-size: .88rem; min-height: 2.4rem; padding: .3rem .85rem; border-radius: 999px; border: 1px solid var(--pp-hairline); background: var(--pp-card); color: var(--pp-ink); cursor: pointer; }
html .pp-fchip:hover { border-color: var(--pp-teal); }
html .pp-fchip[aria-pressed="true"] { background: var(--pp-teal); border-color: var(--pp-teal); color: var(--pp-card); }
html .pp-sr-count { color: var(--pp-graphite); margin: .75rem 0 0; }
html .pp-sr-more { text-align: center; margin: 1.25rem 0; }
html .pp-sr-empty p { margin: .5rem 0; }
html .pp-sr-clear { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 1rem; }
html .pp-sr-browse { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ---- phones ---- */
@media (max-width: 720px) {
  html h1 { font-size: 1.7rem; }
  html .header-inner { flex-wrap: wrap; gap: .4rem 1rem; }
  html .site-nav { order: 3; flex: 1 1 100%; gap: .25rem 1.1rem; }
  html .pp-search { order: 1; flex: none; max-width: none; position: static; }
  html.pp-js .pp-search-toggle { display: inline-flex; align-items: center; justify-content: center; width: var(--pp-tap); height: var(--pp-tap); border: 1px solid var(--pp-hairline); border-radius: 999px; background: var(--pp-card); color: var(--pp-ink); cursor: pointer; padding: 0; }
  html .pp-search-toggle svg { width: 1.2rem; height: 1.2rem; }
  html.pp-js .pp-search-form { display: none; }
  html.pp-js .pp-search.is-open .pp-search-form { display: block; position: absolute; left: 0; right: 0; top: 100%; padding: .6rem var(--pp-gutter) .7rem; background: var(--pp-card); border-bottom: 1px solid var(--pp-hairline); box-shadow: 0 8px 20px rgba(30, 33, 36, .1); }
  html:not(.pp-js) .pp-search { flex: 1 1 100%; order: 4; }
  html .pp-suggest { min-width: 0; }
  html .pp-rooms { gap: .5rem; }
  html .pp-room-line { gap: .1rem .3rem; }
  html .pp-room-label .pp-chip-sm { display: none; }
  html .pp-room-name { font-size: .86rem; }
  html .pp-room-label .pp-code { font-size: .76rem; white-space: nowrap; }
  html .pp-room-label .pp-meta { flex-wrap: wrap; }
  html .pp-room-label { margin-top: .4rem; }
  html .pp-room-label .pp-meta { font-size: .78rem; }
  html .pp-room-label .pp-badge { font-size: .72rem; }
  html .pp-color-hero { grid-template-columns: 1fr; }
  html .pp-chip-lg { flex: none; aspect-ratio: 16 / 7; min-height: 0; }
  html .pp-quick dl > div { grid-template-columns: 1fr; gap: .1rem; }
  html .pp-switches { gap: .5rem; margin-top: .7rem; }
  html .pp-switch { gap: .4rem; }
  html .pp-seg button { padding: .42rem .7rem; }
  html .pp-coord { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html .pp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  html .pp-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  html .pp-cards-3 .pp-card { padding: .45rem; }
  html .pp-cards-1 { grid-template-columns: 1fr; }
  html .pp-each-grid { grid-template-columns: 1fr; }
  html .pp-fgroup-label { min-width: 100%; }
  html .pp-sr-browse { grid-template-columns: 1fr; }
  /* tables fit the phone instead of scrolling sideways (a scroll area needs keyboard access) */
  html .data-table { font-size: .86rem; }
  html .data-table th, html .data-table td { white-space: normal; overflow-wrap: anywhere; padding: .45rem .45rem; }
  html .data-table thead th { font-size: .7rem; letter-spacing: .02em; }
}
@media (max-width: 420px) { html .wedge-row { gap: .5rem; } html .wedge-chip { height: 90px; } }
@media print { html .pp-switches, html .pp-search, html .pp-try-row { display: none; } }

/* ======== psg-c1d-fix2: index pages, filter row, search, icons, rooms ======== */
html .pp-icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
/* the current page in the header and footer: text, not a link (aria-current="page") */
html .site-nav span[aria-current="page"] { color: var(--pp-ink); font-size: .98rem; padding: .25rem 0; border-bottom: 2px solid var(--pp-teal); font-weight: 600; }
html .footer-nav span[aria-current="page"] { color: var(--pp-ink); font-weight: 600; }
html span.site-name { cursor: default; }

/* ---- header search: a visible search button inside the field ---- */
html .pp-search-go { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; gap: .3rem; height: calc(100% - 8px); min-width: 2.4rem; padding: 0 .7rem; border: 0; border-radius: 999px; background: var(--pp-teal); color: var(--pp-card); cursor: pointer; font: inherit; font-size: .85rem; font-weight: 600; }
html .pp-search-go:hover { background: var(--pp-teal-dark); }
html .pp-search-go-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html body[data-page-type="home"] .pp-search-input { background: var(--pp-card); border: 2px solid var(--pp-ink); }
/* suggestions: groups, marks, the focus panel */
html .pp-sg { display: block; }
html .pp-sg-group { list-style: none; margin: 0; padding: 0; }
html .pp-sg-group + .pp-sg-group { border-top: 1px solid var(--pp-hairline); margin-top: .25rem; padding-top: .25rem; }
html .pp-sg-head { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pp-graphite); padding: .35rem .55rem .15rem; }
html .pp-opt mark { background: none; color: inherit; font-weight: 800; text-decoration: underline; text-decoration-color: var(--pp-teal); text-underline-offset: 2px; }
html .pp-opt-name { font-weight: 500; }
html .pp-opt-browse .pp-opt-name, html .pp-opt-pair .pp-opt-name { font-weight: 600; color: var(--pp-teal-dark); }
html .pp-opt-browse { padding-left: .8rem; border-left: 3px solid var(--pp-teal); border-radius: 0 7px 7px 0; }
html .pp-opt-chips { display: inline-flex; width: 1.9rem; height: 1.9rem; border-radius: 6px; overflow: hidden; border: 1px solid rgba(30, 33, 36, .15); flex: none; }
html .pp-opt-chips span { flex: 1; }
html .pp-opt-recent .pp-opt-name { font-weight: 400; }
html .pp-opt-recent::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; border: 2px solid var(--pp-graphite); flex: none; margin: 0 .55rem 0 .7rem; }
html .pp-sg-foot .pp-opt-all { margin-top: 0; }
html .pp-sg-help { padding: .45rem .55rem .55rem; border-bottom: 1px solid var(--pp-hairline); margin-bottom: .25rem; }
html .pp-sg-help-text { margin: 0 0 .4rem; font-weight: 600; font-size: .9rem; }
html .pp-sg-examples { display: flex; flex-wrap: wrap; gap: .4rem; }
html .pp-sg-ex { font: inherit; font-size: .85rem; min-height: 2.2rem; padding: .2rem .8rem; border-radius: 999px; border: 1px solid var(--pp-teal); background: var(--pp-card); color: var(--pp-teal); cursor: pointer; }
html .pp-sg-ex:hover { background: var(--pp-teal); color: var(--pp-card); }
html .pp-sg-clear { margin: .2rem .55rem .3rem; text-align: right; }
html .pp-linkbtn { font: inherit; font-size: .88rem; background: none; border: 0; padding: .2rem 0; color: var(--pp-teal); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 2rem; }

/* ---- the filter row (A) ---- */
html .psg-filters { margin: 1rem 0 1.25rem; }
html .psg-filters-open { display: none; }
html .psg-filters-head, html .psg-filters-done { display: none; }
html .psg-filters-panel { display: grid; gap: .5rem; }
html .psg-fgroup { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
html .psg-fgroup-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--pp-graphite); min-width: 6.5rem; }
html .psg-fchip { display: inline-flex; align-items: center; gap: .4rem; font: inherit; font-size: .88rem; min-height: 2.5rem; padding: .25rem .85rem; border-radius: 999px; border: 1px solid var(--pp-hairline); background: var(--pp-card); color: var(--pp-ink); cursor: pointer; white-space: nowrap; }
html .psg-fchip.has-dot { padding-left: .35rem; }
html .psg-fchip:hover { border-color: var(--pp-teal); }
html .psg-fchip[aria-pressed="true"] { background: var(--pp-teal); border-color: var(--pp-teal); color: var(--pp-card); }
html .psg-fdot { width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1px solid rgba(30, 33, 36, .2); box-shadow: inset 0 0 0 2px var(--pp-card); flex: none; }
html .psg-fchip[aria-pressed="true"] .psg-fdot { border-color: var(--pp-card); }
html .psg-filters-clear { justify-self: start; font: inherit; font-size: .88rem; background: none; border: 0; color: var(--pp-teal); text-decoration: underline; cursor: pointer; min-height: 2.2rem; padding: 0; }
html .psg-filters-clear[hidden] { display: none; }
html .psg-filters-count { color: var(--pp-graphite); margin: .7rem 0 0; font-variant-numeric: tabular-nums; }
html:not(.pp-js) .psg-filters { display: none; }
html .psg-results[hidden], html .psg-static[hidden], html .psg-filters[hidden] { display: none; }
html .pp-empty { color: var(--pp-graphite); }

/* ---- grids of swatch cards on the index pages ---- */
html .pp-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
html .pp-grid-pairs { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
html .pagination { margin: 1.5rem 0 0; display: flex; gap: 1rem; align-items: center; justify-content: center; }
html .pagination a { display: inline-flex; align-items: center; min-height: var(--pp-tap); padding: 0 1rem; border: 1px solid var(--pp-hairline); border-radius: 999px; background: var(--pp-card); text-decoration: none; }
html .pagination a:hover { border-color: var(--pp-teal); }
html .pagination .disabled { color: var(--pp-graphite); }
html .pp-hub-count { color: var(--pp-graphite); font-size: .85em; margin-left: .3rem; font-variant-numeric: tabular-nums; }
html .pp-index-brands { margin: 0 0 .5rem; }
html .pp-more-row { margin: 1rem 0 0; }
html .pp-more-link { display: inline-flex; align-items: center; min-height: var(--pp-tap); font-weight: 600; color: var(--pp-teal); }

/* ---- family color dots (C.1, C.2): tappable, 44 px targets, name under each on desktop ---- */
html .pp-dots { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem .2rem; }
html .pp-dot { display: flex; flex-direction: column; align-items: center; gap: .2rem; min-width: 3.4rem; min-height: var(--pp-tap); padding: .2rem .15rem; border-radius: 10px; text-decoration: none; color: var(--pp-ink); }
html .pp-dot-chip { width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid rgba(30, 33, 36, .22); box-shadow: inset 0 0 0 2px var(--pp-card); transition: transform .12s, box-shadow .12s; }
html .pp-dot:hover .pp-dot-chip, html .pp-dot:focus-visible .pp-dot-chip { transform: scale(1.08); box-shadow: inset 0 0 0 2px var(--pp-card), 0 0 0 2px var(--pp-teal); }
html .pp-dot:hover { color: var(--pp-teal); }
html .pp-dot-name { font-size: .74rem; line-height: 1.15; text-align: center; }
html .pp-dots-head { font-family: var(--pp-sans); font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--pp-graphite); margin: 0; }
html .pp-dots-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--pp-graphite); margin: .8rem 0 0; }
html .pp-index-dots { margin: 0 0 .5rem; }

/* ---- brand cards (C.1) ---- */
html .pp-brand-cards { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
html .pp-brand-card { background: var(--pp-card); border: 1px solid var(--pp-hairline); border-radius: var(--pp-radius); padding: .9rem; min-width: 0; }
html .pp-brand-head { display: block; text-decoration: none; color: var(--pp-ink); }
html .pp-brand-head:hover .pp-brand-name { color: var(--pp-teal); text-decoration: underline; text-underline-offset: 3px; }
html .pp-strip { display: flex; height: 2.6rem; border-radius: 6px; overflow: hidden; border: 1px solid rgba(30, 33, 36, .12); }
html .pp-strip span { flex: 1; }
html .pp-brand-name { font-family: var(--pp-serif); font-size: 1.3rem; margin: .6rem 0 0; }
html .pp-brand-count { color: var(--pp-graphite); font-size: .9rem; font-variant-numeric: tabular-nums; }
html .pp-brand-top { margin: .45rem 0 0; font-size: .92rem; }

/* ---- family tiles (D.5) ---- */
html .pp-tiles { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; }
html .pp-tile { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--pp-ink); background: var(--pp-card); border: 1px solid var(--pp-hairline); border-radius: var(--pp-radius); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
html .pp-tile:hover { border-color: var(--pp-teal); box-shadow: 0 4px 14px rgba(30, 33, 36, .08); }
html .pp-tile img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
html .pp-tile-text { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; padding: .5rem .65rem 0; }
html .pp-tile-name { font-family: var(--pp-serif); font-weight: 600; font-size: 1.1rem; }
html .pp-tile-count { color: var(--pp-graphite); font-size: .84rem; font-variant-numeric: tabular-nums; }
html .pp-tile-chips { display: flex; gap: .3rem; padding: .45rem .65rem .65rem; }
html .pp-tile-chips span { flex: 1; height: 1rem; border-radius: 4px; border: 1px solid rgba(30, 33, 36, .12); }
html .pp-tile:hover .pp-tile-name { color: var(--pp-teal); text-decoration: underline; text-underline-offset: 3px; }

/* ---- home (B) ---- */
html .psg-index-home > h1 { margin-bottom: 1rem; }
html .pp-home-hero { margin: 0 0 .5rem; }
html .pp-home-hero-link { display: block; text-decoration: none; color: var(--pp-ink); }
html .pp-home-rooms { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; }
html .pp-home-room { margin: 0; min-width: 0; }
html .pp-home-room img { display: block; width: 100%; height: auto; aspect-ratio: 800 / 533; border-radius: var(--pp-radius); box-shadow: 0 1px 2px rgba(30, 33, 36, .06), 0 8px 24px rgba(30, 33, 36, .08); }
html .pp-home-room figcaption { display: flex; align-items: center; gap: .4rem; margin-top: .45rem; font-size: .95rem; }
html .pp-home-room-name { font-family: var(--pp-serif); font-weight: 600; }
html .pp-home-hero-cta { display: inline-flex; align-items: center; gap: .5rem; margin-top: .55rem; min-height: var(--pp-tap); padding: .4rem 1.1rem; border-radius: 999px; background: var(--pp-teal); color: var(--pp-card); font-weight: 600; }
html .pp-home-hero-link:hover .pp-home-hero-cta { background: var(--pp-teal-dark); }
html .pp-picker { background: var(--pp-card); border: 1px solid var(--pp-hairline); border-radius: var(--pp-radius); padding: 1.1rem 1.25rem 1rem; }
html .pp-picker h2 { margin-bottom: .7rem; }
html .pp-picker-form { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: end; gap: .6rem; }
html .pp-picker-field { position: relative; min-width: 0; }
html .pp-picker-field label { display: block; font-size: .85rem; font-weight: 600; color: var(--pp-graphite); margin-bottom: .25rem; }
html .pp-picker-field input { width: 100%; font: inherit; min-height: var(--pp-tap); padding: .5rem .9rem; border: 1px solid #8C8F93; border-radius: 999px; background: var(--pp-primer); }
html .pp-picker-field input:focus { outline: 3px solid var(--pp-teal); outline-offset: 1px; background: var(--pp-card); }
html .pp-picker-vs { align-self: center; padding-top: 1.3rem; font-family: var(--pp-serif); font-style: italic; color: var(--pp-graphite); }
html .pp-picker-go { display: inline-flex; align-items: center; gap: .45rem; font: inherit; font-weight: 600; min-height: var(--pp-tap); padding: .45rem 1.2rem; border-radius: 999px; border: 1px solid var(--pp-teal); background: var(--pp-teal); color: var(--pp-card); cursor: pointer; }
html .pp-picker-go:hover { background: var(--pp-teal-dark); }
html .pp-picker .pp-note { margin: .6rem 0 0; }
html .pp-picker-msg { margin: .3rem 0 0; color: var(--pp-ink); font-weight: 600; }
html .pp-picker-msg:empty { display: none; }
html .pp-picker .pp-suggest { top: calc(100% + 4px); }
html .pp-cards-feature { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html .pp-card-thumb { padding: 0 0 .6rem; overflow: hidden; }
html .pp-card-thumb .pp-card-img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; margin-bottom: .45rem; }
html .pp-card-thumb .pp-card-chips { display: none; }
html .pp-card-thumb .pp-card-name, html .pp-card-thumb .pp-card-meta { padding: 0 .6rem; }
html .pp-home-about p { color: var(--pp-graphite); }

/* ---- room switches: icons, the room pills with House exterior set apart (G2) ---- */
html .pp-switch-label { display: inline-flex; align-items: center; gap: .3rem; }
html .pp-switch-rooms { align-items: flex-start; gap: .6rem; }
html .pp-pills { display: inline-flex; flex-wrap: wrap; gap: .35rem; }
html .pp-pills button { font: inherit; font-size: .9rem; min-height: 2.5rem; padding: .3rem .85rem; border-radius: 999px; border: 1px solid var(--pp-teal); background: var(--pp-card); color: var(--pp-teal); cursor: pointer; }
html .pp-pills button:hover { background: color-mix(in srgb, var(--pp-teal) 9%, var(--pp-card)); }
html .pp-pills button[aria-pressed="true"] { background: var(--pp-teal); color: var(--pp-card); }
html .pp-pills-out { margin-left: .5rem; padding-left: .8rem; border-left: 1px solid var(--pp-hairline); }
html .pp-try .pp-icon { width: 1.1rem; height: 1.1rem; }

/* ---- sample affiliate slot (off unless configured) ---- */
html .pp-sample { margin: .7rem 0 0; }
html .pp-sample-btn { display: inline-flex; align-items: center; min-height: var(--pp-tap); padding: .4rem 1rem; border-radius: 999px; border: 1px solid var(--pp-clay); color: var(--pp-ink); background: #FDF6F1; font-weight: 600; text-decoration: none; }
html .pp-sample-btn:hover { background: var(--pp-clay); color: var(--pp-card); }
html .pp-sample-note { margin: .3rem 0 0; font-size: .82rem; color: var(--pp-graphite); }

/* ---- search page ---- */
html .pp-sr-help { color: var(--pp-graphite); font-size: .93rem; margin: .7rem 0 0; }
html .pp-sr-help strong { color: var(--pp-ink); }
html .pp-sr-row button { display: inline-flex; align-items: center; gap: .4rem; }
html .pp-sr-none { font-size: 1.1rem; font-weight: 600; }
html .pp-sr-dym { font-size: 1.05rem; }
html .pp-sr-sub { font-size: 1.15rem; margin: 1.25rem 0 .5rem; }
html .pp-sr-pair[hidden] { display: none; }
html .pp-sr-pair-note { margin: 1rem 0; }
html .pp-sr-pair-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ---- phones ---- */
@media (max-width: 720px) {
  html .pp-search-go { min-width: 2.2rem; padding: 0 .55rem; }
  html .pp-dot { min-width: var(--pp-tap); padding: 0; justify-content: center; }
  html .pp-dot-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html .pp-dots { gap: .25rem; }
  html .pp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  html .pp-cards-feature { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html .pp-picker-form { grid-template-columns: 1fr; }
  html .pp-picker-vs { display: none; }
  html .pp-picker-go { justify-content: center; }
  html .pp-home-rooms { gap: .5rem; }
  html .pp-home-room figcaption { font-size: .82rem; flex-wrap: wrap; gap: .15rem .35rem; }
  html .pp-home-room figcaption .pp-chip-sm { display: none; }
  html .pp-home-hero-cta { font-size: .92rem; }
  html .pp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html .pp-grid-pairs { grid-template-columns: 1fr; }
  html .pp-sr-pair-grid { grid-template-columns: 1fr; }
  html .pp-pills { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: 2px; scrollbar-width: none; }
  html .pp-pills::-webkit-scrollbar { display: none; }
  html .pp-switch-rooms { flex-wrap: wrap; min-width: 0; max-width: 100%; }
  html .pp-pills-out { margin-left: 0; padding-left: 0; border-left: 0; }
  /* the filter row: one line that scrolls sideways, plus a Filters button that opens a sheet */
  html .psg-filters-bar { display: flex; align-items: center; gap: .5rem; min-width: 0; }
  html .psg-filters-open { display: inline-flex; align-items: center; gap: .35rem; flex: none; font: inherit; font-size: .9rem; font-weight: 600; min-height: var(--pp-tap); padding: .3rem .9rem; border-radius: 999px; border: 1px solid var(--pp-teal); background: var(--pp-card); color: var(--pp-teal); cursor: pointer; }
  html .psg-filters-panel { display: flex; gap: .4rem; overflow-x: auto; flex-wrap: nowrap; min-width: 0; padding: 2px; scrollbar-width: none; }
  html .psg-filters-panel::-webkit-scrollbar { display: none; }
  html .psg-fgroup { flex-wrap: nowrap; flex: none; gap: .35rem; }
  html .psg-fgroup + .psg-fgroup { padding-left: .5rem; border-left: 1px solid var(--pp-hairline); }
  html .psg-fgroup-label { min-width: 0; }
  html .psg-filters-clear { flex: none; }
  html .psg-filters.is-sheet .psg-filters-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; max-height: 78vh; overflow-y: auto; overflow-x: hidden; display: grid; gap: .8rem; padding: .8rem var(--pp-gutter) 1.2rem; background: var(--pp-card); border-radius: 16px 16px 0 0; box-shadow: 0 -10px 40px rgba(30, 33, 36, .25); }
  html .psg-filters.is-sheet .psg-filters-head { display: flex; align-items: center; justify-content: space-between; background: var(--pp-card); padding: .2rem 0 .4rem; }
  html .psg-filters.is-sheet .psg-filters-title { font-family: var(--pp-serif); font-weight: 600; font-size: 1.2rem; }
  html .psg-filters.is-sheet .psg-filters-done { display: inline-flex; align-items: center; font: inherit; font-weight: 600; min-height: var(--pp-tap); padding: .3rem 1rem; border-radius: 999px; border: 0; background: var(--pp-teal); color: var(--pp-card); cursor: pointer; }
  html .psg-filters.is-sheet .psg-fgroup { flex-wrap: wrap; border-left: 0; padding-left: 0; }
  html .psg-filters.is-sheet .psg-fgroup-label { flex: 1 1 100%; }
  html.psg-sheet-open body::after { content: ""; position: fixed; inset: 0; background: rgba(30, 33, 36, .35); z-index: 40; }
  /* comparison table heads: break at word boundaries only, never mid-word (carried 1) */
  html .data-table thead th { overflow-wrap: break-word; word-break: normal; hyphens: manual; text-transform: none; letter-spacing: 0; font-size: .74rem; }
  html .data-table:has(thead th:nth-child(4)) { table-layout: fixed; width: 100%; }
  html .data-table:has(thead th:nth-child(4)) th, html .data-table:has(thead th:nth-child(4)) td { padding: .4rem .3rem; }
  html .data-table:has(thead th:nth-child(4)) thead th:nth-child(1) { width: 28%; }
  html .data-table:has(thead th:nth-child(4)) thead th:nth-child(4) { width: 20%; }
}
/* the core's plain link lists (404 page): chips, not bullets */
html main .link-list { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
html main .link-list a { display: inline-flex; align-items: center; min-height: var(--pp-tap); padding: .3rem 1rem; border: 1px solid var(--pp-hairline); border-radius: 999px; background: var(--pp-card); text-decoration: none; }
html main .link-list a:hover { border-color: var(--pp-teal); color: var(--pp-teal); }