/* Chrome for the three standalone print documents — the technical data sheet
   and the two white papers. All three link this file. It carries the action
   bar above the sheet, and the reading rules that only bite once one of those
   documents is opened on a phone. */

.doc-actions {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(247, 244, 237, 0.97);
  border-bottom: 1px solid rgba(14, 53, 64, 0.14);
  font: 600 13px/1.2 system-ui, sans-serif;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}

/* The technical data sheet carries the site nav as well, and that nav is
   sticky at top:0 too, with a higher z-index. Left at 0 the action bar slides
   underneath it on the first scroll — on a phone that hid Back to resources
   and Download PDF completely and clipped the row below them in half — so it
   sticks below the nav instead. The white papers have no nav and keep top: 0.
   75px is .ac-nav__inner's 74px plus the nav's 1px bottom border; the nav is
   that height at every width. */
.ac-nav ~ .doc-actions,
.ac-nav ~ main .doc-actions { top: 75px; }

.doc-actions a,
.doc-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px is the touch-target floor, not a look: these are the only controls
     on the page. */
  min-height: 44px;
  padding: 0 16px;
  color: #0e3540;
  background: #fff;
  border: 1px solid rgba(14, 53, 64, 0.24);
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
  font: inherit;
}

.doc-actions a:hover,
.doc-actions a:focus-visible,
.doc-actions button:hover,
.doc-actions button:focus-visible {
  background: #0e3540;
  color: #f7f4ed;
}

/* Responsive labels. The short form is decorative — it is aria-hidden in the
   markup — and the long form stays in the accessibility tree at every width,
   so each control keeps the same accessible name however it is painted. */
.doc-actions__short { display: none; }

/* Four buttons at their full labels wrap to a 2×2 block 113px tall: on a
   844px phone that is an eighth of the screen, permanently, above a document
   the reader came to read. One row of short labels is 62px and still clears
   the 44px target floor. */
@media (max-width: 620px) {
  .doc-actions {
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 9px 12px;
    /* Safety valve for the narrowest phones, where even the short labels stop
       fitting. At 360px and up the row fits and never scrolls. */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .doc-actions::-webkit-scrollbar { display: none; }

  .doc-actions a,
  .doc-actions button {
    flex: 0 0 auto;
    padding: 0 14px;
    white-space: nowrap;
  }

  .doc-actions__full {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .doc-actions__short { display: inline; }
}

@media (max-width: 360px) {
  .doc-actions { font-size: 12px; }
  .doc-actions a,
  .doc-actions button { padding: 0 11px; }
}

/* ---------- Reading one of these documents on a phone ---------- */

/* <doc-page> sets `overflow-wrap: anywhere` on its own body wrapper below
   900px, and that inherits into the slotted document. `anywhere` is not a
   synonym for `break-word`: it also offers a break opportunity when the
   browser measures min-content, so a table column may legally collapse to the
   width of one syllable, and words split mid-letter to fill it — "Pro / per /
   ty", "Orthorhom / bic", "comparabl / e". `break-word` keeps the same
   protection against a genuinely unbreakable token overflowing the sheet
   without shrinking anything's min-content.

   Set on <doc-page>'s children, where it beats the inherited value and then
   inherits down the document. Set here rather than in doc-page.js because
   that file is a copied starter component: re-copying it overwrites the file
   wholesale, and this fix has to survive that. */
@media screen and (max-width: 900px) {
  doc-page > * { overflow-wrap: break-word; }
}

/* Wide document tables stack into per-row cards on a phone, the same pattern
   .technical-table--stack and .pg-table already use on the site pages. Scoped
   to `screen` and to the width where the columns stop being readable, so the
   sheet the Print button produces is untouched.

   Wrap such a table in <div class="doc-table"> and give every cell after the
   first a data-label naming its column. The first cell is the row's subject
   and becomes the card heading. */
@media screen and (max-width: 700px) {
  .doc-table table,
  .doc-table tbody { display: block; width: 100%; }

  /* Out of view rather than out of the document: the column headers stay in
     the accessibility tree, so a screen reader still associates each cell
     with its column and the data-label is free to be purely visual. The row
     and its cells need display:block for the same reason the site tables do
     it — a table-row inside the 1px box still lays out at its natural width
     and pushes a phantom box off the right edge. */
  .doc-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .doc-table thead tr,
  .doc-table thead th { display: block; width: 100%; }

  .doc-table tbody tr {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid hsl(var(--line, 210 25% 85%));
  }
  .doc-table tbody tr:last-child { border-bottom: 0; }

  .doc-table tbody td {
    display: block;
    width: auto;
    padding: 0 0 10px;
    border: 0;
  }
  .doc-table tbody tr td:last-child { padding-bottom: 0; }

  .doc-table tbody tr td:first-child {
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid hsl(var(--line, 210 25% 85%));
    font-family: "Fraunces", serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    color: hsl(var(--navy, 213 70% 14%));
  }

  .doc-table tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
    color: hsl(var(--muted, 215 20% 40%));
  }

  /* Chemistry and physical-property tables are Component | Value | Unit |
     Method | Status, and one stacked card per row spends five labelled lines
     saying what reads naturally as three. The master sheet has fifteen such
     rows. Here the row becomes a small two-column grid instead — the
     component on its own line, then the measurement, then where it came
     from — so the values line up down the table the way they do in the
     printed grid, and no line needs a caption reading VALUE. The <thead> is
     still in the accessibility tree, so every cell keeps its column
     association for a screen reader. */
  .doc-table--spec tbody tr {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: 3px 10px;
    align-items: baseline;
  }
  .doc-table--spec tbody td { padding: 0; }
  .doc-table--spec tbody td[data-label]::before { content: none; }
  .doc-table--spec tbody tr td:first-child { grid-column: 1 / -1; }
  /* The remaining four cells auto-place two to a line. Nothing pins them to a
     column, so when a row has no unit or no method the cell after it closes
     the gap instead of leaving a hole to hang from. */
  .doc-table--spec tbody td:nth-child(2) {
    font-weight: 600;
    color: hsl(var(--gs-navy, 213 70% 14%));
  }
  .doc-table--spec tbody td:nth-child(4),
  .doc-table--spec tbody td:nth-child(5) {
    font-size: 12.5px;
    color: hsl(var(--gs-muted, 215 20% 40%));
  }
  /* An em dash is how the printed sheet says "not applicable" inside a grid.
     With the grid gone it is noise, and taken out of flow entirely rather than
     merely hidden so it does not reserve a column. */
  .doc-table--spec tbody td.gs-nil { display: none; }

  /* A table of short numbers is the one case stacking makes worse: the master
     sheet's eight-row screen specification becomes eight cards of four lines
     to say what a grid says in a glance. That one scrolls instead, and keeps
     a keyboard-reachable focus ring because a scroll container that only
     answers to touch strands anyone using a keyboard. */
  .doc-table--scroll table,
  .doc-table--scroll tbody,
  .doc-table--scroll thead,
  .doc-table--scroll thead tr,
  .doc-table--scroll thead th,
  .doc-table--scroll tbody tr,
  .doc-table--scroll tbody td { display: revert; width: revert; }
  .doc-table--scroll thead {
    position: static;
    height: auto;
    padding: revert;
    margin: revert;
    overflow: visible;
    clip: auto;
    white-space: normal;
    border: revert;
  }
  .doc-table--scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
  /* Sized so the four columns fit a 390px phone without scrolling; the
     scroller is the fallback for narrower ones. */
  .doc-table--scroll > table { min-width: 21rem; font-size: 13px; }
  .doc-table--scroll tbody tr { padding: 0; border-bottom: 0; }
  /* Matching the base rules' `.doc-table tbody td` shape: at equal
     specificity these win only because they come later, and a selector one
     step lighter silently loses. */
  .doc-table--scroll thead th,
  .doc-table--scroll tbody td,
  .doc-table--scroll tbody tr td:first-child,
  .doc-table--scroll tbody tr td:last-child {
    margin: 0;
    padding: 6px;
    border-bottom: 1px solid hsl(var(--gs-line, 210 25% 85%));
    vertical-align: top;
  }
  .doc-table--scroll tbody tr td:first-child {
    font-family: inherit;
    font-size: inherit;
    font-weight: 500;
    line-height: inherit;
  }
  .doc-table--scroll tbody td[data-label]::before { content: none; }
  .doc-table--scroll:focus-visible {
    outline: 2px solid hsl(184 78% 29%);
    outline-offset: 2px;
  }
}

@media print {
  /* The document is the page at print: its own chrome goes, including the
     legal footer added for the web reader. */
  .doc-actions,
  .ac-skip,
  .ac-foot { display: none !important; }
}

/* Framed by the /resources reader (see document-actions.js): the reader's bar
   is the only chrome, so the page's own header, action bar and footer go. */
.is-framed .ac-skip,
.is-framed .ac-nav,
.is-framed .doc-actions,
.is-framed .ac-foot { display: none !important; }