/* COA library — uses the shared Atlantic Porcelain palette from styles.css. */
body.coa-experience { background: var(--bg); color: var(--ink-deep); }
.coa-experience .bg-blob, .coa-experience::before, .coa-experience::after { display: none; }
.cx-main { padding-bottom: 80px; }
.cx-main *, .cl-preview *, .cx-lot-dialog * { box-sizing: border-box; }
.cx-main [hidden], .cx-lot-dialog [hidden] { display: none !important; }
.cx-main h1, .cx-main h2, .cx-main h3, .cl-preview h2, .cx-lot-dialog h2, .cx-lot-dialog h3 { font-family: Manrope, Inter, sans-serif; font-weight: 500; }
.cx-main button, .cx-main input, .cx-main select, .cl-preview button, .cx-lot-dialog button { font: inherit; }
.cx-main button, .cl-preview button, .cx-lot-dialog button { cursor: pointer; }
.cx-main :is(button,a,input,select,summary,[tabindex]):focus-visible, :is(.cl-preview,.cx-lot-dialog) :is(button,a,[tabindex]):focus-visible { outline: 2px solid var(--data); outline-offset: 4px; }
.cx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.cx-eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--muted-2); font-size: 10px; font-weight: 600; line-height: 1.5; letter-spacing: 1.65px; }
.cx-eyebrow > i { width: 6px; height: 6px; border-radius: 50%; background: var(--data); box-shadow: 0 0 0 4px #67828e14; }
.cl-primary { display: inline-flex; align-items: center; justify-content: space-between; gap: 35px; min-height: 50px; padding: 0 24px; border-radius: 7px; background: var(--accent); color: white; text-decoration: none; font-size: 13px; transition: background .2s, transform .2s; }
.cl-primary:hover { background: var(--accent-2); transform: translateY(-2px); }
/* Editorial hero and the document illustration. */
.cl-hero { position: relative; overflow: clip; background: radial-gradient(ellipse at 78% 33%, var(--hero-2) 0, transparent 51%), linear-gradient(115deg,var(--bg),var(--hero-1) 55%,var(--hero-2)); border-bottom: 1px solid #d2dce0; }
.cl-hero-inner { max-width: 1240px; width: calc(100% - 96px); margin: auto; min-height: 550px; display: grid; grid-template-columns: 1.12fr 1fr; align-items: center; gap: 20px; }
.cl-hero-copy { position: relative; z-index: 1; padding: 50px 0; }
.cl-hero h1 { font-size: clamp(48px,5vw,73px); letter-spacing: -.05em; line-height: 1.05; margin: 25px 0 24px; }
.cl-hero h1 em { display: inline-block; font-family: Georgia,serif; font-weight: 400; color: var(--data); letter-spacing: -.06em; }
.cl-hero-copy > p { color: var(--muted); font-size: 15px; line-height: 1.85; margin: 0; }
.cl-hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 30px; }
.cl-hero-actions button { display: inline-flex; align-items: center; gap: 16px; min-height: 48px; border: 0; background: transparent; padding: 0; color: var(--accent); font-size: 12px; }
.cl-hero-actions button:hover { text-decoration: underline; text-underline-offset: 5px; }
.cl-hero-caption { display: flex; align-items: center; gap: 11px; font-size: 10px; color: var(--muted-2); margin-top: 31px; }
.cl-caption-line { width: 26px; height: 1px; background: #94a6af; }
.cl-hero-art { height: 510px; position: relative; isolation: isolate; }
.cl-art-orbit { position: absolute; top: 48%; left: 50%; border: 1px solid #9db4be55; border-radius: 50%; transform: translate(-50%,-50%); width: 430px; height: 430px; }
.cl-art-orbit-two { width: 340px; height: 340px; border-style: dashed; border-color: #9db4be4a; }
.cl-art-orbit-one::after { content: ''; position: absolute; top: 13%; right: 13%; width: 7px; height: 7px; background: #7b98a5; border: 2px solid var(--hero-1); border-radius: 50%; }
.cl-art-coordinate { position: absolute; top: 30px; right: 7px; font-size: 8px; letter-spacing: 1.5px; color: #718892; }
.cl-art-paper { position: absolute; width: 254px; height: 336px; top: 84px; right: 28px; padding: 25px; background: linear-gradient(135deg,var(--surface),var(--surface)); border: 1px solid #fff; border-radius: 5px; box-shadow: 8px 14px 0 -6px #aabfc966, 13px 24px 45px #3b566320; transform: rotate(9deg); }
.cl-paper-brand { display: flex; align-items: center; justify-content: space-between; font-size: 20px; font-weight: 600; letter-spacing: -1px; padding-bottom: 17px; border-bottom: 1px solid #d3dde2; }
.cl-paper-brand span { font-size: 5px; letter-spacing: 1px; color: var(--muted-2); }
.cl-paper-title { font-family: Georgia,serif; font-size: 27px; line-height: 1.13; margin-top: 19px; }
.cl-paper-title span { display: block; font: 6px Inter,sans-serif; letter-spacing: 1px; margin-top: 12px; color: #7b8a91; }
.cl-paper-fields { display: grid; grid-template-columns: 1fr 35px; gap: 11px; margin-top: 22px; align-items: center; }
.cl-paper-fields span { font-size: 6px; letter-spacing: .7px; color: var(--muted-2); }
.cl-paper-fields i { height: 3px; border-radius: 3px; background: #c3cfd5; }
.cl-art-paper svg { width: 100%; height: 58px; margin-top: 17px; }
.cl-art-paper > small { display: block; margin-top: 8px; font-size: 5px; color: #809098; letter-spacing: .5px; }
.cl-art-vial { position: absolute; width: 265px; height: 330px; object-fit: contain; top: 101px; left: -3px; transform: rotate(-15deg); filter: drop-shadow(9px 22px 17px #374d5720); z-index: 1; }
.cl-art-label { position: absolute; display: flex; align-items: center; gap: 12px; bottom: 56px; right: 1px; padding: 15px 21px 15px 14px; border: 1px solid #fff9; background: #ffffffba; backdrop-filter: blur(12px); border-radius: 10px; box-shadow: 0 8px 30px #3a5f700c; z-index: 2; }
.cl-label-icon { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid #bfd1d9; border-radius: 50%; color: var(--data); }
.cl-art-label small { display: block; font-size: 6px; letter-spacing: 1.3px; color: #768992; margin-bottom: 5px; }
.cl-art-label strong { font-size: 11px; font-weight: 500; color: var(--accent); }
.cl-art-index { position: absolute; bottom: 16px; left: 20px; font-size: 7px; letter-spacing: 1.1px; color: #758c96; }
.cl-hero-foot { display: flex; align-items: center; gap: 46px; max-width: 1240px; width: calc(100% - 96px); margin: auto; border-top: 1px solid #94adb840; padding: 23px 0; }
.cl-hero-foot > span { font-size: 11px; color: var(--muted-2); }
.cl-hero-foot b { font: 9px ui-monospace,monospace; color: #8b9da5; margin-right: 12px; }
.cl-hero-foot a { margin-left: auto; font-size: 11px; color: var(--accent); text-decoration: none; }
.cl-hero-foot a span { margin-left: 22px; }
/* Library search and navigation. */
.cl-library, .cx-guide, .cx-faq-section, .cx-support { width: calc(100% - 96px); max-width: 1200px; margin-inline: auto; }
.cl-library { padding: 65px 0 74px; scroll-margin-top: 112px; }
.cl-library-heading { display: flex; justify-content: space-between; align-items: end; gap: 36px; margin-bottom: 31px; }
.cl-library-heading h2 { font-size: 40px; line-height: 1.15; letter-spacing: -1.65px; margin: 14px 0 0; }
.cl-library-heading h2 br { display: none; }
.cl-library-heading h2 em { font-family: Georgia,serif; font-weight: 400; color: var(--data); }
.cl-library-heading > p { font-size: 12px; line-height: 1.85; color: var(--muted); margin: 0 0 3px; }
.cl-search-panel { background: #fff; border: 1px solid var(--line); border-radius: 15px; padding: 20px 24px 14px; box-shadow: 0 5px 20px #30414903; }
.cl-search-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 17px; }
.cl-search-modes { display: flex; gap: 5px; }
.cl-search-modes button { background: none; border: 1px solid transparent; border-radius: 6px; color: var(--muted-2); font-size: 11px; padding: 10px 13px; min-height: 36px; }
.cl-search-modes button[aria-pressed=true] { background: var(--bg-soft); color: var(--accent); border-color: #d4e0e5; }
.cl-search-hint { font-family: Georgia,serif; font-style: italic; font-size: 14px; color: #8798a0; }
.cl-search-hint span { margin-left: 9px; }
.cx-search-field { display: flex; align-items: center; gap: 15px; padding: 5px 5px 5px 19px; border: 1px solid #d7dee1; background: var(--bg); border-radius: 9px; transition: border-color .2s, box-shadow .2s; }
.cx-search-field:focus-within { border-color: var(--data); box-shadow: 0 0 0 3px #768b9512; }
.cx-search-field > svg { width: 21px; height: 21px; color: #8999a0; flex-shrink: 0; }
.cx-search-field input { width: 100%; min-width: 0; padding: 14px 0; border: 0; outline: 0 !important; background: transparent; color: var(--ink-deep); font-size: 15px; }
.cx-search-field input::placeholder { color: var(--muted-2); }
.cx-search-field kbd { border: 1px solid #d8e0e4; border-radius: 4px; color: #95a3a9; font: 12px Inter,sans-serif; padding: 3px 7px; }
.cx-search-field button { display: inline-flex; align-items: center; justify-content: space-between; flex-shrink: 0; gap: 32px; border: 0; border-radius: 6px; min-height: 45px; padding: 12px 20px; background: var(--accent); color: white; font-size: 12px; }
.cx-search-field button:hover { background: var(--accent-2); }
.cx-lookup-help { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 6px; }
.cx-lookup-help p { font-size: 10px; line-height: 1.7; color: var(--muted-2); margin: 0; }
.cx-lookup-help button { background: none; border: 0; font-size: 10px; padding: 10px 0; color: var(--muted-2); min-height: 36px; }
.cx-input-error:empty { display: none; }
.cx-input-error { color: var(--danger); font-size: 12px; margin: 12px 0; }
.cx-search-field:has([aria-invalid=true]) { border-color: var(--danger); }
.cx-recents { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 7px; }
.cx-recents > div:first-child { display: flex; justify-content: space-between; align-items: center; font-size: 9px; letter-spacing: .8px; color: var(--muted-2); }
.cx-recents button { border: 0; background: none; color: var(--muted-2); font-size: 11px; padding: 8px; }
#cx-recent-list { display: flex; gap: 6px; flex-wrap: wrap; }
#cx-recent-list button { border: 1px solid #dae2e6; border-radius: 4px; overflow-wrap: anywhere; max-width: 100%; background: var(--bg-soft); }
.cl-filter-row { margin: 27px 0 6px; }
.cl-filters { display: flex; gap: 7px; flex-wrap: wrap; }
.cl-filters button { display: inline-flex; align-items: center; gap: 9px; border-radius: 30px; border: 1px solid #dce3e6; padding: 9px 14px; min-height: 36px; background: transparent; font-size: 11px; color: var(--muted); white-space: nowrap; }
.cl-filters button[aria-pressed=true] { background: var(--accent); border-color: var(--accent); color: #fff; }
.cl-filters button span { font-size: 9px; opacity: .65; }
.cl-filters button:hover { border-color: var(--data); }
.cl-library-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 60px; }
.cl-library-toolbar p { margin: 0; font-size: 11px; color: var(--muted-2); }
.cl-library-toolbar > div { display: flex; gap: 19px; align-items: center; }
.cl-library-toolbar button { background: none; border: 0; padding: 10px 0; font-size: 10px; color: var(--muted-2); }
.cl-library-toolbar select { max-width: 160px; border: 0; padding: 10px 22px 10px 6px; color: var(--muted-2); font-size: 11px; background: transparent; cursor: pointer; }
/* Product document cards. */
.cl-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; align-items: stretch; scroll-margin-top: 110px; }
.cl-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #dae2e5; border-radius: 13px; background: #fff; transition: transform .25s, box-shadow .25s, border-color .25s; }
.cl-card:hover { transform: translateY(-4px); border-color: #a8b8bf; box-shadow: 0 15px 28px #34444c0a; }
.cl-card-top { display: flex; align-items: center; gap: 19px; padding: 22px 21px; min-height: 155px; background: linear-gradient(120deg,var(--bg-soft),var(--bg-soft)); border-bottom: 1px solid #dfe7ea; }
.cl-card-image { width: 86px; height: 108px; flex-shrink: 0; overflow: hidden; border-radius: 8px; box-shadow: 0 3px 10px #3d505907; }
.cl-card-image :is(img,svg) { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-card-info { min-width: 0; }
.cl-card-category { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted-2); margin-bottom: 10px; line-height: 1.7; }
.cl-card h3 { font-size: 23px; letter-spacing: -.85px; line-height: 1.2; margin: 0 0 11px; overflow-wrap: anywhere; }
.cl-card-dose { font-size: 10px; color: var(--muted-2); display: flex; gap: 9px; align-items: center; }
.cl-card-dose i { width: 3px; height: 3px; background: #98aab2; border-radius: 50%; }
.cl-card-body { padding: 18px 21px 20px; display: flex; flex-direction: column; flex: 1; }
.cl-card-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 10px; color: var(--muted-2); }
.cl-card-status > span { display: flex; align-items: center; gap: 7px; }
.cl-card-status svg { width: 14px; height: 14px; color: #8498a1; }
.cl-card-status small { font-size: 8px; color: #88969c; letter-spacing: 1px; }
.cl-card-description { font-size: 12px; line-height: 1.8; color: var(--muted); margin: 11px 0 16px; }
.cl-card-actions { display: flex; align-items: stretch; gap: 9px; margin-top: auto; }
.cl-card-actions button { display: flex; align-items: center; justify-content: space-between; gap: 15px; width: 100%; border: 1px solid #d0dade; background: var(--bg-soft); color: var(--accent); border-radius: 6px; min-height: 43px; padding: 10px 13px; font-size: 11px; }
.cl-card-actions button:hover { background: var(--hero-1); border-color: #9db2bc; }
.cl-card-actions svg { width: 15px; height: 15px; }
.cl-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.cl-card-bottom a { color: var(--muted-2); font-size: 11px; text-decoration: none; padding-block: 5px; }
.cl-card-bottom a:hover { text-decoration: underline; text-underline-offset: 4px; }
.cl-card-bottom a:last-child { color: var(--muted); }
.cl-library-note { display: flex; align-items: center; gap: 16px; padding: 22px 0; margin-top: 20px; border-top: 1px solid var(--line); }
.cl-library-note > svg { width: 22px; height: 22px; flex-shrink: 0; color: #8498a1; }
.cl-library-note p { color: var(--muted); font-size: 11px; line-height: 1.8; max-width: 670px; margin: 0; }
.cl-library-note strong { color: var(--muted-2); font-weight: 500; }
.cl-library-note a { margin-left: auto; font-size: 11px; color: var(--accent); white-space: nowrap; text-decoration: none; }
.cl-library-note a span { margin-left: 18px; }
.cl-empty { text-align: center; padding: 50px 24px; border: 1px dashed #b4c4cb; border-radius: 12px; background: var(--bg-soft); }
.cl-empty > span { color: #879ca6; font-size: 40px; }
.cl-empty h3 { font-size: 26px; letter-spacing: -.8px; margin: 7px 0 13px; }
.cl-empty p { font-size: 13px; line-height: 1.8; color: var(--muted); max-width: 390px; margin: 0 auto 15px; }
.cl-empty button { border: 0; background: none; color: var(--accent); font-size: 12px; padding: 12px; }
/* Inline batch request and document viewer. */
.cx-results { margin-top: 24px; padding: 26px; background: var(--bg-soft); border: 1px solid #ccdae0; border-radius: 12px; scroll-margin-top: 115px; }
.cx-result-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.cx-result-top h2 { margin: 9px 0 0; font-size: 30px; letter-spacing: -1px; }
.cx-result-top > button { border: 0; background: none; color: var(--muted-2); padding: 10px 0; font-size: 11px; }
.cx-no-match p { max-width: 680px; color: var(--muted); font-size: 13px; line-height: 1.9; overflow-wrap: anywhere; }
.cx-no-match strong { color: var(--ink-deep); }
.cx-no-match > a { display: inline-flex; padding: 13px 18px; border-radius: 6px; background: var(--accent); color: #fff; font-size: 12px; text-decoration: none; }
.cx-result-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 18px 0; }
.cx-result-tools :is(button,a) { border: 1px solid #c8d4d9; border-radius: 5px; padding: 11px 14px; color: var(--accent); font-size: 12px; background: #fff9; text-decoration: none; }
.cx-action-status { font-size: 12px; overflow-wrap: anywhere; color: var(--muted-2); }
.cx-action-status:empty { display: none; }
.cl-preview { width: min(960px,calc(100% - 40px)); max-height: calc(100dvh - 60px); padding: 0; border: 1px solid #d4dee2; border-radius: 17px; background: var(--surface); color: var(--ink-deep); overflow: auto; overscroll-behavior: contain; }
.cl-preview::backdrop, .cx-lot-dialog::backdrop { background: #15242ba8; backdrop-filter: blur(6px); }
body:has(.cl-preview[open]), body:has(.cx-lot-dialog[open]) { overflow: hidden; }
.cl-preview-head { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 2; padding: 22px 28px; border-bottom: 1px solid #d4dee3; background: #f4f7f9f5; backdrop-filter: blur(10px); }
.cl-preview-head h2 { font-size: 23px; letter-spacing: -.7px; margin: 7px 0 0; }
.cl-preview-head button, .cx-dialog-head button { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #d1dde2; border-radius: 50%; background: #fff; color: var(--muted-2); font-size: 25px; flex-shrink: 0; }
#cl-preview-content { padding: 24px 28px 30px; }
.cx-result-notice { padding: 16px 19px; border: 1px solid var(--warn-border); border-radius: 7px; color: var(--warn-text); background: var(--warn-bg); font-size: 12px; line-height: 1.85; }
.cx-result-notice strong { display: block; color: var(--warn-text); margin-bottom: 3px; }
.cl-preview .coa-doc { box-shadow: none; }
.cl-preview .coa-table caption { text-align: left; font-size: 11px; color: var(--warn-text); padding-block: 12px; }
.cl-preview .table-scroll { overflow: auto; }
/* Reading guide. */
.cx-guide { padding: 46px; border-radius: 18px; background: var(--accent-2); color: #e8f0f4; scroll-margin-top: 120px; position: relative; overflow: hidden; }
.cx-guide .cx-eyebrow { color: #99b2bd; }
.cx-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 34px; }
.cx-section-heading h2 { font-size: 39px; line-height: 1.15; letter-spacing: -1.5px; margin: 15px 0 0; color: #e7eff3; }
.cx-section-heading > p { color: #adbdc5; font-size: 12px; line-height: 1.8; max-width: 215px; margin: 0; }
.cx-guide-layout { display: grid; grid-template-columns: 235px 1fr; gap: 30px; }
.cx-guide-tabs { display: flex; flex-direction: column; gap: 9px; }
.cx-guide-tabs button { display: flex; align-items: center; gap: 15px; flex: 1; padding: 21px 17px; border: 1px solid transparent; border-radius: 8px; color: #adbec6; background: #ffffff04; text-align: left; }
.cx-guide-tabs button[aria-selected=true] { background: #dae7ed15; border-color: #8eaebd40; color: #e0eaef; }
.cx-guide-tabs button > span { font: 10px ui-monospace,monospace; opacity: .55; }
.cx-guide-tabs strong { font-size: 15px; font-weight: 500; display: block; margin-bottom: 6px; }
.cx-guide-tabs small { font-size: 10px; opacity: .75; }
.cx-guide-tabs i { margin-left: auto; font-style: normal; }
.cx-guide-panel { min-height: 297px; display: grid; grid-template-columns: 1fr .75fr; align-items: center; gap: 35px; position: relative; padding: 32px; background: linear-gradient(120deg,#ffffff08,#b5ceda10); border: 1px solid #a6bec924; border-radius: 10px; }
.cx-panel-eyebrow { font-size: 8px; letter-spacing: 1.5px; color: #a4bac4; }
.cx-guide-panel h3 { color: #e1ebf0; font-size: 31px; line-height: 1.13; letter-spacing: -1px; margin: 17px 0; }
.cx-guide-panel p { font-size: 12px; line-height: 1.85; color: #afc0c8; margin: 0; }
.cx-guide-diagram { min-width: 0; }
.cx-batch-diagram { display: flex; flex-direction: column; align-items: center; }
.cx-batch-diagram > div { width: 100%; max-width: 200px; border: 1px solid #a3bcc763; padding: 17px; border-radius: 7px; background: #c2d7e00b; transform: rotate(-3deg); }
.cx-batch-diagram > div:last-child { transform: rotate(3deg); }
.cx-batch-diagram span { display: block; font-size: 7px; letter-spacing: 1px; color: #9cb3be; margin-bottom: 9px; }
.cx-batch-diagram strong { font-size: 17px; font-weight: 400; letter-spacing: 2px; color: #d3e2e9; }
.cx-batch-diagram > i { height: 25px; width: 1px; background: #99b6c370; }
.cx-diagram-note { position: absolute; bottom: 13px; right: 18px; font-size: 7px; color: #92a8b2; }
.cx-spectrum { width: 100%; height: 150px; }
.cx-spectrum .grid { stroke: #dae6ec1c; stroke-width: 1; }
.cx-spectrum .trace { stroke: #b8d0db; stroke-width: 2; fill: none; }
.cx-spectrum .ghost { stroke: #94b3c288; stroke-width: 1.5; stroke-dasharray: 4 5; fill: none; }
.cx-plot-label { display: block; text-align: center; font-size: 7px; letter-spacing: 1px; color: #9aadb6; }
.cx-faq-section { display: grid; grid-template-columns: 1fr 1.45fr; gap: 90px; margin-block: 80px; }
.cx-faq-section h2 { font-size: 38px; letter-spacing: -1.5px; line-height: 1.2; margin: 16px 0; }
.cx-faq-section > div > p { max-width: 250px; font-size: 13px; color: var(--muted); line-height: 1.85; }
.cx-faq-list { border-top: 1px solid var(--line); }
.cx-faq-list details { border-bottom: 1px solid var(--line); }
.cx-faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; color: var(--accent); font-size: 13px; line-height: 1.6; cursor: pointer; list-style: none; }
.cx-faq-list summary::-webkit-details-marker { display: none; }
.cx-faq-list summary span { font-size: 21px; color: #82949d; }
.cx-faq-list details[open] summary span { transform: rotate(45deg); }
.cx-faq-list details p { color: var(--muted); font-size: 12px; line-height: 1.9; margin: 0 20px 20px 0; }
.cx-faq-list details > a { display: inline-block; color: var(--accent); font-size: 12px; margin-bottom: 20px; }
.cx-support { display: flex; align-items: center; gap: 25px; padding: 32px; border: 1px solid #c9d9e0; border-radius: 13px; background: var(--bg-soft); }
.cx-support-icon { padding: 16px; width: 58px; height: 58px; border-radius: 50%; border: 1px solid #c0d2da; color: #708a96; }
.cx-support-icon svg { width: 26px; height: 26px; }
.cx-support h2 { font-size: 27px; letter-spacing: -1px; margin: 8px 0; }
.cx-support p { color: var(--muted); font-size: 12px; margin: 0; line-height: 1.85; }
.cx-support > a { display: flex; align-items: center; gap: 27px; min-height: 47px; margin-left: auto; background: var(--accent); padding: 14px 20px; color: white; border-radius: 6px; font-size: 12px; text-decoration: none; white-space: nowrap; }
/* Lot helper. */
.cx-lot-dialog { width: min(580px,calc(100% - 32px)); max-height: calc(100dvh - 40px); overflow: auto; padding: 30px; border: 1px solid #d1dde3; border-radius: 15px; color: var(--ink-deep); background: var(--bg); }
.cx-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.cx-lot-dialog h2 { font-size: 34px; line-height: 1.15; letter-spacing: -1px; margin: 22px 0; }
.cx-label-guide { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 26px; padding: 24px; background: var(--bg-soft); border-radius: 9px; }
.cx-label-guide h3 { font-size: 19px; line-height: 1.25; margin: 12px 0; }
.cx-label-guide p { font-size: 12px; line-height: 1.8; color: var(--muted-2); }
.cx-label-guide small { font-size: 9px; color: #768d97; }
.cx-label-vial { width: 110px; transform: rotate(-5deg); }
.cx-label-cap { width: 92px; height: 22px; margin: auto; border: 1px solid #a1aeb4; border-radius: 5px 5px 2px 2px; background: repeating-linear-gradient(90deg,#bdc6ca 0 3px,#dee6ea 3px 5px); }
.cx-label-glass { padding: 27px 5px 22px; border: 1px solid #adc4ce; border-radius: 16px 16px 12px 12px; background: linear-gradient(90deg,#d3e1e7,var(--bg),#c9dae2); }
.cx-label-paper { background: #fff; border: 1px solid #cfdadf; padding: 15px 7px; }
.cx-label-paper strong { display: block; font-size: 18px; letter-spacing: -.8px; }
.cx-label-paper span { display: block; font-size: 6px; letter-spacing: .7px; margin: 11px 0; }
.cx-label-paper small { display: block; font-size: 6px; }
.cx-label-paper b { display: block; margin-top: 15px; font-size: 11px; color: var(--accent); border: 1px dashed #8ba9b7; padding: 5px; }
.cx-dialog-action { display: flex; justify-content: space-between; width: 100%; border: 0; border-radius: 6px; margin-top: 21px; padding: 15px 18px; color: #fff; background: var(--accent); font-size: 13px; }
.cx-dialog-help { display: block; text-align: center; color: var(--muted-2); font-size: 11px; margin-top: 16px; }
@media (prefers-reduced-motion:no-preference) {
  .cl-hero-copy { animation: cl-appear .8s both; }
  .cl-art-paper { animation: cl-paper-in 1s both; }
  .cl-art-vial { animation: cl-vial-in 1.15s both; }
  .cx-panel-enter .cx-guide-panel-copy { animation: cl-appear .3s both; }
}
@keyframes cl-appear { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@keyframes cl-paper-in { from { opacity: 0; transform: rotate(4deg) translateY(20px); } to { opacity: 1; transform: rotate(9deg); } }
@keyframes cl-vial-in { from { opacity: 0; transform: rotate(-22deg) translateY(20px); } to { opacity: 1; transform: rotate(-15deg); } }
@media (max-width:1100px) {
  .cl-hero-inner { width: calc(100% - 64px); min-height: 510px; grid-template-columns: 1.1fr 1fr; }
  .cl-hero h1 { font-size: 58px; } .cl-hero-art { height: 480px; }
  .cl-art-paper { width: 220px; height: 315px; padding: 21px; right: 0; top: 72px; }
  .cl-art-vial { width: 225px; height: 281px; left: -25px; top: 112px; }
  .cl-art-orbit-one { width: 365px; height: 365px; } .cl-art-orbit-two { width: 290px; height: 290px; }
  .cl-art-label { right: -5px; bottom: 56px; } .cl-art-coordinate { right: 0; }
  .cl-hero-foot { width: calc(100% - 64px); gap: 28px; }
  .cl-library, .cx-guide, .cx-faq-section, .cx-support { width: calc(100% - 64px); }
  .cl-library-heading h2 { font-size: 35px; } .cl-library-heading h2 br { display: block; }
  .cl-card-top { padding: 18px; gap: 13px; } .cl-card-image { width: 69px; height: 87px; }
  .cl-card h3 { font-size: 20px; } .cl-card-body { padding: 17px; }
  .cl-card-category { font-size: 7px; letter-spacing: .6px; }
  .cl-grid { gap: 15px; }
  .cx-guide { padding: 35px; } .cx-guide-layout { grid-template-columns: 200px 1fr; gap: 20px; }
  .cx-guide-panel { gap: 22px; padding: 25px; } .cx-faq-section { gap: 50px; }
}
@media (max-width:800px) {
  .cl-hero-inner { grid-template-columns: 1fr 1fr; gap: 0; min-height: 455px; }
  .cl-hero h1 { font-size: 47px; } .cl-hero-copy > p { font-size: 13px; }
  .cl-hero .cx-eyebrow { font-size: 8px; letter-spacing: 1px; }
  .cl-hero-art { height: 420px; margin-right: -20px; }
  .cl-art-paper { width: 186px; height: 285px; padding: 18px; right: 0; top: 49px; }
  .cl-paper-title { font-size: 24px; } .cl-paper-brand { font-size: 17px; }
  .cl-paper-fields { gap: 8px; } .cl-art-paper svg { height: 45px; }
  .cl-art-vial { width: 182px; height: 227px; top: 111px; left: -17px; }
  .cl-art-orbit-one { width: 285px; height: 285px; } .cl-art-orbit-two { width: 235px; height: 235px; }
  .cl-art-label { bottom: 52px; padding: 12px; gap: 7px; } .cl-art-label strong { font-size: 9px; }
  .cl-art-coordinate { top: 17px; font-size: 6px; } .cl-art-index { bottom: 21px; font-size: 6px; }
  .cl-hero-actions { align-items: flex-start; flex-direction: column; gap: 8px; margin-top: 24px; }
  .cl-hero-actions button { min-height: 35px; font-size: 11px; }
  .cl-hero-caption { font-size: 9px; margin-top: 18px; }
  .cl-hero-foot { gap: 22px; } .cl-hero-foot > span { font-size: 9px; } .cl-hero-foot b { margin-right: 7px; }
  .cl-hero-foot a { font-size: 9px; } .cl-hero-foot a span { margin-left: 5px; }
  .cl-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cl-library-heading > p { max-width: 245px; font-size: 11px; } .cl-library-heading > p br { display: none; }
  .cl-library-note { flex-wrap: wrap; } .cl-library-note p { flex: 1; } .cl-library-note a { margin-left: 38px; }
  .cx-section-heading h2 { font-size: 33px; } .cx-section-heading > p { max-width: 165px; font-size: 11px; }
  .cx-guide-layout { grid-template-columns: 1fr; } .cx-guide-tabs { flex-direction: row; gap: 8px; }
  .cx-guide-tabs button { padding: 16px 12px; gap: 9px; } .cx-guide-tabs i { display: none; }
  .cx-guide-tabs strong { font-size: 13px; } .cx-guide-tabs small { font-size: 9px; }
  .cx-guide-panel { min-height: 280px; padding: 30px; }
  .cx-faq-section { grid-template-columns: 1fr; gap: 20px; margin-block: 55px; }
  .cx-faq-section > div > p { max-width: none; }
  .cx-support { flex-wrap: wrap; gap: 18px; } .cx-support > a { margin-left: 76px; }
}
@media (max-width:580px) {
  .cx-main { padding-bottom: 38px; }
  .cl-hero-inner { width: calc(100% - 40px); display: flex; flex-direction: column; }
  .cl-hero-copy { padding: 37px 0 0; width: 100%; }
  .cl-hero .cx-eyebrow { font-size: 8px; letter-spacing: 1.35px; }
  .cl-hero h1 { font-size: clamp(43px,10.8vw,61px); margin: 23px 0 20px; }
  .cl-hero-copy > p { font-size: 13px; line-height: 1.8; } .cl-desktop-break { display: none; }
  .cl-hero-actions { flex-direction: row; align-items: center; gap: 19px; margin-top: 25px; }
  .cl-primary { font-size: 11px; gap: 18px; padding: 0 16px; min-height: 46px; }
  .cl-hero-actions button { font-size: 10px; gap: 6px; min-height: 44px; }
  .cl-hero-caption { display: none; }
  .cl-hero-art { width: 315px; max-width: 100%; height: 315px; margin: 11px auto 0; }
  .cl-art-paper { top: 26px; right: 24px; width: 178px; height: 240px; padding: 15px; }
  .cl-paper-brand { font-size: 16px; padding-bottom: 12px; } .cl-paper-brand span { font-size: 4px; }
  .cl-paper-title { font-size: 22px; margin-top: 12px; } .cl-paper-title span { font-size: 5px; margin-top: 9px; }
  .cl-paper-fields { margin-top: 16px; gap: 7px; } .cl-paper-fields span { font-size: 5px; }
  .cl-art-paper svg { height: 35px; margin-top: 12px; } .cl-art-paper > small { font-size: 4px; margin-top: 4px; }
  .cl-art-vial { top: 62px; width: 181px; height: 226px; left: -9px; }
  .cl-art-orbit-one { width: 275px; height: 275px; top: 50%; } .cl-art-orbit-two { width: 220px; height: 220px; top: 50%; }
  .cl-art-coordinate, .cl-art-index { display: none; }
  .cl-art-label { bottom: 21px; right: -2px; padding: 10px 11px; } .cl-art-label strong { font-size: 8px; } .cl-art-label small { font-size: 5px; }
  .cl-label-icon { height: 25px; width: 25px; font-size: 13px; }
  .cl-hero-foot { width: calc(100% - 40px); justify-content: space-between; gap: 10px; padding: 19px 0; }
  .cl-hero-foot > span { font-size: 8px; } .cl-hero-foot b { display: block; margin: 0 0 7px; font-size: 8px; }
  .cl-hero-foot a { display: none; }
  .cl-library, .cx-guide, .cx-faq-section, .cx-support { width: calc(100% - 36px); }
  .cl-library { padding: 40px 0; scroll-margin-top: 96px; }
  .cl-library-heading { display: block; margin-bottom: 23px; }
  .cl-library-heading h2 { font-size: 32px; line-height: 1.15; letter-spacing: -1.2px; margin-top: 12px; }
  .cl-library-heading > p { max-width: 295px; font-size: 11px; margin-top: 17px; }
  .cl-search-panel { padding: 14px 12px 10px; border-radius: 11px; }
  .cl-search-top { margin-bottom: 12px; } .cl-search-hint { display: none; }
  .cl-search-modes button { font-size: 10px; padding: 8px 11px; }
  .cx-search-field { padding: 5px 5px 5px 10px; gap: 8px; border-radius: 7px; flex-wrap: wrap; }
  .cx-search-field > svg { width: 17px; height: 17px; }
  .cx-search-field input { width: calc(100% - 30px); padding: 11px 0; font-size: 16px; }
  .cx-search-field input::placeholder { font-size: 11px; }
  .cx-search-field kbd { display: none; }
  .cx-search-field button { width: 100%; min-height: 40px; padding-inline: 13px; font-size: 11px; }
  .cx-lookup-help { display: block; margin-top: 10px; }
  .cx-lookup-help p { font-size: 9px; line-height: 1.8; }
  .cx-lookup-help button { font-size: 9px; padding-bottom: 5px; min-height: 32px; }
  .cl-filter-row { margin-top: 22px; margin-right: -18px; }
  .cl-filters { flex-wrap: nowrap; overflow: auto; padding: 2px 18px 10px 2px; scrollbar-width: thin; scrollbar-color: #c4d4db transparent; }
  .cl-filters button { font-size: 10px; min-height: 34px; padding: 8px 12px; flex-shrink: 0; }
  .cl-library-toolbar { min-height: 52px; gap: 9px; flex-wrap: wrap; }
  .cl-library-toolbar p, .cl-library-toolbar select { font-size: 10px; }
  .cl-library-toolbar > div { gap: 7px; } .cl-library-toolbar button { font-size: 9px; }
  .cl-library-toolbar select { max-width: 129px; padding-right: 0; }
  .cl-grid { grid-template-columns: 1fr; gap: 15px; }
  .cl-card { border-radius: 11px; } .cl-card-top { min-height: 134px; padding: 18px 20px; gap: 20px; }
  .cl-card-image { width: 76px; height: 95px; } .cl-card h3 { font-size: 25px; }
  .cl-card-category { font-size: 8px; } .cl-card-body { padding: 17px 20px; }
  .cl-card-description { font-size: 12px; margin-top: 10px; margin-bottom: 14px; }
  .cl-card-actions button { min-height: 44px; font-size: 12px; }
  .cl-card-bottom a { padding-block: 9px; font-size: 11px; }
  .cl-library-note { align-items: flex-start; gap: 13px; padding-top: 22px; margin-top: 24px; }
  .cl-library-note p { font-size: 10px; } .cl-library-note a { margin-left: 35px; font-size: 11px; }
  .cx-results { padding: 20px; } .cx-result-top { display: block; }
  .cx-result-top h2 { font-size: 27px; } .cx-result-top > button { margin-top: 9px; }
  .cx-no-match p { font-size: 12px; }
  .cl-preview { width: calc(100% - 16px); max-height: calc(100dvh - 20px); border-radius: 12px; }
  .cl-preview-head { padding: 15px; gap: 12px; } .cl-preview-head h2 { font-size: 19px; line-height: 1.3; }
  #cl-preview-content { padding: 15px; } .cx-result-notice { padding: 12px; font-size: 11px; }
  .cx-result-tools :is(a,button) { font-size: 10px; padding: 10px; }
  .cl-preview .coa-doc { padding: 15px; } .cl-preview .coa-doc-head { flex-direction: column; gap: 15px; }
  .cl-preview .coa-doc-meta { text-align: left; } .cl-preview .coa-doc-product { grid-template-columns: 1fr 1fr; }
  .cl-preview .coa-doc-product strong { font-size: 11px; overflow-wrap: anywhere; }
  .cl-preview .coa-table { min-width: 520px; }
  .cx-guide { padding: 25px 20px; border-radius: 13px; }
  .cx-section-heading { display: block; margin-bottom: 23px; } .cx-section-heading h2 { font-size: 30px; letter-spacing: -1.2px; }
  .cx-section-heading > p { max-width: 220px; font-size: 11px; margin-top: 15px; }
  .cx-guide-tabs { gap: 5px; } .cx-guide-tabs button { justify-content: center; padding: 13px 7px; gap: 5px; }
  .cx-guide-tabs button > span { display: none; } .cx-guide-tabs strong { margin: 0; font-size: 12px; } .cx-guide-tabs small { display: none; }
  .cx-guide-panel { grid-template-columns: 1fr; padding: 24px 20px 40px; gap: 28px; }
  .cx-guide-panel h3 { font-size: 29px; } .cx-guide-panel p { font-size: 12px; }
  .cx-batch-diagram { flex-direction: row; } .cx-batch-diagram > div { padding: 12px; } .cx-batch-diagram strong { font-size: 12px; letter-spacing: 1px; }
  .cx-batch-diagram > i { width: 25px; height: 1px; flex-shrink: 0; } .cx-diagram-note { font-size: 6px; right: 12px; }
  .cx-faq-section { margin-block: 40px; } .cx-faq-section h2 { font-size: 33px; } .cx-faq-section > div > p { font-size: 12px; }
  .cx-faq-list summary { font-size: 12px; padding-block: 20px; }
  .cx-support { padding: 24px; gap: 16px; } .cx-support-icon { display: none; }
  .cx-support h2 { font-size: 27px; } .cx-support > a { margin: 5px 0 0; width: 100%; justify-content: space-between; }
  .cx-lot-dialog { padding: 23px; } .cx-lot-dialog h2 { font-size: 29px; } .cx-label-guide { padding: 18px; grid-template-columns: 1fr; gap: 10px; }
  .cx-label-vial { margin: auto; } .cx-label-guide h3 { font-size: 19px; }
}
@media (max-width:360px) {
  .cl-hero h1 { font-size: 40px; } .cl-hero-actions { gap: 11px; }
  .cl-primary { font-size: 10px; padding-inline: 12px; gap: 12px; } .cl-hero-actions button { font-size: 9px; }
  .cl-card-top { gap: 15px; } .cl-card h3 { font-size: 23px; }
  .cl-library-toolbar select { max-width: 117px; } .cl-library-toolbar p { font-size: 9px; }
}
@media (prefers-reduced-motion:reduce) { .cx-main *, .cl-preview * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media print {
  body.coa-experience > * { display: none !important; }
  body.coa-experience > .cl-preview[open] { display: block !important; position: static; width: 100%; max-height: none; height: auto; overflow: visible; border: 0; background: white; }
  .cl-preview::backdrop { display: none; } .cl-preview-head { position: static; background: white; }
  .cl-preview-head button, .cl-preview .cx-result-tools, .cl-preview .coa-doc-footer { display: none !important; }
  #cl-preview-content { padding: 0; } .cl-preview .coa-doc { border: 0; padding: 0; }
  .cl-preview .table-scroll { overflow: visible; } .cl-preview .coa-table { min-width: 0; }
  .cl-preview .coa-doc-product { grid-template-columns: repeat(3,1fr); }
  .cx-result-notice, .cl-preview .coa-doc-sample { display: block !important; break-inside: avoid; }
}
/* Published vendor reports are separate from illustrative specimen previews. */
.cl-vendor-reports { list-style: none; padding: 0; margin: 14px 0; }
.cl-vendor-reports li { padding: 12px 0; border-bottom: 1px solid #dce5ea; }
.cl-vendor-reports li:last-child { border-bottom: 0; }
.cl-vendor-reports a { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #214f63; font-size: 12px; font-weight: 500; text-decoration: none; }
.cl-vendor-reports a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cl-vendor-reports small { display: block; font-size: 11px; font-weight: 400; margin-top: 5px; overflow-wrap: anywhere; }
.cl-vendor-reports p { font-size: 10px; color: #526b79; line-height: 1.7; margin: 8px 0 0; overflow-wrap: anywhere; }
.cl-vendor-reports li > strong { display: block; font-size: 14px; margin-bottom: 10px; color: #173b4b; }
.cx-vendor-intro { font-size: 13px; line-height: 1.8; color: #486674; }

.cl-vendor-reports .cl-view-coa { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; padding: 10px 12px; border: 1px solid #b9cfd9; border-radius: 7px; background: #edf4f7; color: #214f63; font-size: 11px; font-weight: 600; white-space: nowrap; }
.cl-vendor-reports a:hover .cl-view-coa { background: #dae9ef; border-color: #7ea3b4; }