/* ==========================================================================
   FRONTGRADE  ·  fg2 PARTS TABLE
   The dark-ground layer for esd_component_product_type_table, the filterable
   parts table five product category pages carry in their body. Requires
   tokens.css and components.css, and it is written to sit inside the catalog
   pattern, so catalog.css is expected alongside it.

   WHAT THIS FILE IS FOR. The component is a working piece of software: a view
   that renders the parts, a script that reads that table and rebuilds it with
   sorting, paging, a search box, attribute filters and a modal on small
   screens. None of that is touched here. Its own stylesheet
   (esd_component_product_type_table/global) is written for a white ground and
   is what puts the component out of step with the redesigned pages. This file
   restates only the surfaces, the type and the borders in kit terms, on the
   dark ground, and leaves every layout rule, every position: sticky and every
   transition the component depends on exactly where they are.

   HOW IT IS SCOPED, AND WHY THAT SCOPE. Every rule below starts
   .fg-catalog .component-product-type-table, which is three class selectors
   against the component stylesheet's two, so this file wins wherever the two
   describe the same property and it does not depend on which library the
   aggregator emits first. The scope also means the component is unchanged
   everywhere else on the site: only a parts table drawn inside a redesigned
   catalog article is restyled, and the same component on any page still on
   the previous design keeps the rendering it has.

   WHAT HAS TO BE WIRED FOR THIS FILE TO DO ANYTHING. Nothing here changes
   which pages the catalog pattern serves. The five pages carrying this
   component are still turned down by _frontgrade_fg2_catalog_components() in
   frontgrade.theme, so they render the previous design and never reach these
   rules. Bringing them over is four edits, and they have to move together:
     1. add product_type_table to _frontgrade_fg2_catalog_components();
     2. add a case to _frontgrade_fg2_catalog_sections() that returns the
        paragraph's own render array, so the component's template, library and
        behaviours run as they do today;
     3. add the matching branch to _fg2-catalog.html.twig, drawing that render
        array inside .fg-band > .fg-container like the other bands;
     4. add fg2/css/product-table.css to the frontgrade/fg2-catalog library.
   All four are outside this file.

   COLOUR. Every value is a token and every text pair below carries the ratio
   tokens.css publishes for it, named against the surface the pair actually
   sits on. The one rule that needs watching is --accent as small text: it
   clears AA on --surface-base (5.22:1), --surface-raised (4.98:1) and
   --surface-panel (4.68:1) but NOT on --surface-elevated (4.49:1), so no
   accent text in this file is ever put on --surface-elevated.
   ========================================================================== */

/* ==========================================================================
   1. THE COMPONENT SHELL
   ========================================================================== */

/* The component draws its own width and its own inner padding for a white
   page. Inside a band it is already inside .fg-container, so the padding is
   returned to the band and the component fills the column it is given.     */
.fg-catalog .component-product-type-table,
.fg-catalog .component-product-type-table .component-product-type-table__inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
}

/* The view wrapper holds the source markup the script reads before it builds
   the visible table. It is not for reading, and on the previous design it is
   already out of the way; this keeps it out of the way on this one.        */
.fg-catalog .component-product-type-table .component-product-type-table__view-wrapper {
  display: none;
}

/* ==========================================================================
   2. SEARCH AND FILTER BAR
   ========================================================================== */

/* --- The search field ----------------------------------------------------
   The kit's input surface is --surface-panel, one step up from either band
   ground, so the field reads as a field on both:
     --text-primary on --surface-panel  14.55:1  AAA  what the visitor types
     --text-muted   on --surface-panel   4.99:1  AA   the placeholder
   The placeholder is the quiet tone rather than a lighter grey, because the
   system runs one quiet tone.                                              */
.fg-catalog .component-product-type-table .component-product-type-table__filters {
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

/* The field's boundary is the only thing that says where the field is: the
   input itself is transparent and borderless by design, and the fill sits
   1.06:1 from the band behind it, so the boundary is load bearing rather than
   decorative and 1.4.11 applies to it at 3:1.

   Measured on /products/fpgas before this rule: the hairline composited to
   1.22:1 against the band ground and 1.15:1 against the field's own fill,
   which is the lowest reading anywhere in the component. The quiet border
   tone, which is the same value the quiet text tone uses, measures 4.99:1 on
   --surface-panel and 5.57:1 on --surface-base, so the same declaration
   clears the threshold on both bands with the same token the kit already
   runs. The focus state below stays on the accent, which measures 4.68:1 on
   the panel and is unchanged.

   The component is also served on the previous light skin, where the input
   draws its own 1px #6b7a94 border and measures 4.34:1 on white. That path is
   not scoped by this file and is not touched.                              */
.fg-catalog .component-product-type-table .component-product-type-table__search-filter {
  background: var(--surface-panel);
  border: var(--border-hairline-w) solid var(--border-strong);
  border-radius: 0;
}

.fg-catalog .component-product-type-table .component-product-type-table__search-input {
  background: transparent;
  border: 0;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  padding: var(--space-3) var(--space-4);
}

.fg-catalog .component-product-type-table .component-product-type-table__search-input::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

/* The magnifying glass is non-text UI, where the threshold is 3:1 and the
   quiet tone clears it on every surface.                                   */
.fg-catalog .component-product-type-table .component-product-type-table__search-filter svg {
  stroke: var(--text-muted);
}

.fg-catalog .component-product-type-table .component-product-type-table__search-filter:focus-within {
  border-color: var(--border-accent);
}

/* --- The small-screen filter button --------------------------------------
   The kit's secondary button: a hairline box, the primary text tone, and the
   accent only on the border.
     --text-primary on --surface-raised  15.47:1  AAA  the label            */
.fg-catalog .component-product-type-table .component-product-type-table__modal-trigger {
  background: var(--surface-raised);
  border: var(--border-hairline-w) solid var(--border-default);
  border-radius: 0;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-btn);
  padding: var(--space-3) var(--space-5);
  text-transform: uppercase;
}

.fg-catalog .component-product-type-table .component-product-type-table__modal-trigger svg path {
  stroke: var(--text-primary);
}

.fg-catalog .component-product-type-table .component-product-type-table__modal-trigger:hover,
.fg-catalog .component-product-type-table .component-product-type-table__modal-trigger:focus-visible {
  border-color: var(--border-accent);
  background: var(--surface-panel);
}

/* ==========================================================================
   3. ATTRIBUTE FILTERS
   The desktop sidebar and the contents of the small-screen modal are the same
   markup, so both are answered once here.
   ========================================================================== */

.fg-catalog .component-product-type-table .component-product-type-table__attribute-filter-item {
  border-bottom: var(--border-hairline-w) solid var(--border-hairline);
}

/* The accordion head is a label rather than a heading, so it takes the body
   face at the label setting rather than the display face.
     --text-primary on the band ground  base 16.22:1 · raised 15.47:1  AAA  */
.fg-catalog .component-product-type-table .component-product-type-table__attribute-filter-trigger {
  background: transparent;
  border: 0;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  padding: var(--space-4) 0;
  width: 100%;
}

.fg-catalog .component-product-type-table .component-product-type-table__attribute-filter-trigger:hover,
.fg-catalog .component-product-type-table .component-product-type-table__attribute-filter-trigger:focus-visible {
  color: var(--accent);
}

.fg-catalog .component-product-type-table .component-product-type-table__attribute-filter-trigger svg path {
  stroke: var(--text-muted);
}

/* --- One filter value ----------------------------------------------------
   The component draws its own box in place of the native checkbox, which is
   how it gets a consistent control across browsers. That box is redrawn here
   rather than replaced: unchecked it is a hairline square on the band, and
   checked it is the accent fill the kit uses for a selected control, with the
   ink tick on it.
     --text-muted on the band ground  base 5.57:1 · raised 5.31:1  AA  label
     --text-on-accent on --accent     5.22:1                       AA  tick  */
.fg-catalog .component-product-type-table .component-product-type-table__attribute-filter-value-label {
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  gap: var(--space-3);
}

.fg-catalog .component-product-type-table .component-product-type-table__attribute-filter-value-label:hover {
  color: var(--text-primary);
}

.fg-catalog .component-product-type-table .component-product-type-table__attribute-filter-value-fake-checkbox {
  background: var(--surface-panel);
  border: var(--border-hairline-w) solid var(--border-default);
  border-radius: 0;
}

.fg-catalog .component-product-type-table .component-product-type-table__attribute-filter-value-checkbox:checked
  + .component-product-type-table__attribute-filter-value-fake-checkbox {
  background: var(--accent);
  border-color: var(--accent);
}

/* The focus ring is the kit's, so a keyboard user gets the same ring here as
   on every other control in the system.                                    */
.fg-catalog .component-product-type-table .component-product-type-table__attribute-filter-value-checkbox:focus-visible
  + .component-product-type-table__attribute-filter-value-fake-checkbox {
  outline: var(--focus-ring-width) solid var(--focus-ring-inner);
  outline-offset: var(--focus-ring-offset);
}

/* ==========================================================================
   4. ACTIVE FILTER CHIPS
   ========================================================================== */

.fg-catalog .component-product-type-table .component-product-type-table__filter-facets {
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

/* A chip is a selected value, so it takes the accent wash rather than a fill:
   the wash keeps the label on a surface the quiet tone clears.
     --text-primary over --accent-wash-16 on the band  above 14:1  AAA      */
.fg-catalog .component-product-type-table .component-product-type-table__filter-facet {
  background: var(--accent-wash-16);
  border: var(--border-hairline-w) solid var(--border-accent-soft);
  border-radius: 0;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-chip);
  padding: var(--space-2) var(--space-3);
  text-transform: uppercase;
}

.fg-catalog .component-product-type-table .component-product-type-table__filter-facet svg path {
  stroke: var(--text-primary);
}

.fg-catalog .component-product-type-table .component-product-type-table__filter-facets-clear {
  background: transparent;
  border: 0;
  color: var(--accent);
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-chip);
  text-transform: uppercase;
}

/* ==========================================================================
   5. THE TABLE
   The one element on these pages that can be wider than the reading column.
   The component already scrolls it inside its own box and pins the first
   column; both of those are left alone and only the paint changes.
   ========================================================================== */

.fg-catalog .component-product-type-table .component-product-type-table__table-container table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-tight);
}

/* --- Header cells --------------------------------------------------------
     --text-primary on --surface-panel  14.55:1  AAA
   The header keeps its accent rule on the right edge, which is the one piece
   of the previous design worth carrying: it is non-text UI at 3:1 and it is
   what makes a wide specification table readable across.                   */
.fg-catalog .component-product-type-table .component-product-type-table__table-container th {
  background: var(--surface-panel);
  border-right: var(--border-hairline-w) solid var(--border-accent);
  border-bottom: var(--border-hairline-w) solid var(--border-hairline-strong);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-chip);
  padding: var(--space-3) var(--space-4);
  text-transform: uppercase;
  vertical-align: top;
}

.fg-catalog .component-product-type-table .component-product-type-table__table-container th:last-of-type {
  border-right-color: transparent;
}

/* A sortable header is a control, so it says so on hover.                  */
.fg-catalog .component-product-type-table .component-product-type-table__table-container th:hover {
  color: var(--text-display);
  cursor: pointer;
}

/* --- Data cells ----------------------------------------------------------
     --text-muted on --surface-base   5.57:1  AA   odd rows
     --text-muted on --surface-panel  4.99:1  AA   even rows
   The zebra is the panel surface rather than a lighter grey, so the striping
   is a step on the kit's own surface ladder and the quiet tone clears AA on
   both steps. The row rule is the hairline the bands use.                  */
.fg-catalog .component-product-type-table .component-product-type-table__table-container td {
  background: var(--surface-base);
  border-bottom: var(--border-hairline-w) solid var(--border-hairline);
  color: var(--text-muted);
  padding: var(--space-3) var(--space-4);
  vertical-align: top;
}

.fg-catalog .component-product-type-table .component-product-type-table__table-container tr:nth-child(even) td {
  background: var(--surface-panel);
}

/* THE FIRST COLUMN IS PAINTED, NOT TRANSPARENT, AND THAT IS LOAD BEARING.
   The component pins it with position: sticky, so the rest of the row slides
   underneath it; a transparent cell would let the scrolled text show through
   the part number. It also carries the part name, so it takes the primary
   tone rather than the quiet one.
     --text-primary on --surface-panel  14.55:1  AAA                        */
.fg-catalog .component-product-type-table .component-product-type-table__table-container td:first-child {
  background: var(--surface-panel);
  color: var(--text-primary);
  font-weight: var(--fw-medium);
}

.fg-catalog .component-product-type-table .component-product-type-table__table-container tr:nth-child(even) td:first-child {
  background: var(--surface-elevated);
}

/* A link in a cell is the accent, which clears AA as small text on both cell
   surfaces (base 5.22:1, panel 4.68:1) and is never placed on the elevated
   surface, where it would not.                                             */
.fg-catalog .component-product-type-table .component-product-type-table__table-container td a {
  color: var(--accent);
  text-decoration: none;
}

.fg-catalog .component-product-type-table .component-product-type-table__table-container td a:hover,
.fg-catalog .component-product-type-table .component-product-type-table__table-container td a:focus-visible {
  text-decoration: underline;
}

/* The first column is the elevated surface on even rows, so its link takes
   the primary tone instead of the accent, which would measure 4.49:1 there. */
.fg-catalog .component-product-type-table .component-product-type-table__table-container tr:nth-child(even) td:first-child a {
  color: var(--text-primary);
  text-decoration: underline;
}

/* The scroll shadows the component draws on the pinned column are tuned for a
   white page, where a dark shadow reads as depth. On this ground the same
   shadow is invisible, so both are restated in the ink colour at the alpha
   the kit uses for its own scrims.                                         */
.fg-catalog .component-product-type-table:not(.scrolled-left-max)
  .component-product-type-table__table-container th:first-child,
.fg-catalog .component-product-type-table:not(.scrolled-left-max)
  .component-product-type-table__table-container td:first-child {
  box-shadow: 6px 0 10px -2px var(--scrim-strong);
}

.fg-catalog .component-product-type-table:not(.scrolled-right-max)
  .component-product-type-table__table-container table::after {
  box-shadow: -6px 0 10px 2px var(--scrim-strong);
}

/* ==========================================================================
   6. PAGINATION
   The script emits the view's own pager markup, .gs-pagination.
   ========================================================================== */

.fg-catalog .component-product-type-table .gs-pagination button {
  background: transparent;
  border: var(--border-hairline-w) solid var(--border-default);
  border-radius: 0;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  padding: var(--space-2) var(--space-4);
}

.fg-catalog .component-product-type-table .gs-pagination button:hover,
.fg-catalog .component-product-type-table .gs-pagination button:focus-visible {
  border-color: var(--border-accent);
  color: var(--text-primary);
}

/* The current page is the one selected control in the pager, so it takes the
   accent fill and the ink label the kit puts on every orange fill.
     --text-on-accent on --accent  5.22:1  AA                               */
.fg-catalog .component-product-type-table .gs-pagination button.active,
.fg-catalog .component-product-type-table .gs-pagination button[aria-current] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
}

/* ==========================================================================
   7. THE SMALL-SCREEN MODAL
   ========================================================================== */

.fg-catalog .component-product-type-table .component-product-type-table__modal-overlay {
  background: var(--scrim-strong);
}

.fg-catalog .component-product-type-table .component-product-type-table__modal-container {
  background: var(--surface-raised);
  border: var(--border-hairline-w) solid var(--border-hairline);
  border-radius: 0;
  color: var(--text-muted);
}

.fg-catalog .component-product-type-table .component-product-type-table__modal-header,
.fg-catalog .component-product-type-table .component-product-type-table__modal-footer {
  border-color: var(--border-hairline);
}

/* The dialog title is a heading, so it takes the display face.
     --text-display on --surface-raised  17.08:1  AAA                       */
.fg-catalog .component-product-type-table .component-product-type-table__modal-title {
  color: var(--text-display);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h4);
  letter-spacing: var(--ls-h2);
  text-transform: uppercase;
}

.fg-catalog .component-product-type-table .component-product-type-table__modal-close svg path {
  stroke: var(--text-primary);
}

/* Apply is the one primary action in the dialog and Clear is the way back, so
   they take the kit's primary and secondary buttons in that order.         */
.fg-catalog .component-product-type-table .component-product-type-table__modal-apply {
  background: var(--accent);
  border: var(--border-hairline-w) solid var(--accent);
  border-radius: 0;
  color: var(--text-on-accent);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-btn);
  padding: var(--space-3) var(--space-5);
  text-transform: uppercase;
}

.fg-catalog .component-product-type-table .component-product-type-table__modal-apply svg path {
  fill: var(--text-on-accent);
}

.fg-catalog .component-product-type-table .component-product-type-table__modal-clear {
  background: transparent;
  border: var(--border-hairline-w) solid var(--border-default);
  border-radius: 0;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-btn);
  padding: var(--space-3) var(--space-5);
  text-transform: uppercase;
}

.fg-catalog .component-product-type-table .component-product-type-table__modal-clear svg path {
  fill: var(--text-primary);
}

/* ==========================================================================
   8. FOCUS
   One ring for every control in the component, the kit's own, so keyboard
   focus is the same object here as it is everywhere else in the system.
   ========================================================================== */

.fg-catalog .component-product-type-table button:focus-visible,
.fg-catalog .component-product-type-table input:focus-visible,
.fg-catalog .component-product-type-table a:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-inner);
  outline-offset: var(--focus-ring-offset);
}