/* Meridale Pharmaceuticals · template pieces on top of Assay (../../styles/assay/template/css/assay.css).
   Audience doors, the healthcare-professional gate and demo portal, the batch certificate lookup,
   announcement and role filters, the contact router and the drawn map. */

/* audience doors on the home page */
.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.door { display: grid; gap: 12px; align-content: start; padding: 26px; border-radius: var(--r-m); background: var(--card); border: 1.5px solid var(--line); text-decoration: none; transition: border-color var(--d-fast), transform var(--d) var(--ease), box-shadow var(--d); }
.door:hover { border-color: var(--cobalt); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.door .ic, .gate .ic { width: 44px; height: 44px; border-radius: var(--r-s); display: grid; place-items: center; background: var(--cobalt-soft); color: var(--cobalt); }
.door .ic svg, .gate .ic svg { width: 22px; height: 22px; }
.door b { font: 500 24px/1.15 var(--display); letter-spacing: -0.01em; }
.door > span:not(.ic) { color: var(--ink-2); font-size: 15px; }
.door em { font-style: normal; font-weight: 600; color: var(--cobalt); display: inline-flex; gap: 8px; align-items: center; font-size: 15px; }
.door em svg { width: 15px; height: 15px; transition: transform var(--d) var(--ease); }
.door:hover em svg { transform: translateX(3px); }
@media (max-width: 900px) { .doors { grid-template-columns: 1fr; } }

/* gate panels */
.gate-panel { margin-top: clamp(32px, 4vw, 48px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--line); animation: mp-in var(--d-slow) var(--ease) both; }
@keyframes mp-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
html.calm .gate-panel, html.calm .portal, html.calm [data-lookup-out] .lot { animation: none; }
.portal { margin-top: 28px; animation: mp-in var(--d-slow) var(--ease) both; }
.portal-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 18px; border-radius: var(--r-s); background: var(--cobalt-soft); }
.docs { display: grid; gap: 4px; margin-top: 12px; }
.docs li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); }
.docs li:first-child { border-top: 0; }
.docs svg { width: 20px; height: 20px; color: var(--cobalt); margin-top: 2px; }
.docs b { font-weight: 600; }
.docs small { display: block; font: 500 11.5px/1.4 var(--mono); color: var(--muted); }
.card.docs { margin-top: 0; padding: 10px 22px; }
.public-card { padding: clamp(24px, 4vw, 44px); border-radius: var(--r-l); background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--cobalt); }
.public-card .h2 { font-size: clamp(28px, 3vw, 42px); }
.help { display: grid; border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
.help li { display: grid; gap: 2px; padding: 14px 18px; border-top: 1px solid var(--line); }
.help li:first-child { border-top: 0; }
.help b { font-weight: 600; }
.help span { font: 500 13px/1.4 var(--mono); color: var(--ink-2); }

/* batch certificate lookup */
.lookup .field input { font-family: var(--mono); font-size: 18px; letter-spacing: 0.06em; text-transform: uppercase; }
.chip { display: inline-flex; padding: 4px 9px; margin: 2px 2px 0 0; border-radius: 3px; border: 1px solid var(--line); background: var(--card); font: 600 12px/1.2 var(--mono); color: var(--cobalt); cursor: pointer; }
.chip:hover { border-color: var(--cobalt); }
.note { font: 500 12.5px/1.6 var(--mono); color: var(--muted); }
.lookup-empty { display: grid; place-items: center; align-content: center; gap: 10px; min-height: 320px; padding: 24px; border: 1.5px dashed var(--line); border-radius: var(--r-m); color: var(--muted); text-align: center; }
.lookup-empty svg { width: 30px; height: 30px; color: var(--cobalt); }
[data-lookup-out] .lot { animation: mp-in 500ms var(--ease) both; }

/* announcements and roles */
.ann-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 24px; margin-bottom: 20px; }
.ann-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ann.ps-only li:not(.ps) { display: none; }
.report { display: grid; gap: 12px; text-decoration: none; transition: border-color var(--d-fast), transform var(--d) var(--ease); }
.report:hover { border-color: var(--cobalt); transform: translateY(-2px); }
.report b { font: 500 22px/1.2 var(--display); }
.report .meta, .role .meta { font: 500 12px/1.4 var(--mono); color: var(--muted); }
.role { display: grid; gap: 10px; align-content: start; }
.role p:not(.meta) { color: var(--ink-2); font-size: 15px; }
.role .more { font-weight: 600; justify-self: start; }

/* contact router */
.route { min-height: 1.6em; font: 500 13px/1.6 var(--mono); color: var(--ink-2); }
.route b { color: var(--cobalt); }
.router .choices { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* the drawn map */
.map .road { fill: none; stroke: var(--line); stroke-width: 14; stroke-linecap: round; }
.map .road.major { stroke-width: 22; stroke: color-mix(in srgb, var(--t2) 28%, var(--line)); }
.map .pin { transform-box: fill-box; transform-origin: 50% 100%; animation: mp-drop 900ms cubic-bezier(0.3, 1.5, 0.5, 1) both 300ms; }
@keyframes mp-drop { from { transform: translateY(-36px); opacity: 0; } to { transform: none; opacity: 1; } }
html.calm .map .pin { animation: none; }