/* Shared rhythm and responsive fixes for the approved COA layout. */
html:has(body.coa-experience) { scrollbar-gutter: stable; }
html:has(body.coa-experience dialog[open]) { overflow: hidden; }
body.coa-experience:has(dialog[open]) .cr-vial { animation-play-state: paused; }
.coa-experience .cl-library,.coa-experience .cx-guide,.coa-experience .cx-faq-section,.coa-experience .cx-support { width: min(1200px,calc(100% - clamp(36px,6vw,96px))); }
.cr-hero::after { background: linear-gradient(0deg,var(--bg),transparent 22%),radial-gradient(ellipse at 50% 39%,#ffffffc9,transparent 65%); }
.coa-experience .cl-library { padding-block: clamp(40px,5vw,64px) clamp(36px,4vw,56px); }
.cl-library-heading { margin-bottom: 25px; }
.cl-library-heading > p { margin-top: 12px; text-wrap: balance; }
.cl-search-panel { max-width: 580px; margin-bottom: 22px; }
.cl-search-top { margin-bottom: 9px; }
.cl-search-modes button { min-height: 40px; padding-inline: 7px; font-size: 11px; }
.cx-search-field { min-height: 52px; }
.cx-search-field button { width: 42px; height: 42px; min-height: 42px; flex-shrink: 0; }
.cx-lookup-help { margin-top: 7px; }
.cx-lookup-help p { margin: 4px 0; }
.cl-filter-row { margin-top: 18px; }
.cl-filters { flex-wrap: wrap; gap: 7px; }
.cl-filters button { min-height: 38px; padding: 9px 13px; }
.cl-library-toolbar { min-height: 54px; gap: 12px; }
.cl-library-toolbar > div { display: flex; align-items: center; gap: 12px; }
.cl-library-toolbar select { max-width: 150px; min-height: 40px; }
.cl-grid { grid-template-columns: repeat(auto-fill,minmax(min(100%,300px),1fr)); gap: clamp(16px,2vw,24px); }
/* Filtering updates immediately, without replaying the entrance on every key. */
.cl-card { animation: none; }
.cl-card h3 { text-wrap: balance; }
.cl-card-footer { margin-top: auto; }
.cl-card .cl-card-pills { margin-top: 0; padding: 16px 0 0; }
.cl-card-specimen-note { min-height: 14px; margin: 9px 0 17px; line-height: 1.75; font-size: 8px; color: #617b89; }
.cl-card-body { padding-top: 17px; }
.cl-card-description > span { color: #607b8a; }
.cl-card-pills .cl-coa-pill:disabled { opacity: .55; cursor: wait; }
.cl-report-notice { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 12px 16px; margin-bottom: 18px; border: 1px solid #d8e4ea; border-radius: 10px; background: #f0f6f8; color: #476c7d; font-size: 12px; line-height: 1.7; }
.cl-report-notice button { flex-shrink: 0; padding: 8px 12px; border: 1px solid #b9ced8; border-radius: 20px; color: #214f63; background: white; font-size: 11px; }
.cl-doc-loading { min-height: 68px; color: #69848f; }
.cl-library-note { margin-top: 28px; padding: 22px 0 0; align-items: flex-start; }
.cl-library-note > svg { flex-shrink: 0; }
.cx-guide { padding: clamp(24px,3.5vw,44px); border-radius: 20px; }
.cx-section-heading { gap: 24px; margin-bottom: 28px; }
.cx-section-heading h2 { font-size: clamp(29px,3vw,38px); }
.cx-guide-layout { gap: 22px; }
.cx-guide-panel { min-width: 0; }
.cx-guide-tabs button { min-width: 0; }
.cx-faq-section { margin-block: clamp(40px,5vw,64px); gap: clamp(24px,5vw,64px); }
.cx-faq-section h2 { font-size: clamp(30px,3vw,38px); }
.cx-faq-list summary { line-height: 1.6; gap: 18px; }
.cx-faq-list summary span { flex-shrink: 0; }
.cx-support { border-radius: 18px; padding: clamp(24px,3vw,32px); }
.cx-main { padding-bottom: clamp(40px,5vw,64px); }
.coa-viewer-heading > div { min-width: 0; }
.coa-viewer-source { overflow-wrap: anywhere; }
.coa-viewer-actions { flex-shrink: 0; }
@media(hover:none) { .cl-card:hover { transform: none; box-shadow: 0 3px 6px #16384a03; } .cl-card:hover .cl-card-image { transform: rotate(8deg); } }
@media(max-width:700px) {
  .cl-filter-row { margin-right: 0; }
  .cl-filters { justify-content: center; overflow: visible; padding: 0; }
  .cl-filters button { font-size: 10px; padding: 8px 11px; }
  .cl-library-toolbar { flex-wrap: wrap; padding-block: 8px; }
  .cl-library-toolbar > div { margin-left: auto; gap: 8px; }
  .cl-library-toolbar select { font-size: 10px; max-width: 138px; }
  .cl-report-notice { justify-content: space-between; font-size: 11px; }
  .cl-library-note { gap: 12px; }
  .cl-library-note p { min-width: 0; }
  .cl-library-note a { min-height: 32px; display: inline-flex; align-items: center; }
  .cx-guide-tabs small { display: none; }
  .cx-guide-tabs strong { font-size: 12px; margin: 0; }
  .cx-guide-tabs button { justify-content: center; min-height: 46px; padding: 12px 7px; gap: 7px; }
  .cx-section-heading { display: block; }
  .cx-section-heading > p { max-width: none; margin-top: 14px; }
  .cx-support > a { margin-left: 0; }
}
@media(max-width:380px) { .cl-card h3 { font-size: 27px; } .cl-card-art { width: 105px; } .cl-card-image { width: 80px; height: 117px; } .cl-card-orbit { width: 101px; height: 77px; } }

/* Honest, focused empty state for products without an uploaded certificate. */
.cl-preview.cl-unavailable { width: min(490px, calc(100% - 32px)); border-radius: 20px; background: #fff; border: 1px solid #dce7eb; box-shadow: 0 24px 90px #102f4033; }
.cl-unavailable .cl-preview-head { position: static; padding: 26px 28px 0; border: 0; background: #fff; backdrop-filter: none; align-items: flex-start; gap: 16px; }
.cl-unavailable .cl-preview-head .cx-eyebrow { font-size: 9px; letter-spacing: 1.6px; color: #587b88; }
.cl-unavailable .cl-preview-head h2 { font-family: inherit; font-size: 27px; line-height: 1.2; font-weight: 600; letter-spacing: -.8px; margin-top: 10px; color: #163440; }
.cl-unavailable .cl-preview-head button { width: 32px; height: 32px; font-size: 23px; background: #f6f9fa; }
.cl-unavailable #cl-preview-content { padding: 22px 28px 28px; }
.cl-empty-document { position: relative; display: grid; place-items: center; width: 68px; height: 76px; border-radius: 12px; color: #3b788a; background: #edf5f6; border: 1px solid #dbe9ed; margin-bottom: 22px; }
.cl-empty-document > svg { width: 35px; height: 42px; }
.cl-empty-document > span { position: absolute; right: -5px; bottom: 7px; width: 24px; height: 24px; display: grid; place-items: center; background: #fff; border: 1px solid #cadde3; border-radius: 50%; color: #6b8691; }
.cl-unavailable-product { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; color: #163440; font-size: 17px; font-weight: 600; }
.cl-unavailable-product span { font-size: 10px; font-weight: 500; padding: 4px 7px; border: 1px solid #dce6e9; border-radius: 4px; color: #587380; }
#cl-unavailable-description { color: #637b88; font-size: 14px; line-height: 1.7; margin: 0 0 22px; }
.cl-unavailable-help { padding: 17px 18px; border-left: 2px solid #4e8998; background: #f4f8f9; border-radius: 0 8px 8px 0; }
.cl-unavailable-help strong { color: #315665; font-size: 12px; font-weight: 600; }
.cl-unavailable-help p { margin: 6px 0 0; color: #637b88; font-size: 12px; line-height: 1.75; }
.cl-unavailable-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 24px; }
.cl-unavailable-actions a { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #194e60; color: #fff; border-radius: 7px; padding: 14px 16px; font-size: 12px; font-weight: 600; text-decoration: none; }
.cl-unavailable-actions button { border: 0; background: transparent; padding: 12px 0; font-size: 12px; color: #496b7a; }
@media(max-width:400px) { .cl-unavailable .cl-preview-head { padding: 22px 20px 0; } .cl-unavailable #cl-preview-content { padding: 20px; } .cl-unavailable .cl-preview-head h2 { font-size: 24px; } .cl-unavailable-actions { gap: 12px; } }