/* ==========================================================================
   Process Design Kits  (/resources/process-design-kits/)

   Foundry PDKs and SmartDRC/LVS rule decks by foundry and node (the doc).
   Shared, from stylesheets already linked: the page banner, the FAQ
   (faq.css), .pf-related (product-family.css). Page-local:
     .pk-filter    the banner's foundry and node filter (collection-filter.js)
     .pk-section   one table band: PDKs, then rule decks
     .pk-table     a kit table; a card per row on phones
     .pk-request   how to get a kit: the two routes

     §1 banner white · §2 PDKs neutral-2-100 · §3 rule decks white ·
     §4 request neutral-2-100 · §5 FAQ white · §6 related neutral-2-100
   ========================================================================== */

#pdks,#rule-decks,#request{scroll-margin-top:24px}
.pk-lists[hidden],.pk-section[hidden],.pk-table tr[hidden],.pk-empty[hidden]{display:none}

/* --------------------------------------------------------------------------
   §1 Banner: the filter
   -------------------------------------------------------------------------- */
.pk-banner .page-banner__body p{margin:0}
.pk-filter{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 16px;margin-top:28px}
.pk-filter[hidden]{display:none}
.pk-filter__field{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 220px;max-width:300px}
.pk-filter__label{font:500 13px/19px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500)}
.pk-filter__select{
  width:100%;
  appearance:none;-webkit-appearance:none;
  background:var(--sv-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23697077' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center;
  border:1px solid var(--ps-color-neutral-2-300);border-radius:10px;
  padding:11px 40px 11px 14px;
  font:400 15px/22px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500);
  cursor:pointer;transition:border-color .2s ease-out,box-shadow .2s ease-out;
}
.pk-filter__select:hover{border-color:var(--ps-color-neutral-2-500)}
.pk-filter__select:focus-visible{outline:none;border-color:var(--ps-color-brand-500);box-shadow:0 0 0 3px rgba(198,12,48,.12)}
.pk-filter__foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;flex-basis:100%}
.pk-filter__count{margin:0;font:500 13px/19px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500)}
.pk-filter__clear{
  background:none;border:0;padding:0;cursor:pointer;
  font:500 13px/19px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px;
}
.pk-filter__clear[hidden]{display:none}
.pk-filter__clear:hover{color:var(--ps-color-brand-500)}
.pk-banner__meta{margin:18px 0 0}
.pk-banner__link{
  font:500 14px/20px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px;
}
.pk-banner__link:hover{color:var(--ps-color-brand-500)}

/* --------------------------------------------------------------------------
   Bands
   -------------------------------------------------------------------------- */
.pk-section,.pk-request{padding-block:48px}
.pk-band__head,.pk-band__body,.pk-routes,.pk-empty__text{grid-column-end:span var(--ps-grid-columns)}
.pk-band__head{margin-bottom:28px}
.pk-band__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.pk-band__count{
  display:inline-block;vertical-align:middle;margin-left:6px;padding:2px 10px;border-radius:999px;
  background:var(--ps-color-neutral-2-000);border:1px solid var(--ps-color-neutral-2-300);
  font:500 14px/20px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500);
  font-variant-numeric:tabular-nums;
}
.pk-band__lead{color:var(--ps-color-secondary-5-500);margin:0;max-width:72ch}
/* PDK-03/16 (2026-10-01): the section's two H3 groups */
.pk-band__groups{display:grid;grid-template-columns:1fr;gap:20px;margin-top:20px}
.pk-band__group-title{margin:0 0 8px;color:var(--ps-color-neutral-3-500)}
.pk-band__lead a{color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px}
.pk-section--kits,.pk-request,.pk-related{background:var(--ps-color-neutral-2-100);border-block:1px solid var(--ps-color-neutral-2-300)}
.pk-section--decks,.pk-faq{background:var(--sv-white)}

/* --------------------------------------------------------------------------
   §2–3 The tables (after the Solutions hub's .pdk-table)
   -------------------------------------------------------------------------- */
.pk-table__scroll{
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
}
.pk-table__scroll:focus-visible{outline:2px solid var(--ps-color-brand-500);outline-offset:2px}
.pk-table{
  width:100%;border-collapse:collapse;
  font:400 14px/20px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-secondary-5-500);
}
.pk-table thead{display:none}
.pk-table tbody tr{display:block;padding:16px 18px;border-bottom:1px solid var(--ps-color-neutral-2-300)}
.pk-table tbody tr:last-child{border-bottom:0}
.pk-table th,.pk-table td{display:block;text-align:left;padding:2px 0}
.pk-table tbody th{font:500 15px/22px var(--ps-font);color:var(--ps-color-neutral-3-500)}
.pk-table td[data-label]::before{
  content:attr(data-label) ": ";
  font-weight:500;color:var(--ps-color-neutral-3-500);
}
.pk-table td[data-label="Kit"]::before,.pk-table td[data-label="Get it"]::before{content:none}
.pk-table td[data-label="Kit"]{color:var(--ps-color-neutral-3-500)}
.pk-table td[data-label="Get it"]{padding-top:8px}
.pk-table a{color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px}
.pk-table a:hover{color:var(--ps-color-brand-500)}
.pk-src--plain,.pk-none{color:var(--ps-color-neutral-2-900)}
.pk-get{white-space:nowrap}

/* §4 How to get a kit */
.pk-routes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:16px}
.pk-route{
  display:flex;flex-direction:column;gap:10px;
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
  padding:24px 22px;
}
.pk-route__name{margin:0;color:var(--ps-color-neutral-3-500)}
.pk-route__body{margin:0;flex:1 1 auto;font:400 15px/23px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500)}
.pk-route__link{margin-top:6px}

.pk-empty{padding-block:40px 56px}
.pk-empty__text{margin:0;color:var(--ps-color-secondary-5-500)}
.pk-empty__text a{color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px}

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */
@media (min-width:640px){
  .pk-section,.pk-request{padding-block:64px}
  .pk-routes{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .pk-band__groups{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
}
@media (min-width:1200px){
  /* a real table once the columns fit */
  .pk-table__scroll{overflow-x:auto}
  .pk-table{min-width:820px}
  .pk-table thead{display:table-header-group}
  .pk-table tbody tr{display:table-row;padding:0;border-bottom:0}
  .pk-table th,.pk-table td{
    display:table-cell;padding:13px 16px;vertical-align:top;
    border-bottom:1px solid var(--ps-color-neutral-2-300);
  }
  .pk-table td[data-label]::before{content:none}
  .pk-table td[data-label="Get it"]{padding-top:13px}
  .pk-table thead th{
    font:500 11px/16px var(--ps-font);letter-spacing:.12em;text-transform:uppercase;
    color:var(--ps-color-neutral-3-500);background:var(--ps-color-neutral-2-000);white-space:nowrap;
  }
  .pk-table tbody th{font-size:14px;line-height:20px;min-width:110px}
  .pk-table td[data-label="Node range"],.pk-table td[data-label="Source"]{white-space:nowrap}
  .pk-table tbody tr:last-child th,.pk-table tbody tr:last-child td{border-bottom:0}
  .pk-table tbody tr:hover{background:var(--ps-color-neutral-2-000)}
}
@media (min-width:1024px){
  .pk-section,.pk-request{padding-block:80px}
}
@media (min-width:1350px){
  .pk-band__head,.pk-band__body,.pk-routes,.pk-empty__text,.pk-related .pf-related__inner{grid-column-start:2;grid-column-end:span 10}
}

@media (prefers-reduced-motion:reduce){
  .pk-filter__select{transition:none}
}