/* The agents page. Everything shared lives in app.css. */

.links a[aria-current="page"]{color:var(--text)}
.ex-body button,.ex-body .pet{-webkit-tap-highlight-color:transparent}

/* ---------- head ---------- */
.ex-head>.frame{padding-block:84px 64px}
.ex-h{margin:0;font-weight:500;font-size:clamp(30px,3.3vw,44px);line-height:1.08;letter-spacing:-.035em}
.ex-h span{display:block;color:var(--dim)}
.ex-head .sub{max-width:480px}
.ex-head .head2 .btn{flex:none}
@media (min-width:1081px){.stats.five{grid-template-columns:repeat(5,1fr)}}
.stat b{white-space:nowrap}

/* ---------- search and sort ---------- */
.ex-body{border-bottom:0}
.ex-body>.frame{padding-block:44px 104px;min-height:520px}
.tools{display:flex;align-items:center;justify-content:space-between;gap:16px}
.find{position:relative;display:flex;align-items:center;flex:1;max-width:460px;height:46px;border:1px solid var(--line2);border-radius:999px;background:var(--p1);transition:border-color .15s;cursor:text}
.find:hover{border-color:rgba(255,255,255,.24)}
.find:focus-within{border-color:var(--text)}
.find>svg{flex:none;width:15px;height:15px;margin-left:18px;color:var(--dim)}
.find input{flex:1;min-width:0;height:100%;padding:0 12px;border:0;outline:0;background:none;color:var(--text);font:inherit;font-size:14px;text-overflow:ellipsis}
.find input::placeholder{color:var(--dim)}
.find input::-webkit-search-cancel-button,.find input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.find-x{flex:none;display:grid;place-items:center;width:30px;height:30px;margin-right:8px;border-radius:50%;color:var(--mute);background:var(--p3)}
.find-x:hover{color:var(--text)}
.find-x svg{width:11px;height:11px}
.sorts{display:flex;flex:none;gap:2px;padding:4px;border:1px solid var(--line2);border-radius:999px;background:var(--p1)}
.sorts button{height:36px;padding:0 17px;border-radius:999px;font-size:13.5px;font-weight:500;color:var(--mute);transition:color .15s,background .15s}
.sorts button:hover{color:var(--text)}
.sorts button[aria-pressed="true"]{background:var(--text);color:#0a0a0a}
.find-x:focus-visible,.sorts button:focus-visible,.ex-body .btn:focus-visible{outline:2px solid var(--text);outline-offset:2px}

/* ---------- lists ---------- */
.list-h{display:flex;align-items:baseline;gap:16px;margin-top:52px;scroll-margin-top:96px}
.list-h.yard{margin-top:88px}
.list-h.yard.first{margin-top:52px}
.list-h h2{font-weight:500;font-size:22px;line-height:1.3;letter-spacing:-.025em;white-space:nowrap}
.list-h p{font-size:14px;color:var(--dim)}
.list-h .n{margin-left:auto;font-size:13px;color:var(--mute);white-space:nowrap}
.ex-body .pets{margin-top:20px}
.ex-body .pet h3{gap:10px}
.ex-body .pet h3 span{white-space:nowrap}
.pet:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.more{display:flex;justify-content:center;margin-top:26px}
.more .btn{min-width:160px}
.quiet{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px;padding:20px 22px;border:1px solid var(--line2);border-radius:18px;background:var(--p1)}
.quiet p{font-size:14.5px;color:var(--mute)}
.ex-body .empty{margin-top:52px}
.ex-body.busy .pets{opacity:.55;transition:opacity .2s .15s}

@media (max-width:1080px){
  .stats.five .stat:nth-child(5){grid-column:1/-1}
  .ex-head .stat{border-bottom:1px solid var(--line)}
  .ex-head .stat:nth-child(2n){border-right:0}
  .ex-head .stats:not(.five) .stat:nth-last-child(-n+2),.ex-head .stats.five .stat:last-child{border-bottom:0}
  .tools{flex-direction:column;align-items:stretch}
  .find{max-width:none;flex:none}
  .sorts{align-self:flex-start}
}
@media (max-width:640px){
  .ex-head>.frame{padding-block:52px 44px}
  .ex-head .stats{margin-top:34px}
  .ex-body>.frame{padding-block:28px 72px}
  .sorts{align-self:stretch}
  .sorts button{flex:1;padding:0 6px}
  .list-h{flex-wrap:wrap;gap:4px 12px;margin-top:40px}
  .list-h.yard{margin-top:64px}
  .list-h.yard.first{margin-top:40px}
  .list-h p{order:3;flex-basis:100%}
  .quiet{flex-direction:column;align-items:flex-start}
  .find input{font-size:16px}
}