/* Responsive safeguards, loaded last so they win the cascade: nothing can
   force a horizontal scrollbar, headings wrap instead of overflowing, and the
   display scale is capped on small screens. On wide screens none of the caps
   engage, so the design is untouched. */

/* No element may create a horizontal scrollbar. overflow-x: clip (not hidden)
   keeps position: sticky and off-canvas drawers working. */
html, body { max-width: 100%; overflow-x: clip; }

/* Media and embeds never exceed their container. */
img, svg, video, canvas, iframe, embed, object, figure, picture {
  max-width: 100%;
}
img, video, canvas { height: auto; }
pre, code, kbd, samp { overflow-x: auto; max-width: 100%; }

/* Headings and display lockups wrap instead of running off-screen. A
   white-space: nowrap that would push a headline off the edge is overridden;
   on wide screens the line still fits, so nothing wraps unnecessarily. */
h1, h2, h3, h4, h5, h6,
[class*="lockup"], [class*="display"], [class*="headline"], [class*="title"],
[class*="hero"] h1, [class*="hero"] h2 {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}
[class*="lockup"], [class*="lockup"] > * { white-space: normal !important; }

/* Long unbroken strings (URLs, emails, ids) wrap rather than overflow. On
   everything that can hold words, not a list of the elements that usually do:
   an email address in a <strong> inside a card was 192px of text in a 155px
   box, and <strong> was not on the list. The property only does anything when
   a word would otherwise overflow, so it costs a well-set page nothing. */
p, li, dd, dt, blockquote, figcaption, address, a, span, td, th,
div, strong, b, em, i, small, label, output, time, cite, abbr, code, summary,
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* Grid and flex children may shrink below their content so a single wide
   child cannot force the whole track past the viewport. */
[class*="grid"] > *, [class*="row"] > *, [class*="flex"] > *,
[class*="cols"] > *, [class*="columns"] > * { min-width: 0; }

/* An only child takes the whole row, so a grid declaring more columns than it
   has children cannot squeeze its one child into the narrow one. Ignored
   outright where the parent is not a grid; media is left out, because an image
   told to span two columns stretches. */
:not(img):not(picture):not(svg):not(video):not(canvas):only-child {
  grid-column: 1 / -1;
}

/* Wide data tables reflow into one card per row on a narrow screen, so
   nothing has to be dragged sideways to be read. Each value is printed under
   the column heading it belongs to. Where the headings could not be read off
   the table the layout is left alone and the wrapper scrolls instead. */
/* One page becomes the next instead of blinking into it. Where the browser
   does not support it nothing happens, and a visitor who prefers reduced
   motion gets plain navigation. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: .28s;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* The wrapper is asked about its own width rather than the window's, because
   the two are not the same thing: a cookie table on a delivered site sat in a
   598px column on a 1920px screen, so no window breakpoint could tell that
   its five columns had 120px each. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  container-type: inline-size;
}
/* No minimum width: a table allowed to compress wraps its columns and fits,
   and the scrollbar that used to appear on a wide screen was this wrapper
   holding the table out to its natural width. */
.table-scroll > table { width: 100%; }
@media (max-width: 48rem) {
  .table-scroll > table { font-size: .94em; }
}
/* A table the site stacked by hand goes back to being a table. A stacking
   rule written without labels on the cells is unreadable, and it also sets
   `width: 100%` on them, which is right for a block and ruinous for a cell: a
   table is as wide as its cells ask to be, so every cell asking for the whole
   table makes the table ask for the whole table again. Taking back only the
   display left a two-column table a million pixels wide, with the row
   headings on the phone and every value off the side of it — so the widths
   are taken back with it. */
.table-scroll > table,
.table-scroll > table > thead, .table-scroll > table > tbody,
.table-scroll > table > tfoot, .table-scroll > table tr,
.table-scroll > table th, .table-scroll > table td { display: revert; }
.table-scroll > table th, .table-scroll > table td {
  inline-size: auto;
  min-inline-size: 0;
}

/* Then the stacking rules, which are generated below this string: one block
   per column count, because how narrow is too narrow depends on how many
   columns have to fit in it. */

/* Cap the display scale on phones so no headline is bigger than the screen.
   These override the modular scale only where it is too large to fit. */
@media (max-width: 30rem) {
  :root {
    --step-7: clamp(2.2rem, 9vw, 3rem);
    --step-6: clamp(2rem, 8vw, 2.7rem);
    --step-5: clamp(1.8rem, 7vw, 2.4rem);
    --step-4: clamp(1.55rem, 6vw, 2.05rem);
    --step-3: clamp(1.35rem, 5vw, 1.8rem);
  }
}
@media (min-width: 30.01rem) and (max-width: 48rem) {
  :root {
    --step-7: clamp(2.8rem, 8vw, 4.6rem);
    --step-6: clamp(2.5rem, 7vw, 4rem);
    --step-5: clamp(2.2rem, 6vw, 3.4rem);
  }
}

/* Touch targets stay usable. */
@media (pointer: coarse) {
  a.btn, button, [role="button"], .btn,
  input[type="submit"], input[type="button"] { min-height: 44px; }
}

/* One card per row, once there is no longer room for the columns. Asked of the
   wrapper rather than the window: the two are not the same width. */
@container (max-width: 26rem) {
  .table-scroll.table-stack.tcols-3 > table,
  .table-scroll.table-stack.tcols-3 > table > tbody,
  .table-scroll.table-stack.tcols-3 > table > tbody > tr,
  .table-scroll.table-stack.tcols-3 > table > tbody > tr > td,
  .table-scroll.table-stack.tcols-3 > table > tbody > tr > th {
    display: block;
    inline-size: auto;
    /* The site's own minimum has to go with the table layout. A table told to
       be at least 580px wide stays 580px wide as a stack of cards too, and
       the wrapper goes on scrolling: measured at 390px, cards 570px wide in a
       355px box. */
    min-inline-size: 0 !important;
  }
  /* The heading row goes, rather than being hidden the way a screen-reader
     label is hidden. Taking the table out of table layout has already taken
     its headings away from assistive technology — a block is not a table and
     the cell/heading association does not survive it — so a clipped `thead`
     would be an empty gesture that still laid its cells out at full width
     underneath the cards. Each value carries its own heading instead. */
  .table-scroll.table-stack.tcols-3 > table > thead { display: none; }
  .table-scroll.table-stack.tcols-3 > table > tbody > tr {
    margin-block-end: .75rem;
    padding: .2rem .25rem;
    border: 1px solid;
    border-color: color-mix(in srgb, currentColor 20%, transparent);
    border-radius: .5rem;
  }
  .table-scroll.table-stack.tcols-3 > table > tbody > tr > td {
    padding-block: .4rem;
    padding-inline: .7rem;
  }
  /* The label above the value rather than beside it: at 320px a label column
     wide enough to read leaves the value too narrow to. */
  .table-scroll.table-stack.tcols-3 > table > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: .82em;
    font-weight: 600;
    letter-spacing: .02em;
    opacity: .68;
  }
  .table-scroll.table-stack.tcols-3 > table > tbody > tr > td:empty { display: none; }
}
@container (max-width: 35rem) {
  .table-scroll.table-stack.tcols-4 > table,
  .table-scroll.table-stack.tcols-4 > table > tbody,
  .table-scroll.table-stack.tcols-4 > table > tbody > tr,
  .table-scroll.table-stack.tcols-4 > table > tbody > tr > td,
  .table-scroll.table-stack.tcols-4 > table > tbody > tr > th {
    display: block;
    inline-size: auto;
    /* The site's own minimum has to go with the table layout. A table told to
       be at least 580px wide stays 580px wide as a stack of cards too, and
       the wrapper goes on scrolling: measured at 390px, cards 570px wide in a
       355px box. */
    min-inline-size: 0 !important;
  }
  /* The heading row goes, rather than being hidden the way a screen-reader
     label is hidden. Taking the table out of table layout has already taken
     its headings away from assistive technology — a block is not a table and
     the cell/heading association does not survive it — so a clipped `thead`
     would be an empty gesture that still laid its cells out at full width
     underneath the cards. Each value carries its own heading instead. */
  .table-scroll.table-stack.tcols-4 > table > thead { display: none; }
  .table-scroll.table-stack.tcols-4 > table > tbody > tr {
    margin-block-end: .75rem;
    padding: .2rem .25rem;
    border: 1px solid;
    border-color: color-mix(in srgb, currentColor 20%, transparent);
    border-radius: .5rem;
  }
  .table-scroll.table-stack.tcols-4 > table > tbody > tr > td {
    padding-block: .4rem;
    padding-inline: .7rem;
  }
  /* The label above the value rather than beside it: at 320px a label column
     wide enough to read leaves the value too narrow to. */
  .table-scroll.table-stack.tcols-4 > table > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: .82em;
    font-weight: 600;
    letter-spacing: .02em;
    opacity: .68;
  }
  .table-scroll.table-stack.tcols-4 > table > tbody > tr > td:empty { display: none; }
}
@container (max-width: 44rem) {
  .table-scroll.table-stack.tcols-5 > table,
  .table-scroll.table-stack.tcols-5 > table > tbody,
  .table-scroll.table-stack.tcols-5 > table > tbody > tr,
  .table-scroll.table-stack.tcols-5 > table > tbody > tr > td,
  .table-scroll.table-stack.tcols-5 > table > tbody > tr > th {
    display: block;
    inline-size: auto;
    /* The site's own minimum has to go with the table layout. A table told to
       be at least 580px wide stays 580px wide as a stack of cards too, and
       the wrapper goes on scrolling: measured at 390px, cards 570px wide in a
       355px box. */
    min-inline-size: 0 !important;
  }
  /* The heading row goes, rather than being hidden the way a screen-reader
     label is hidden. Taking the table out of table layout has already taken
     its headings away from assistive technology — a block is not a table and
     the cell/heading association does not survive it — so a clipped `thead`
     would be an empty gesture that still laid its cells out at full width
     underneath the cards. Each value carries its own heading instead. */
  .table-scroll.table-stack.tcols-5 > table > thead { display: none; }
  .table-scroll.table-stack.tcols-5 > table > tbody > tr {
    margin-block-end: .75rem;
    padding: .2rem .25rem;
    border: 1px solid;
    border-color: color-mix(in srgb, currentColor 20%, transparent);
    border-radius: .5rem;
  }
  .table-scroll.table-stack.tcols-5 > table > tbody > tr > td {
    padding-block: .4rem;
    padding-inline: .7rem;
  }
  /* The label above the value rather than beside it: at 320px a label column
     wide enough to read leaves the value too narrow to. */
  .table-scroll.table-stack.tcols-5 > table > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: .82em;
    font-weight: 600;
    letter-spacing: .02em;
    opacity: .68;
  }
  .table-scroll.table-stack.tcols-5 > table > tbody > tr > td:empty { display: none; }
}
@container (max-width: 52rem) {
  .table-scroll.table-stack.tcols-6 > table,
  .table-scroll.table-stack.tcols-6 > table > tbody,
  .table-scroll.table-stack.tcols-6 > table > tbody > tr,
  .table-scroll.table-stack.tcols-6 > table > tbody > tr > td,
  .table-scroll.table-stack.tcols-6 > table > tbody > tr > th {
    display: block;
    inline-size: auto;
    /* The site's own minimum has to go with the table layout. A table told to
       be at least 580px wide stays 580px wide as a stack of cards too, and
       the wrapper goes on scrolling: measured at 390px, cards 570px wide in a
       355px box. */
    min-inline-size: 0 !important;
  }
  /* The heading row goes, rather than being hidden the way a screen-reader
     label is hidden. Taking the table out of table layout has already taken
     its headings away from assistive technology — a block is not a table and
     the cell/heading association does not survive it — so a clipped `thead`
     would be an empty gesture that still laid its cells out at full width
     underneath the cards. Each value carries its own heading instead. */
  .table-scroll.table-stack.tcols-6 > table > thead { display: none; }
  .table-scroll.table-stack.tcols-6 > table > tbody > tr {
    margin-block-end: .75rem;
    padding: .2rem .25rem;
    border: 1px solid;
    border-color: color-mix(in srgb, currentColor 20%, transparent);
    border-radius: .5rem;
  }
  .table-scroll.table-stack.tcols-6 > table > tbody > tr > td {
    padding-block: .4rem;
    padding-inline: .7rem;
  }
  /* The label above the value rather than beside it: at 320px a label column
     wide enough to read leaves the value too narrow to. */
  .table-scroll.table-stack.tcols-6 > table > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: .82em;
    font-weight: 600;
    letter-spacing: .02em;
    opacity: .68;
  }
  .table-scroll.table-stack.tcols-6 > table > tbody > tr > td:empty { display: none; }
}
@container (max-width: 61rem) {
  .table-scroll.table-stack.tcols-7 > table,
  .table-scroll.table-stack.tcols-7 > table > tbody,
  .table-scroll.table-stack.tcols-7 > table > tbody > tr,
  .table-scroll.table-stack.tcols-7 > table > tbody > tr > td,
  .table-scroll.table-stack.tcols-7 > table > tbody > tr > th {
    display: block;
    inline-size: auto;
    /* The site's own minimum has to go with the table layout. A table told to
       be at least 580px wide stays 580px wide as a stack of cards too, and
       the wrapper goes on scrolling: measured at 390px, cards 570px wide in a
       355px box. */
    min-inline-size: 0 !important;
  }
  /* The heading row goes, rather than being hidden the way a screen-reader
     label is hidden. Taking the table out of table layout has already taken
     its headings away from assistive technology — a block is not a table and
     the cell/heading association does not survive it — so a clipped `thead`
     would be an empty gesture that still laid its cells out at full width
     underneath the cards. Each value carries its own heading instead. */
  .table-scroll.table-stack.tcols-7 > table > thead { display: none; }
  .table-scroll.table-stack.tcols-7 > table > tbody > tr {
    margin-block-end: .75rem;
    padding: .2rem .25rem;
    border: 1px solid;
    border-color: color-mix(in srgb, currentColor 20%, transparent);
    border-radius: .5rem;
  }
  .table-scroll.table-stack.tcols-7 > table > tbody > tr > td {
    padding-block: .4rem;
    padding-inline: .7rem;
  }
  /* The label above the value rather than beside it: at 320px a label column
     wide enough to read leaves the value too narrow to. */
  .table-scroll.table-stack.tcols-7 > table > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: .82em;
    font-weight: 600;
    letter-spacing: .02em;
    opacity: .68;
  }
  .table-scroll.table-stack.tcols-7 > table > tbody > tr > td:empty { display: none; }
}


/* Consent bar — bounded so it cannot cover the headline. */
.cookie-banner {
  max-height: 20vh;
  overflow: auto;
  top: auto;
  bottom: 0;
}
@media (max-width: 30rem) {
  .cookie-banner { max-height: 38vh; }
}

/* MEASURED: words found printed outside their own card */
/* printed 18px outside its card */
a.footer-link { white-space: normal !important; }
/* printed 536px outside its card */
a.nav-link { white-space: normal !important; }
/* printed 14px outside its card */
button.nav-toggle span { overflow-wrap: anywhere !important; }
/* printed 57px outside its card */
label.form-checkbox-label { overflow-wrap: anywhere !important; }
/* printed 37px outside its card */
label.form-checkbox-label a { overflow-wrap: anywhere !important; }
/* printed 462px outside its card */
span.header-dateline-item span { white-space: normal !important; }
/* printed 58px outside its card */
table.spec-table strong { overflow-wrap: anywhere !important; }

/* MEASURED: tables whose cells came out too narrow to read */
/* 3 columns measured unreadable in a 628px box, where the threshold was 26rem */
@container (max-width: 628px) {
  .table-scroll.table-stack.tcols-3 > table,
  .table-scroll.table-stack.tcols-3 > table > tbody,
  .table-scroll.table-stack.tcols-3 > table > tbody > tr,
  .table-scroll.table-stack.tcols-3 > table > tbody > tr > td,
  .table-scroll.table-stack.tcols-3 > table > tbody > tr > th {
    display: block;
    inline-size: auto;
    /* The site's own minimum has to go with the table layout. A table told to
       be at least 580px wide stays 580px wide as a stack of cards too, and
       the wrapper goes on scrolling: measured at 390px, cards 570px wide in a
       355px box. */
    min-inline-size: 0 !important;
  }
  /* The heading row goes, rather than being hidden the way a screen-reader
     label is hidden. Taking the table out of table layout has already taken
     its headings away from assistive technology — a block is not a table and
     the cell/heading association does not survive it — so a clipped `thead`
     would be an empty gesture that still laid its cells out at full width
     underneath the cards. Each value carries its own heading instead. */
  .table-scroll.table-stack.tcols-3 > table > thead { display: none; }
  .table-scroll.table-stack.tcols-3 > table > tbody > tr {
    margin-block-end: .75rem;
    padding: .2rem .25rem;
    border: 1px solid;
    border-color: color-mix(in srgb, currentColor 20%, transparent);
    border-radius: .5rem;
  }
  .table-scroll.table-stack.tcols-3 > table > tbody > tr > td {
    padding-block: .4rem;
    padding-inline: .7rem;
  }
  /* The label above the value rather than beside it: at 320px a label column
     wide enough to read leaves the value too narrow to. */
  .table-scroll.table-stack.tcols-3 > table > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: .82em;
    font-weight: 600;
    letter-spacing: .02em;
    opacity: .68;
  }
  .table-scroll.table-stack.tcols-3 > table > tbody > tr > td:empty { display: none; }
}
/* 4 columns measured unreadable in a 764px box, where the threshold was 35rem */
@container (max-width: 764px) {
  .table-scroll.table-stack.tcols-4 > table,
  .table-scroll.table-stack.tcols-4 > table > tbody,
  .table-scroll.table-stack.tcols-4 > table > tbody > tr,
  .table-scroll.table-stack.tcols-4 > table > tbody > tr > td,
  .table-scroll.table-stack.tcols-4 > table > tbody > tr > th {
    display: block;
    inline-size: auto;
    /* The site's own minimum has to go with the table layout. A table told to
       be at least 580px wide stays 580px wide as a stack of cards too, and
       the wrapper goes on scrolling: measured at 390px, cards 570px wide in a
       355px box. */
    min-inline-size: 0 !important;
  }
  /* The heading row goes, rather than being hidden the way a screen-reader
     label is hidden. Taking the table out of table layout has already taken
     its headings away from assistive technology — a block is not a table and
     the cell/heading association does not survive it — so a clipped `thead`
     would be an empty gesture that still laid its cells out at full width
     underneath the cards. Each value carries its own heading instead. */
  .table-scroll.table-stack.tcols-4 > table > thead { display: none; }
  .table-scroll.table-stack.tcols-4 > table > tbody > tr {
    margin-block-end: .75rem;
    padding: .2rem .25rem;
    border: 1px solid;
    border-color: color-mix(in srgb, currentColor 20%, transparent);
    border-radius: .5rem;
  }
  .table-scroll.table-stack.tcols-4 > table > tbody > tr > td {
    padding-block: .4rem;
    padding-inline: .7rem;
  }
  /* The label above the value rather than beside it: at 320px a label column
     wide enough to read leaves the value too narrow to. */
  .table-scroll.table-stack.tcols-4 > table > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: .82em;
    font-weight: 600;
    letter-spacing: .02em;
    opacity: .68;
  }
  .table-scroll.table-stack.tcols-4 > table > tbody > tr > td:empty { display: none; }
}
/* 5 columns measured unreadable in a 738px box, where the threshold was 44rem */
@container (max-width: 738px) {
  .table-scroll.table-stack.tcols-5 > table,
  .table-scroll.table-stack.tcols-5 > table > tbody,
  .table-scroll.table-stack.tcols-5 > table > tbody > tr,
  .table-scroll.table-stack.tcols-5 > table > tbody > tr > td,
  .table-scroll.table-stack.tcols-5 > table > tbody > tr > th {
    display: block;
    inline-size: auto;
    /* The site's own minimum has to go with the table layout. A table told to
       be at least 580px wide stays 580px wide as a stack of cards too, and
       the wrapper goes on scrolling: measured at 390px, cards 570px wide in a
       355px box. */
    min-inline-size: 0 !important;
  }
  /* The heading row goes, rather than being hidden the way a screen-reader
     label is hidden. Taking the table out of table layout has already taken
     its headings away from assistive technology — a block is not a table and
     the cell/heading association does not survive it — so a clipped `thead`
     would be an empty gesture that still laid its cells out at full width
     underneath the cards. Each value carries its own heading instead. */
  .table-scroll.table-stack.tcols-5 > table > thead { display: none; }
  .table-scroll.table-stack.tcols-5 > table > tbody > tr {
    margin-block-end: .75rem;
    padding: .2rem .25rem;
    border: 1px solid;
    border-color: color-mix(in srgb, currentColor 20%, transparent);
    border-radius: .5rem;
  }
  .table-scroll.table-stack.tcols-5 > table > tbody > tr > td {
    padding-block: .4rem;
    padding-inline: .7rem;
  }
  /* The label above the value rather than beside it: at 320px a label column
     wide enough to read leaves the value too narrow to. */
  .table-scroll.table-stack.tcols-5 > table > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: .82em;
    font-weight: 600;
    letter-spacing: .02em;
    opacity: .68;
  }
  .table-scroll.table-stack.tcols-5 > table > tbody > tr > td:empty { display: none; }
}