/* Program Colors: every color in rows by price group, full-size slab photos, brand buttons to narrow it.
   Loaded after nuform.css, on this page only. Tokens all come from nuform.css. */

/* The color list is wider than the usual 78rem shell; the intro and tools line up with it. */
.pc-shell { max-width: 96rem; }

/* ---- intro and price-group key ---- */
.pc-intro { padding-block: clamp(2.25rem, 1.25rem + 3vw, 4rem) var(--s-6); }

.pc-intro__grid {
  display: grid;
  gap: var(--s-6);
  align-items: end;
}

.pc-intro h1 { margin-bottom: var(--s-4); }

.pc-intro .lede { max-width: 50ch; }

.pc-key {
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bone-raised);
}

.pc-key__title {
  margin-bottom: var(--s-3);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--ink);
}

.pc-key__scale {
  display: flex;
  align-items: flex-end;
  gap: var(--s-3);
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: lining-nums;
}

.pc-key__steps {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  align-items: end;
  gap: 3px;
  height: 1.9rem;
}

.pc-key__steps i { display: block; border-radius: 1px; }
.pc-key__steps i:nth-child(1)  { height: 20%;  background: color-mix(in srgb, var(--ink-soft) 14%, var(--line-strong)); }
.pc-key__steps i:nth-child(2)  { height: 28%;  background: color-mix(in srgb, var(--ink-soft) 22%, var(--line-strong)); }
.pc-key__steps i:nth-child(3)  { height: 36%;  background: color-mix(in srgb, var(--ink-soft) 30%, var(--line-strong)); }
.pc-key__steps i:nth-child(4)  { height: 44%;  background: color-mix(in srgb, var(--ink-soft) 38%, var(--line-strong)); }
.pc-key__steps i:nth-child(5)  { height: 52%;  background: color-mix(in srgb, var(--ink-soft) 46%, var(--line-strong)); }
.pc-key__steps i:nth-child(6)  { height: 60%;  background: color-mix(in srgb, var(--ink-soft) 54%, var(--line-strong)); }
.pc-key__steps i:nth-child(7)  { height: 68%;  background: color-mix(in srgb, var(--ink-soft) 62%, var(--line-strong)); }
.pc-key__steps i:nth-child(8)  { height: 76%;  background: color-mix(in srgb, var(--ink-soft) 70%, var(--line-strong)); }
.pc-key__steps i:nth-child(9)  { height: 84%;  background: color-mix(in srgb, var(--ink-soft) 78%, var(--line-strong)); }
.pc-key__steps i:nth-child(10) { height: 92%;  background: color-mix(in srgb, var(--ink-soft) 86%, var(--line-strong)); }
.pc-key__steps i:nth-child(11) { height: 100%; background: var(--ink-soft); }

@media (prefers-reduced-motion: no-preference) {
  .pc-key__steps i {
    transform-origin: 50% 100%;
    animation: pc-step 560ms var(--ease-out) both;
    animation-delay: calc(260ms + var(--step, 0) * 45ms);
  }
  .pc-key__steps i:nth-child(2)  { --step: 1; }
  .pc-key__steps i:nth-child(3)  { --step: 2; }
  .pc-key__steps i:nth-child(4)  { --step: 3; }
  .pc-key__steps i:nth-child(5)  { --step: 4; }
  .pc-key__steps i:nth-child(6)  { --step: 5; }
  .pc-key__steps i:nth-child(7)  { --step: 6; }
  .pc-key__steps i:nth-child(8)  { --step: 7; }
  .pc-key__steps i:nth-child(9)  { --step: 8; }
  .pc-key__steps i:nth-child(10) { --step: 9; }
  .pc-key__steps i:nth-child(11) { --step: 10; }
}

@keyframes pc-step {
  from { transform: scaleY(.12); opacity: .35; }
}

.pc-key__text {
  margin-top: var(--s-3);
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ink-soft);
}

@media (min-width: 56rem) {
  .pc-intro__grid {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem);
    gap: var(--s-8);
  }
}

/* ---- search and brand buttons (field and chip styles come from nuform.css P11) ---- */
.pc-tools {
  display: grid;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

.pc-tools .pc-search { max-width: 36rem; }

/* the field has its own clear button; hide the browser's second one */
.pc-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* field boundary at 3:1 (the shared --line-strong border is 1.46:1) */
.pc-tools .pc-search input { border-color: var(--line-ui); }

/* 44px touch targets and press feedback on the brand buttons and the clear button */
.pc-filters .pc-chip {
  min-height: 2.75rem;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out), transform 120ms var(--ease-out);
}

.pc-filters .pc-chip:active { transform: scale(.97); }

.pc-tools .pc-search__clear { width: 2.75rem; height: 2.75rem; right: .15rem; }

/* the shared lightbox is near-black; a brick focus ring disappears on it */
.lightbox { --focus-ring: var(--bone); }

@media (scripting: none) {
  .pc-tools { display: none; }
}

/* ---- the colors, one row per price group ---- */
.pc-list {
  width: 100%;
  max-width: 96rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-bottom: var(--s-6);
}

.pc-tier {
  display: grid;
  gap: var(--s-4);
  padding-block: var(--s-6) var(--s-7);
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

.pc-tier[hidden],
.pc-slabs > li[hidden] { display: none; }

.pc-tier__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem var(--s-4);
}

.pc-tier__head h2 {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-soft);
}

.pc-tier__num {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: lining-nums;
  font-variation-settings: 'opsz' 72, 'SOFT' 0, 'WONK' 0;
}

.pc-tier__meta { font-size: var(--t-small); color: var(--muted); }

.pc-tier__note::before { content: " \00b7  "; }

.pc-slabs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: var(--s-5) clamp(1rem, .5rem + 1vw, 1.5rem);
}

.pc-slab {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
  color: var(--ink);
  cursor: zoom-in;
  border-radius: var(--radius);
}

.pc-slab:focus-visible { outline: 2px solid var(--brick); outline-offset: 4px; }

.pc-slab__media {
  display: block;
  isolation: isolate;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bone-sunk);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
}

.pc-slab__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-out);
}

.pc-slab:active .pc-slab__media { transform: scale(.98); }

@media (hover: hover) and (pointer: fine) {
  .pc-slab:hover .pc-slab__media { box-shadow: var(--shadow-md); }
  .pc-slab:hover .pc-slab__media img { transform: scale(1.04); }
}

.pc-slab__name {
  display: block;
  margin-top: .6rem;
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
}

.pc-slab__brand {
  display: block;
  margin-top: .1rem;
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--muted);
}

.pc-empty__title {
  margin-bottom: var(--s-3);
  font-family: var(--font-display);
  font-size: var(--t-h3);
  color: var(--ink);
}

/* Desktop: the group number sits in its own column and stays in view while its row scrolls. */
@media (min-width: 64rem) {
  .pc-tier {
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: var(--s-5);
    align-items: start;
  }

  .pc-tier__head {
    position: sticky;
    top: calc(var(--header-h) + 1.25rem);
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
  }

  .pc-tier__head h2 { flex-direction: column; gap: .15rem; }

  .pc-tier__num { font-size: 3.25rem; }

  .pc-tier__note { display: block; }

  .pc-tier__note::before { content: none; }
}

@media (max-width: 30rem) {
  .pc-slabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) .75rem; }
  .pc-slab__name { font-size: .875rem; }
  .pc-tier__num { font-size: 2.25rem; }
}

.pc-note { padding-block: var(--s-7) var(--s-8); }

@media print {
  .pc-tools, .pc-key { display: none !important; }
  .pc-tier__head { position: static; }
}