/* Clinical Evidence — search, topic chips and publication cards.
   Loaded only on the evidence page; every other component on the page
   (.phero, .sec-head, .callout, .link) comes from base.css / interior.css. */

.ev-search{display:flex;align-items:center;gap:var(--space-3);max-width:640px;width:100%;height:56px;padding:0 var(--space-5);border:var(--stroke-hairline) solid var(--line);border-radius:var(--radius-md);background:var(--white)}
.ev-search:focus-within{border-color:var(--border-brand)}
.sj .ev-search input{flex:1;min-width:0;border:0;outline:none;font-family:inherit;font-size:var(--size-base);color:var(--ink);background:transparent}
.ev-search input::placeholder{color:var(--neutral-400)}
.ev-search .ico{display:flex;flex:none;color:var(--ink-2)}

/* Chips sit on the grey band, so the active state is a white fill. */
.topics{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-8)}
.sj .topic{display:inline-flex;align-items:center;height:44px;padding:0 var(--space-5);border:var(--stroke-hairline) solid var(--line);border-radius:var(--radius-md);background:var(--white);font-family:inherit;font-size:var(--size-sm);font-weight:var(--weight-medium);letter-spacing:var(--tracking-tight);color:var(--neutral-700);cursor:pointer;transition:border-color .15s ease,background .15s ease,color .15s ease}
@media (hover:hover){.sj .topic:hover{border-color:var(--border-brand);color:var(--text-brand)}}
.sj .topic[aria-pressed="true"]{background:var(--white);border-color:var(--white);color:var(--text-brand);box-shadow:var(--shadow-sm)}
.sj .topic:focus-visible{outline:2px solid var(--border-brand);outline-offset:2px}

/* Twelve chips fill most of a phone screen, so narrow viewports get a native
   picker instead. Exactly one of .topics / .topic-select is ever displayed. */
.topic-select{display:none;margin-top:var(--space-8)}
.sj .topic-select select{display:block;width:100%;max-width:520px;height:52px;padding:0 var(--space-10) 0 var(--space-4);border:var(--stroke-hairline) solid var(--line);border-radius:var(--radius-md);background-color:var(--white);font-family:inherit;font-size:var(--size-sm);font-weight:var(--weight-medium);color:var(--text-brand);cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230172BD' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--space-4) center;background-size:18px 18px}
.sj .topic-select select:focus{outline:none;border-color:var(--border-brand);box-shadow:0 0 0 3px var(--tsk-blue-050)}

.sj .pub-count{font-size:var(--size-sm);color:var(--ink-2);margin:0 0 var(--space-2)}

.pub{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-10) 0;border-top:var(--stroke-hairline) solid var(--line)}
.pub[hidden]{display:none}
.pub-tags{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-3);font-size:var(--size-3xs);letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:var(--weight-medium);color:var(--text-brand)}
.pub-tags span{white-space:nowrap}
.pub-tags span+span::before{content:"|";color:var(--neutral-300);margin-right:var(--space-3)}
.sj .pub h3{margin:0;font-size:var(--size-xl);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);line-height:var(--leading-heading);color:var(--ink);max-width:70ch;text-wrap:balance}
.sj .pub-meta{font-size:var(--size-sm);color:var(--ink-2);margin:0}
.sj .pub .p{max-width:100ch}
.sj .pub .p b{font-weight:var(--weight-medium);color:var(--ink)}
.sj .pub-cite{font-size:var(--size-xs);line-height:var(--leading-normal);color:var(--neutral-500);max-width:110ch;margin:0}
.pub .link{margin-top:var(--space-2);align-self:flex-start}

/* The last *visible* card carries the closing rule. Hidden cards are display:none,
   so :last-child would land on a filtered-out card and drop the line. */
.pub.is-last{border-bottom:var(--stroke-hairline) solid var(--line)}

.ev-empty{padding:var(--space-16) 0;text-align:center;color:var(--ink-2);font-size:var(--size-md);border-top:var(--stroke-hairline) solid var(--line)}
.loadmore{display:flex;justify-content:center;margin-top:var(--space-10)}
.sj .loadmore .btn{background:var(--white);color:var(--text-brand);border-color:var(--border-brand);cursor:pointer;font-family:inherit}
.sj .loadmore .btn:hover{background:var(--brand-primary);border-color:var(--brand-primary);color:var(--white)}

/* No-JS: the chips, search and pager cannot do anything, so hide them and let
   all the cards stand as a plain list. The flag is set by evidence.js itself,
   so the controls only appear once the behaviour is actually attached. */
html:not([data-ev-js]) .topics,
html:not([data-ev-js]) .topic-select,
html:not([data-ev-js]) .ev-search,
html:not([data-ev-js]) .loadmore{display:none}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (max-width:900px){
  .sec-head .ev-search{width:100%!important;flex:1 1 auto!important}
  .pub{padding:var(--space-8) 0}
}

@media (max-width:760px){
  .topics{display:none}
  .topic-select{display:block}
}

/* A study linked to directly from search results — assets/js/evidence.js pages
   forward to reveal it, and this marks which one was asked for. */
.sj .pub:target{
	outline:2px solid var(--tsk-blue);
	outline-offset:8px;
	border-radius:var(--radius-lg);
	scroll-margin-top:140px;
}