/**
 * coverage.css: the /coverage page, ported from the design system's `ui_kits/website/Actorly Coverage.dc.html` (ACT-246).
 * Tokens only; sizes the tokens do not name are rem (1rem = 16px). Only transform and opacity move (public/js/coverage.js).
 * Without JavaScript every row shows and the filter buttons are not drawn; reduced motion gets the same page with no movement.
 */
.cov { overflow-x: clip; }
.cov h1, .cov h2 { margin: 0; font-variation-settings: var(--act-display-wdth); font-weight: 700; line-height: .92; letter-spacing: -.058em; }
.cov h1 { font-size: clamp(2.75rem, 6.6vw, 6.75rem); }
.cov h2 { font-size: clamp(2.5rem, 5.4vw, 5.5rem); line-height: .94; letter-spacing: -.055em; }
.cov p { margin: 0; }
.cov-in { max-width: 77.5rem; margin: 0 auto; }

.cov-head { padding: 11.25rem 1.5rem 5rem; }
.cov-head .cov-in { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.5rem; }
.cov-lede { font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.55; color: var(--act-body); max-width: 41.25rem; text-wrap: pretty; }

.cov-table-sec { padding: 0 1.5rem 8.75rem; }
.cov-table-sec .cov-in { display: flex; flex-direction: column; gap: 1.25rem; }
.cov-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
html:not(.js) .cov-filters { display: none; }
.cov-filters { display: contents; }
.cov-filter { height: 2.625rem; padding: 0 1.125rem; border: 0; border-radius: var(--act-radius-pill); font: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer; background: var(--act-white); color: var(--act-ink); box-shadow: var(--act-ring); transition: background .25s ease, color .25s ease; }
.cov-filter[aria-pressed="true"] { background: var(--act-ink); color: var(--act-paper); }
.cov-filter:focus-visible { outline: 2px solid var(--act-ember-text); outline-offset: 3px; }
.cov-count { margin-left: auto; font-size: .9375rem; color: var(--act-body); }

.cov-card { background: var(--act-white); border-radius: 1.625rem; box-shadow: var(--act-ring), 0 2.5rem 5rem -2.5rem rgba(18,16,14,.25); overflow: hidden; }
.cov-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); gap: .875rem; align-items: center; padding: .875rem 1.5rem; border-top: thin solid var(--act-line-soft); font-size: .9375rem; background: var(--act-white); }
.cov-row[hidden] { display: none; }
.cov-row.cov-hd { background: var(--act-table-head); border-top: 0; padding: 1rem 1.5rem; font-size: .875rem; font-weight: 700; }
.cov-name { font-weight: 650; }
.cov-when { color: var(--act-body); }
.cov-lab { display: none; }
.cov-chip { display: inline-block; line-height: 1.3; max-width: 100%; padding: .25rem .625rem; border-radius: .75rem; font-size: .8125rem; font-weight: 600; background: var(--act-likely-bg); color: var(--act-likely-fg); }
.cov-chip.is-yes { background: var(--act-confirmed-bg); color: var(--act-confirmed-fg); }
.cov-chip.is-notyet { background: var(--act-notyet-bg); color: var(--act-notyet-fg); }
.cov-chip.is-notpossible { background: var(--act-notpossible-bg); color: var(--act-notpossible-fg); }
.cov-foot { margin-top: .375rem; font-size: .875rem; color: var(--act-muted); }

.cov-gloss { background: var(--act-white); padding: 9.375rem 1.5rem; }
.cov-gloss .cov-in { display: flex; flex-direction: column; gap: 2.75rem; }
.cov-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); gap: 1rem; }
.cov-g { background: var(--act-paper); border-radius: 1.5rem; padding: 1.625rem; display: flex; flex-direction: column; gap: .75rem; }
.cov-g .cov-chip { align-self: flex-start; padding: .25rem .75rem; border-radius: var(--act-radius-pill); }
.cov-g .cov-chip.is-notpossible { background: var(--act-paper); color: var(--act-muted); box-shadow: inset 0 0 0 .0625rem var(--act-outline); }
.cov-g span:last-child, .cov-g p { font-size: 1rem; line-height: 1.6; color: var(--act-body); }
.cov-g b { font-size: 1.0625rem; font-weight: 700; }

.cov-who { padding: 9.375rem 1.5rem; }
.cov-who .cov-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26.25rem), 1fr)); gap: 3.5rem; align-items: center; }
.cov-who-copy { display: flex; flex-direction: column; gap: 1.375rem; }
.cov-who-copy p { font-size: 1.125rem; line-height: 1.6; color: var(--act-body); max-width: 48ch; }
.cov-ladder { background: var(--act-white); border-radius: 1.625rem; box-shadow: var(--act-shadow-demo); padding: 1.75rem; display: flex; flex-direction: column; gap: .75rem; font-family: Inter, -apple-system, "Segoe UI", sans-serif; color: var(--act-admin-ink); }
.cov-rung { display: flex; align-items: center; gap: .875rem; padding: 1rem; border-radius: 1rem; background: var(--act-admin-head); }
.cov-rung > span:first-child { flex: 1; }
.cov-rung b { font-weight: 650; display: block; font-size: .9375rem; }
.cov-rung small { font-size: .8125rem; color: var(--act-admin-muted); }
.cov-rung .cov-chip { border-radius: var(--act-radius-pill); padding: .25rem .75rem; }
.cov-rung .cov-chip.is-unknown { background: var(--act-unknown-bg); color: var(--act-unknown-fg); }
.cov-ladder > small { font-size: .8125rem; color: var(--act-admin-muted); padding: .25rem .25rem 0; }

.cov-close { background: var(--act-ink); color: var(--act-paper); padding: 8.75rem 1.5rem; }
.cov-close .cov-in { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.5rem; }
.cov-close p { font-size: 1.1875rem; line-height: 1.55; color: var(--act-body-on-ink); max-width: 33.75rem; }
.cov-ctas { display: flex; gap: .625rem; flex-wrap: wrap; justify-content: center; }
.cov-ctas a { height: 3.375rem; padding: 0 1.75rem; border-radius: var(--act-radius-pill); font-size: 1rem; font-weight: 700; display: flex; align-items: center; text-decoration: none; transition: background .25s ease, color .25s ease; }
.cov-ctas .is-ember { gap: .625rem; }
.cov-glyph { display: inline-block; width: 1rem; height: 1rem; flex: none; background: url('/assets/third-party/shopify-glyph-black.png') center/contain no-repeat; }
.cov-ctas .is-ember { background: var(--act-button-inverse-bg); color: var(--act-button-inverse-fg); }
.cov-ctas .is-ember:hover { background: var(--act-paper); }
.cov-ctas .is-ghost { padding: 0 1.5rem; font-weight: 600; box-shadow: inset 0 0 0 .0625rem var(--act-ink-outline); color: var(--act-paper); }
.cov-ctas .is-ghost:hover { color: var(--act-ember-hover-on-ink); }
.cov :focus-visible { outline: 2px solid var(--act-ember-text); outline-offset: 3px; }

@media (max-width: 47.5rem) {
  .cov-row.cov-hd { display: none; }
  .cov-row { grid-template-columns: 1fr 1fr; }
  .cov-row > :nth-child(1), .cov-row > :nth-child(2) { grid-column: 1 / -1; }
  .cov-lab { display: block; position: absolute; width: .0625rem; height: .0625rem; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* the specimen shows chips alone on a phone; the column name stays for screen readers */
  .cov-row > span { position: relative; }
  .cov-head { padding-top: 8.5rem; }
}

/* ---------------------------------------------------------------- phones (ACT-272)
   Section rhythm sized for a 390px screen, 44px filter targets, the column name visible in every cell (a chip alone says "Yes" and not what). */
@media (max-width: 40rem) {
  .cov h1 { font-size: clamp(2.5rem, 12.5vw, 3.25rem); }
  .cov h2 { font-size: clamp(2.125rem, 10vw, 2.75rem); }
  .cov-head { padding: 7rem 1.25rem 2.25rem; }
  .cov-head .cov-in { gap: 1.125rem; }
  .cov-table-sec { padding: 0 1rem 4rem; }
  .cov-bar { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .cov-filters { display: contents; }
  html:not(.js) .cov-bar { display: block; }
  .cov-filter { height: 2.75rem; padding: 0 .75rem; font-size: .875rem; }
  .cov-count { grid-column: 1 / -1; margin: .25rem 0 0; text-align: left; font-size: .875rem; }
  .cov-card { border-radius: 1.25rem; }
  .cov-row { grid-template-columns: 1fr 1fr; gap: .5rem 1rem; padding: .875rem 1.125rem 1rem; }
  .cov-row > :nth-child(1) { font-size: 1.0625rem; }
  .cov-row > :nth-child(2) { font-size: .875rem; margin-top: -.375rem; }
  .cov-lab { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; margin-bottom: .125rem; font-size: .6875rem; font-weight: 700; letter-spacing: .02em; color: var(--act-muted); }
  .cov-row > span[role="cell"]:nth-child(n+3) { display: flex; flex-direction: column; align-items: flex-start; }
  .cov-foot { padding: 0 .25rem; }
  .cov-gloss { padding: 4rem 1.25rem; }
  .cov-gloss .cov-in { gap: 1.75rem; }
  .cov-g { padding: 1.25rem; border-radius: 1.25rem; }
  .cov-who { padding: 4rem 1.25rem; }
  .cov-who .cov-in { gap: 2rem; }
  .cov-who-copy p { font-size: 1.0625rem; }
  .cov-ladder { padding: 1rem; border-radius: 1.25rem; }
  .cov-rung { padding: .875rem; gap: .625rem; }
  .cov-close { padding: 4.5rem 1.25rem; }
  .cov-close p { font-size: 1.0625rem; }
  .cov-ctas { flex-direction: column; align-self: stretch; }
  .cov-ctas a { justify-content: center; width: 100%; }
}