/* ===========================================================================
   table.css — every index of rows on the site

     table.index      leaf 04, the specification index: ten lines, ONCE
     table.manifest   leaf 02, the industries manifest
     ul.locations      leaf 07, the five Texas doors
     .menu ul.index    the menu overlay's numbered index

   plus the hairline draw shared by all four.

   Rows are real table rows and real list items. No mono anywhere: the
   datasheet read comes from Archivo at "wdth" 76 with tabular-nums.

   Ten lines appear exactly once on the homepage. There is no flagship-card
   set duplicating this list — duplication is structurally impossible here.
   =========================================================================== */

/* ===== the hairline draw =================================================
   A 1px rule painted as the row's own background, so it can wipe in from the
   left over the registered --draw percentage. 380ms, 40ms stagger, --e-lay.
   A border cannot draw; a gradient can.                                     */

:where(table.index, table.manifest) tbody tr,
.locations > li,
.menu ul.index > li{
  --draw: 0%;
  background-image: linear-gradient(to right,
    var(--on-rule, var(--rule)) var(--draw),
    rgba(0, 0, 0, 0) var(--draw));
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: left bottom;
  transition: --draw calc(var(--d-row) * 1) var(--e-lay)
              calc(var(--n, 0) * var(--d-row-stagger) * 1);
}

/* --n is the row's own index. It is declared by the low-specificity rules
   below rather than in the block above, so that a 0,1,0 :nth-child selector is
   never out-specified by a 0,1,1 or 0,2,1 base selector. */

:where(table.index tbody, table.manifest tbody, .locations, .menu ul.index) > :nth-child(1){ --n: 0 }
:where(table.index tbody, table.manifest tbody, .locations, .menu ul.index) > :nth-child(2){ --n: 1 }
:where(table.index tbody, table.manifest tbody, .locations, .menu ul.index) > :nth-child(3){ --n: 2 }
:where(table.index tbody, table.manifest tbody, .locations, .menu ul.index) > :nth-child(4){ --n: 3 }
:where(table.index tbody, table.manifest tbody, .locations, .menu ul.index) > :nth-child(5){ --n: 4 }
:where(table.index tbody, table.manifest tbody, .locations, .menu ul.index) > :nth-child(6){ --n: 5 }
:where(table.index tbody, table.manifest tbody, .locations, .menu ul.index) > :nth-child(7){ --n: 6 }
:where(table.index tbody, table.manifest tbody, .locations, .menu ul.index) > :nth-child(8){ --n: 7 }
:where(table.index tbody, table.manifest tbody, .locations, .menu ul.index) > :nth-child(9){ --n: 8 }
:where(table.index tbody, table.manifest tbody, .locations, .menu ul.index) > :nth-child(10){ --n: 9 }

.leaf__body[data-live] :where(table.index, table.manifest) tbody tr,
.leaf__body[data-live] .locations > li,
.menu:not([hidden]) ul.index > li{ --draw: 100% }

html:not(.js) :where(table.index, table.manifest) tbody tr,
html:not(.js) .locations > li,
html:not(.js) .menu ul.index > li{ --draw: 100%; transition: none }

@media (prefers-reduced-motion: reduce){
  :where(table.index, table.manifest) tbody tr,
  .locations > li,
  .menu ul.index > li{ --draw: 100%; transition: none }
}

/* ===== shared row voices ================================================= */

/* the Bodoni row name — spec index, manifest industry, city, menu line */
table.index .name,
table.manifest tbody th,
.locations .city,
.menu ul.index .name{
  font-family: var(--f-display);
  font-variation-settings: "opsz" 16;
  font-weight: 400;
  font-size: var(--t-row);
  line-height: 1.16;
  letter-spacing: 0;
}

/* the Archivo tabular numeral */
table.index .num,
.menu ul.index .num{
  font-family: var(--f-label);
  font-variation-settings: "wdth" 76, "wght" 500;
  font-weight: 400;
  font-size: var(--t-num);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--stencil-2);
}

/* ===== leaf 04 — the specification index ================================= */
/* Card state: seal. --stencil-2 is the only permitted secondary ink here;
   --stencil-3 fails AA on seal (4.25) and is forbidden. */

table.index{
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

table.index tbody th,
table.index tbody td{
  padding: var(--s-3) var(--s-4);
  vertical-align: baseline;
  font-weight: 400;
}

table.index .num{
  width: 4.5ch;
  padding-left: 0;
  text-align: left;
}

table.index .range{ padding-right: 0 }

table.index .name a{
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: left 90%;
  transition: color calc(var(--d-onplate) * 1) linear,
              background-size 340ms var(--e-roll);
}

table.index tbody tr:hover .name a,
table.index .name a:hover,
table.index .name a:focus-visible{
  color: var(--seal-blue);
  background-size: 100% 1px;
}

table.index .forms{
  font-family: var(--f-label);
  font-variation-settings: "wdth" 108, "wght" 400;
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--stencil-2);
}

table.index .range{
  text-align: right;
  font-family: var(--f-label);
  font-variation-settings: "wdth" 88, "wght" 500;
  font-size: var(--t-num);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1.5;
  color: var(--stencil-2);
  white-space: nowrap;
}

table.index .range .sub{
  display: block;
  font-variation-settings: "wdth" 88, "wght" 400;
  color: var(--stencil-2);
  opacity: 0.82;
}

/* Only two numeric ranges are verified (10in-60in hand/machine film, 3in/5in
   banding). Every unconfirmed range is an empty cell carrying
   data-confirm="spec" and stays empty until the client confirms it. The dash
   is a typographic placeholder, never an invented gauge. */
table.index .range[data-confirm]:empty::after{
  content: "\2014";
  color: var(--rule-strong);
}

/* ===== the industries manifest ============================================
   NOT CURRENTLY RENDERED ANYWHERE. Leaf 02 carried this five-row matrix of
   failure modes per industry until the leaf was rewritten around what makes PBE
   different; the five industry names survive there as a single caption line. The
   component is kept because the content is good and wants a home — a spec or
   industries page — not because anything imports it. Delete it if that never
   happens.

   Its secondary ink used to be hard-coded to --stencil-2, a light-ground grey
   that measures about 1.5:1 on carbon; it reads --on-soft now, which leaf.css
   resolves per plate, so wherever it lands next it follows that ground instead of
   assuming kraft. */

table.manifest{
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

table.manifest caption{
  caption-side: top;
  text-align: left;
  padding-bottom: var(--s-3);
  font-family: var(--f-label);
  font-variation-settings: "wdth" 100, "wght" 400;
  font-size: var(--t-label);
  letter-spacing: 0;
  color: var(--on-soft, var(--stencil-2));
}

table.manifest thead th{
  padding: 0 var(--s-4) var(--s-2) 0;
  font-family: var(--f-label);
  font-variation-settings: "wdth" 88, "wght" 600;
  font-weight: 400;
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: 0.024em;
  color: var(--on-soft, var(--stencil-2));
  border-bottom: 1px solid var(--on-rule, var(--rule));
  white-space: nowrap;
}

table.manifest thead th:last-child{ padding-right: 0 }

table.manifest tbody th,
table.manifest tbody td{
  padding: var(--s-3) var(--s-4) var(--s-3) 0;
  vertical-align: baseline;
  font-weight: 400;
}

table.manifest tbody td:last-child{ padding-right: 0 }

table.manifest tbody td{
  font-family: var(--f-label);
  font-variation-settings: "wdth" 108, "wght" 400;
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--on-soft, var(--stencil-2));
}

/* ===== leaf 07 — the five Texas doors ==================================== */
/* Card state: foam — the one ground where --stencil-3 is legal (4.84:1). */

.locations{
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.locations > li{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-3) 0;
}

.locations .role{
  font-family: var(--f-label);
  font-variation-settings: "wdth" 108, "wght" 400;
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--stencil-3);
  text-align: right;
}

/* ===== the menu overlay's numbered index ================================= */
/* Card state: seal. Geometry and the row stagger belong to menu.css; this is
   the row's typography and its hairline. */

.menu ul.index{
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu ul.index > li{ padding: var(--s-2) 0 }

.menu ul.index > li > a{
  display: grid;
  grid-template-columns: 4.5ch 1fr auto;
  align-items: baseline;
  gap: var(--s-4);
  color: inherit;
  text-decoration: none;
  transition: color calc(var(--d-onplate) * 1) linear;
}

.menu ul.index > li > a:hover,
.menu ul.index > li > a:focus-visible{ color: var(--seal-blue) }

.menu ul.index .desc{
  text-align: right;
  font-family: var(--f-label);
  font-variation-settings: "wdth" 108, "wght" 400;
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--stencil-2);
}

/* ===== narrow cards ====================================================== */
/* The tables keep their semantics and every string; only the arrangement
   changes. Nothing is hidden — a buyer on a phone gets the same forms and the
   same ranges. */

@media (max-width: 560px){
  table.index tbody tr{
    display: grid;
    grid-template-columns: 4ch 1fr;
    column-gap: var(--s-3);
    padding: var(--s-3) 0;
  }
  table.index tbody th,
  table.index tbody td{ padding: 0 }
  table.index .num{
    grid-row: 1 / span 3;
    width: auto;
    align-self: start;
    padding-top: 0.35em;
  }
  table.index .name,
  table.index .forms,
  table.index .range{ grid-column: 2 }
  table.index .forms{ padding-top: var(--s-1) }
  table.index .range{
    text-align: left;
    white-space: normal;
    padding-top: var(--s-1);
  }

  table.manifest thead{
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  table.manifest tbody tr{
    display: grid;
    grid-template-columns: 1fr;
    row-gap: var(--s-1);
    padding: var(--s-3) 0;
  }
  table.manifest tbody th,
  table.manifest tbody td{ padding: 0 }

  .locations > li{
    display: grid;
    grid-template-columns: 1fr;
    row-gap: var(--s-1);
  }
  .locations .role{ text-align: left }

  .menu ul.index > li > a{
    grid-template-columns: 4ch 1fr;
    row-gap: var(--s-1);
    column-gap: var(--s-3);
  }
  .menu ul.index .num{ grid-row: 1 / span 2; align-self: start; padding-top: 0.35em }
  .menu ul.index .name,
  .menu ul.index .desc{ grid-column: 2 }
  .menu ul.index .desc{ text-align: left }
}