/* Inverter family page — the quick selector and the datasheet tables.
   The shared page layer (pages.css) and the site stylesheet hold everything
   else, and every value here comes from assets/css/tokens.css.

   The table class is the name the series page already uses for its own
   two-column specification table, and this sheet is loaded before
   product-series.css, so no rule below is written against .spec-table alone:
   each one is scoped to .spec-group or to the [data-spec-table] attribute. */

/* --------------------------------------------------------- Quick selector -- */
.spec-filter{display:grid;gap:20px}

.spec-filter__fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 20px;padding:22px;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md)}

.spec-field{display:block;min-width:0}
.spec-field__label{display:block;margin-bottom:7px;font-size:13px;font-weight:600;color:var(--color-navy)}
.spec-field__select{min-width:0}

/* The result line is written by the script. With JavaScript off it stays empty
   and takes no room, and the nine tables below are the whole list. */
.spec-filter__count{margin:0;font-size:14px;color:var(--color-muted)}
.spec-filter__count:empty{display:none}

/* The empty state: the one place the page says no model matches. It is hidden
   in the markup, so with JavaScript off nothing claims it. */
.spec-filter__empty{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 32px;padding:22px;background:var(--color-accent-pale);border:1px solid var(--color-line);border-radius:var(--radius-md)}
.spec-filter__empty[data-spec-empty][hidden]{display:none}
.spec-filter__empty p{margin:0;max-width:620px;font-size:15px;color:var(--color-text)}
.spec-filter__empty .btn{flex:none}

/* ----------------------------------------------------------- Overview ---- */
/* Every model on one line, under the selector: the table a buyer reads first.
   It scrolls inside its own box on a narrow screen rather than breaking the
   page. */
.spec-overview__title{margin:36px 0 14px;font-size:18px}
.spec-overview__scroll{overflow-x:auto;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md)}
.spec-overview{width:100%;min-width:700px;border-collapse:collapse;font-size:14px;text-align:left}
.spec-overview th,.spec-overview td{padding:12px 16px;border-bottom:1px solid var(--color-line);white-space:nowrap;vertical-align:middle}
.spec-overview thead th{background:var(--color-pale);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-muted)}
.spec-overview tbody th{font-weight:600;color:var(--color-navy)}
.spec-overview .num{font-variant-numeric:tabular-nums}
.spec-overview tbody tr:hover{background:var(--color-pale)}
.spec-overview tbody tr:last-child th,.spec-overview tbody tr:last-child td{border-bottom:0}
.spec-overview caption{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* A yes/no read at a glance: the yes carries the brand blue, a no or a value
   the datasheet does not state stays quiet. */
.spec-flag{font-weight:600}
.spec-flag--yes{color:var(--color-accent)}
.spec-flag--no{color:var(--color-muted)}
.spec-overview__link{color:var(--color-accent);font-weight:600;white-space:nowrap}

/* ---------------------------------------------------------- Datasheet ---- */
/* The link to the downloads page stands directly under the section heading, so
   it takes no top margin of its own. */
.spec-sheet__resource.resource-link{margin:0 0 8px}

/* One datasheet page is a collapsed row until its heading is opened: the page
   stays short enough to scan and every group is one decision away. */
.spec-group{margin-top:14px;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md)}
.spec-group[hidden]{display:none}
.spec-group__title{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 24px;margin:0;padding:18px 22px;cursor:pointer;list-style:none;font-size:16px;font-weight:600;color:var(--color-navy)}
.spec-group__title::-webkit-details-marker{display:none}
.spec-group__title:hover{color:var(--color-accent)}
.spec-group__title::after{content:"+";flex:none;font-size:20px;font-weight:400;color:var(--color-muted)}
.spec-group[open] > .spec-group__title{border-bottom:1px solid var(--color-line)}
.spec-group[open] > .spec-group__title::after{content:"–"}
.spec-group__heading{font:inherit}
.spec-group__page{display:block;margin-top:6px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-muted)}
.spec-group__body{padding:20px 18px 24px}

/* The model switcher a narrow screen reads one model at a time with. Above
   760px the whole table is visible and there is nothing to switch, so it is
   hidden at every width until the script has marked the group it belongs to. */
.spec-tabs{display:none}
.spec-tabs .tab[hidden]{display:none}
.spec-tabs .tab[aria-pressed="true"],.spec-tabs .tab[aria-pressed="true"]:hover{background:var(--color-accent);border-color:var(--color-accent);color:#fff}

/* ------------------------------------------------------------- The table -- */
/* The table scrolls inside its own box, with the header row and the parameter
   column held in place. A sticky cell can only cover what moves under it if its
   own background is opaque, and the box needs a bounded height, otherwise there
   is nothing for the header to stick to. */
.spec-group .spec-table__scroll{max-height:min(78vh,880px);overflow:auto;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md)}

/* Borders are painted on the cells rather than collapsed into the table, so a
   sticky cell carries its own border with it as the table scrolls. */
.spec-group .spec-table[data-spec-table]{width:100%;min-width:820px;border-collapse:separate;border-spacing:0;font-size:14px;text-align:left}

.spec-group .spec-table[data-spec-table] th,
.spec-group .spec-table[data-spec-table] td{padding:13px 16px;border-bottom:1px solid var(--color-line);vertical-align:top}

/* The series page's own sheet also names .spec-table and is loaded after this
   one, so the datasheet states these two for itself: its columns take their
   width from their content and from the table's own min-width, and a value is
   read in the body colour, not in the heading colour of a two-column table. */
.spec-group .spec-table[data-spec-table] th{width:auto}
.spec-group .spec-table[data-spec-table] td{color:var(--color-text)}

.spec-group .spec-table[data-spec-table] thead th{position:sticky;top:0;z-index:2;background:var(--color-pale);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-muted);white-space:nowrap;text-align:left}
.spec-group .spec-table[data-spec-table] thead th:first-child{left:0;z-index:3;border-right:1px solid var(--color-line)}

.spec-group .spec-table[data-spec-table] tbody th[scope="row"]{position:sticky;left:0;z-index:1;min-width:220px;border-right:1px solid var(--color-line);background:var(--color-surface);font-size:14px;font-weight:600;color:var(--color-navy);text-align:left}

/* The source page's own section, kept in its order and read as a band. */
.spec-group .spec-table[data-spec-table] tbody tr.spec-table__section th{background:var(--color-accent-pale);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-navy);text-align:left}

.spec-group .spec-table[data-spec-table] tbody tr:last-child th,
.spec-group .spec-table[data-spec-table] tbody tr:last-child td{border-bottom:0}

/* The caption names the models for a screen reader without taking a line of the
   page; the heading above the table is what a visitor reads. */
.spec-group .spec-table[data-spec-table] caption{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* The mark a cell the source prints as "Same" carries: the value beside it is
   the one the model named in the cell's title holds. */
.spec-table__same-mark{margin-left:5px;font-size:13px;color:var(--color-muted)}

.spec-note{margin:12px 0 0;font-size:13px;color:var(--color-muted)}

/* ----------------------------------------------------------- The handoff -- */
/* The block that stands between the tables, after the third and sixth page. */
.spec-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;margin-top:40px;padding:26px;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md)}
.spec-cta__copy{min-width:0}
.spec-cta h3{margin:0}
.spec-cta p{margin:12px 0 0;max-width:640px;font-size:15px;color:var(--color-muted)}
.spec-cta .btn{flex:none}

/* ------------------------------------------------------------ Responsive -- */
@media(max-width:1180px){
  .spec-filter__fields{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:980px){
  .spec-filter__fields{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .spec-filter__fields{grid-template-columns:1fr;padding:18px}
  .spec-filter__empty{padding:18px}
  .spec-cta{padding:20px}

  /* The switcher belongs to a narrow screen: above this width the whole table is
     visible and there is nothing to switch. */
  .spec-group[data-spec-tabbed] .spec-tabs{display:flex;margin-bottom:14px}

  /* A six-column datasheet is not squeezed onto a phone. Only once the script
     has marked the group does the table become a parameter/value list for the
     model the visitor picked; with JavaScript off it stays an ordinary table
     scrolling sideways, and the whole sheet is readable. */
  .spec-group[data-spec-tabbed] .spec-table__scroll{max-height:none;border:0;border-radius:0;background:none}
  .spec-group[data-spec-tabbed] .spec-table[data-spec-table][data-spec-active]{display:block;width:100%;min-width:0}
  .spec-group[data-spec-tabbed] .spec-table[data-spec-table][data-spec-active] thead{display:none}
  .spec-group[data-spec-tabbed] .spec-table[data-spec-table][data-spec-active] tbody{display:block}
  .spec-group[data-spec-tabbed] .spec-table[data-spec-table][data-spec-active] tr{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:2px 16px;padding:12px 16px;border-bottom:1px solid var(--color-line)}
  .spec-group[data-spec-tabbed] .spec-table[data-spec-table][data-spec-active] tr:last-child{border-bottom:0}
  .spec-group[data-spec-tabbed] .spec-table[data-spec-table][data-spec-active] tr.spec-table__section{display:block;padding:10px 16px;background:var(--color-accent-pale)}
  .spec-group[data-spec-tabbed] .spec-table[data-spec-table][data-spec-active] th,
  .spec-group[data-spec-tabbed] .spec-table[data-spec-table][data-spec-active] td{display:block;position:static;min-width:0;padding:0;border:0;background:none;white-space:normal}
  .spec-group[data-spec-tabbed] .spec-table[data-spec-table][data-spec-active] tr.spec-table__section th{background:none}
  .spec-group[data-spec-tabbed] .spec-table[data-spec-table][data-spec-active] tbody th[scope="row"]{font-size:14px;font-weight:600;color:var(--color-navy)}

  /* One model at a time: a cell that is not the active model's is out. CSS
     cannot compare one attribute with another, so the indices a table can hold
     are written out — one selector per index, which is also what keeps this
     rule out of the way of the selector's own hidden columns below. */
  .spec-group[data-spec-tabbed] .spec-table[data-spec-table][data-spec-active="0"] [data-col]:not([data-col="0"]),
  .spec-group[data-spec-tabbed] .spec-table[data-spec-table][data-spec-active="1"] [data-col]:not([data-col="1"]),
  .spec-group[data-spec-tabbed] .spec-table[data-spec-table][data-spec-active="2"] [data-col]:not([data-col="2"]),
  .spec-group[data-spec-tabbed] .spec-table[data-spec-table][data-spec-active="3"] [data-col]:not([data-col="3"]),
  .spec-group[data-spec-tabbed] .spec-table[data-spec-table][data-spec-active="4"] [data-col]:not([data-col="4"]),
  .spec-group[data-spec-tabbed] .spec-table[data-spec-table][data-spec-active="5"] [data-col]:not([data-col="5"]),
  .spec-group[data-spec-tabbed] .spec-table[data-spec-table][data-spec-active="6"] [data-col]:not([data-col="6"]),
  .spec-group[data-spec-tabbed] .spec-table[data-spec-table][data-spec-active="7"] [data-col]:not([data-col="7"]){display:none}

  /* A column the quick selector has taken out stays out here too: this rule is
     written last so that it wins wherever both of them match. */
  .spec-group[data-spec-tabbed] .spec-table[data-spec-table][data-spec-active] [data-col][hidden]{display:none}
}