/* ============================================================
   Dosage Peptide -- Dosages Catalog (tse-catalog) -- clean CSS
   Faithful port of the Claude Design "Single Peptides" catalog.
   Header/footer/sticky come from chrome.css (shared). This file holds
   the catalog-specific layout, hover states, responsive rules and the
   greyed calculator example. Scoped to .dpc-* so it never collides.
   ============================================================ */
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield}
.dpc-tabs::-webkit-scrollbar{height:0}
.dpc-fams::-webkit-scrollbar{height:0}

/* calculator grid + results */
.dpc-calc-grid{display:grid;gap:14px;align-items:end;grid-template-columns:repeat(3,minmax(0,1fr))}
.dpc-calc-res{grid-column:1/-1}

/* ---- hover states (were style-hover in the design) ---- */
.dpc-hover-card{transition:border-color .16s ease,box-shadow .16s ease}
.dpc-hover-card:hover{border-color:#C3CDD5!important;box-shadow:0 14px 30px -20px rgba(30,40,50,.35)}
.dpc-size-a{transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.dpc-size-a:hover{background:#fff!important;border-color:#C4D0D9!important;color:#26527A!important}
.dpc-size-calc{transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.dpc-size-calc:hover{background:#DBE5EC!important;color:#2E566E!important;border-color:#C4D0D9!important}
.dpc-cx-calc{transition:border-color .15s ease,color .15s ease}
.dpc-cx-calc:hover{border-color:#3C6076!important;color:#3C6076!important}
.dpc-tab{transition:color .15s ease}
.dpc-tab:hover{color:#3C6076!important}
.dpc-fam:hover{border-color:#C3CDD5!important}
.dpc-btn:hover{border-color:#3C6076!important;color:#3C6076!important}
.dpc-chip:hover{border-color:#C3CDD5!important;box-shadow:0 12px 26px -18px rgba(30,40,50,.45)}
.dpc-rail-b:hover{background:#EEF1F4!important}
.dpc-req:hover{background:#456277!important}
.dpc-primary:hover{background:#456277!important}

/* ---- greyed calculator example (nothing clicked yet) ---- */
.dpc-calc--example .dpc-calc-grid input,
.dpc-calc--example .dpc-calc-res>div>div:last-child{color:#B3BBC3!important}
.dpc-calc--example .dpc-calc-res{background:#2A333D!important;opacity:.72}
.dpc-calc--example .dpc-unit{opacity:.55}
.dpc-ex-note{display:none;margin:11px 0 0;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.02em;color:#9AA2AA}
.dpc-calc--example .dpc-ex-note{display:block}
.dpc-calc--example .dpc-live-note{display:none}

/* ---- alphabet rail: desktop only ---- */
.dpc-rail{display:none;z-index:130!important}
@media (min-width:1340px){.dpc-rail{display:flex!important}}

/* ---- responsive ---- */
@media (max-width:520px){
  .dpc-calc-res{grid-template-columns:1fr!important}
  .dpc-calc-mid{border-left:none!important;border-right:none!important;border-top:1px solid rgba(255,255,255,.12)!important;border-bottom:1px solid rgba(255,255,255,.12)!important;margin:10px 0!important;padding-top:12px!important;padding-bottom:12px!important}
}
@media (max-width:900px){
  .dpc-tbwrap{top:59px!important}
  .dpc-calc-grid{grid-template-columns:1fr 1fr!important}
  .dpc-calc-res{grid-column:1/-1!important}
}
@media (max-width:680px){
  .dpc-sec{padding:30px 16px!important}
  .dpc-bc{display:none!important}
  .dpc-hero{padding:22px 16px 24px!important}
  .dpc-hero h1{font-size:30px!important}
  .dpc-hero p{font-size:15px!important;margin-bottom:22px!important}
  .dpc-stats{gap:10px!important}
  .dpc-stat{flex:1 1 40%!important;padding:14px 15px!important}
  .dpc-stat>div:first-child{font-size:26px!important}
  .dpc-calc-inner{padding:14px 16px!important}
  .dpc-toolbar-inner{padding:11px 16px!important}
  .dpc-tools-row{flex-wrap:wrap!important;gap:8px!important;margin-bottom:11px!important}
  .dpc-search{flex:1 1 170px!important}
  .dpc-vlabel{display:none!important}
  .dpc-fams{margin-top:10px!important}
  .dpc-calc-grid{grid-template-columns:1fr!important}
  .dpc-size-calc{width:36px!important}
  .dpc-size-a{min-height:42px!important;font-size:13px!important}
  .dpc-cx-calc{width:38px!important;height:38px!important}
  .dpc-fams button{padding:9px 13px!important}
}

/* ===== F1: server-rendered complete protocol index (crawlable A–Z-style list) ===== */
.dpc-index{background:#fff;border-top:1px solid #E2E6EA;padding:40px 0 20px}
.dpc-index-in{max-width:1240px;margin:0 auto;padding:0 28px}
.dpc-index-h{font-family:'Schibsted Grotesk',sans-serif;font-weight:700;font-size:22px;color:#21272D;margin:0 0 6px}
.dpc-index-sub{font-size:14px;color:#5A636B;margin:0 0 22px;max-width:70ch}
.dpc-index-grp{margin:0 0 22px}
.dpc-index-fam{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#456277;margin:0 0 10px}
.dpc-index-ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:2px 24px}
.dpc-index-ul a{color:#3C6076;text-decoration:none;font-size:14px;line-height:1.9}
.dpc-index-ul a:hover{text-decoration:underline;text-underline-offset:2px}