/* Search · styles only this page uses, loaded after /shared/deep-dive.css. A plain page like
   About: the header has no Contents menu. Then the box, the help (until something is typed), how
   many were found, a card when the words name a person or place, buttons that show one part of the
   site at a time, and the results. The marks in the snippets are the shared mark.find-hit. */

.sr-page .home-link{display:none}
@media (min-width:600px){.sr-page .home-link{display:flex}}
.sr-page main{padding-bottom:56px}

/* the box */
.sr-form{padding-block:24px 4px;max-width:720px}
.sr-box{display:flex;align-items:center;gap:10px;min-height:56px;padding:0 10px 0 16px;border:1px solid var(--line-2);border-radius:14px;background:var(--card);color:var(--ink-2)}
.sr-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.sr-box input{flex:1;min-width:0;height:54px;margin:0;padding:0;border:0;background:transparent;color:var(--ink);font:400 calc(19px*var(--ts,1))/1.2 var(--serif);outline:none;-webkit-appearance:none;appearance:none}
.sr-box input::placeholder{color:var(--ink-2);opacity:.8}

/* help, before anything is typed */
.sr-help{display:flex;flex-direction:column;gap:10px;max-width:64ch;padding-top:18px}
.sr-help p{font-size:calc(clamp(17px,1.5vw,19px)*var(--ts,1))}
.sr-help .sr-tip{font:400 calc(14px*var(--ts,1))/1.55 var(--sans);color:var(--ink-2)}

/* how many, or nothing found */
.sr-status{margin-top:20px;max-width:64ch;font:500 calc(15px*var(--ts,1))/1.5 var(--sans);color:var(--ink-2)}
.sr-status:empty{display:none}
.sr-status a{font-weight:600}

/* a person or place whose name was typed */
.sr-card{margin-top:16px;max-width:720px;padding:16px 18px 18px;border:1px solid var(--line-2);border-radius:12px;background:var(--card);display:flex;flex-direction:column;gap:6px}
.sr-card + .sr-card{margin-top:10px}
.sr-cn{font-size:calc(24px*(1 + (var(--ts,1) - 1)*0.8));line-height:1.2}
.sr-cl{font:400 calc(14px*var(--ts,1))/1.45 var(--sans);color:var(--ink-2)}
.sr-ca{margin-top:4px;font-size:calc(17px*var(--ts,1));line-height:1.55}
.sr-cgo{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:8px}
.sr-own{display:flex;flex-direction:column;gap:2px;padding:9px 14px;border:1px solid var(--line-2);border-radius:10px;background:var(--paper);color:var(--ink);text-decoration:none}
.sr-own:hover{border-color:var(--accent)}
.sr-own .t{font-size:calc(18px*var(--ts,1));line-height:1.25}
.sr-own .s{font:400 calc(13px*var(--ts,1))/1.4 var(--sans);color:var(--ink-2)}
.sr-all{font:500 calc(15px*var(--ts,1))/1.4 var(--sans)}

/* one part of the site at a time */
.sr-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;max-width:900px}
.sr-chip{min-height:40px;padding:0 14px;border:1px solid var(--line-2);border-radius:999px;background:transparent;color:var(--ink);font:500 calc(14px*var(--ts,1))/1.2 var(--sans);cursor:pointer}
.sr-chip .n{margin-left:3px;font-weight:400;color:var(--ink-2)}
.sr-chip:hover{border-color:var(--accent)}
.sr-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.sr-chip[aria-pressed="true"] .n{color:inherit;opacity:.75}
/* on a phone, one row that scrolls sideways, so the results aren't pushed down the screen */
@media (max-width:699px){
  .sr-chips{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1 * var(--gutter));padding:2px var(--gutter);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .sr-chips::-webkit-scrollbar{display:none}
  .sr-chip{flex-shrink:0;white-space:nowrap}
}

/* the results */
.sr-list{list-style:none;margin:16px 0 0;padding:0;max-width:760px;border-top:1px solid var(--line)}
.sr-list:empty{display:none}
.sr-list li{border-bottom:1px solid var(--line)}
.sr-hit{display:flex;flex-direction:column;gap:3px;padding:16px 0 18px;color:var(--ink);text-decoration:none}
.sr-hit .k{font:400 calc(12px*var(--ts,1))/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.sr-hit .t{font-size:calc(22px*(1 + (var(--ts,1) - 1)*0.9));line-height:1.25}
.sr-hit:hover .t{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.sr-hit .e{font:400 calc(14px*var(--ts,1))/1.45 var(--sans);color:var(--ink-2)}
.sr-hit .c{margin-top:6px;font:600 calc(12px*var(--ts,1))/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.sr-hit .s{margin-top:4px;font-size:calc(17px*var(--ts,1));line-height:1.55;color:var(--ink)}
.sr-more{display:inline-flex;align-items:center;min-height:48px;margin-top:22px;padding:0 22px;border:1px solid var(--line-2);border-radius:999px;background:var(--card);color:var(--ink);font:600 calc(15px*var(--ts,1)) var(--sans);cursor:pointer}
.sr-more:hover{border-color:var(--accent)}

@media (min-width:900px){
  .sr-form{padding-top:34px}
  .sr-hit .t{font-size:calc(24px*(1 + (var(--ts,1) - 1)*0.8))}
}
@media print{
  .sr-form,.sr-help,.sr-chips,.sr-more{display:none!important}
  .sr-hit{padding-block:8pt}
}