/* "What's going on?" search. Uses the site tokens so it follows every palette and the
   light/dark toggle without knowing anything about them. */
/* Full content width. It is the way into the section, not a sidebar utility, so it should not
   look like an afterthought tucked under the heading. */
.bgwfind{position:relative;margin:2.4rem 0 0;max-width:none}
/* The bar owns the left inset; the input owns the height. Anything else drifts: a global input
   rule was adding 15px of its own horizontal padding on top of the bar's, so the text sat 33px
   from the left edge but only 9px from the right, and the input's vertical padding centred it
   7px from the top and 19px from the bottom. Height on the input, zero padding, and the browser
   centres the text for us. The doubled class beats the global rule without needing !important. */
.bgwfind-bar{display:flex;align-items:center;gap:4px;background:var(--surface,rgba(26,23,20,.04));
	border:1px solid var(--line2,rgba(26,23,20,.18));border-radius:8px;padding:0 8px 0 16px;transition:border-color .2s}
.bgwfind-bar:focus-within{border-color:var(--accent,#9b2f2c)} /* 1px border only, never a glow ring */
/* theme.css styles every text input with !important on background, border, border-radius and
   padding. Left alone, the input drew its own bordered, rounded, filled box inside this one, so
   the search read as a field within a field with the mic stranded outside it. Each of those has
   to be answered in kind; this is the field, the bar is only its frame. */
.bgwfind .bgwfind-in{flex:1 1 auto;min-width:0;height:54px;outline:0;line-height:normal;margin:0;
	background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;
	padding:0!important;
	font-family:'Inter',-apple-system,sans-serif;font-size:16px;color:var(--text,#1a1714)} /* 16px: anything smaller makes iOS zoom the page on focus */
.bgwfind-in::placeholder{color:var(--muted,#938a7e)}
.bgwfind-mic,.bgwfind-clear{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
	width:36px;height:36px;border:0;border-radius:8px;background:none;color:var(--muted,#938a7e);cursor:pointer;
	font-size:22px;line-height:1;transition:background .2s,color .2s}
/* Must come after the display rule above, or it loses to it. Setting display on an element that
   carries the hidden attribute beats the browser's own [hidden]{display:none}, which left the
   clear button sitting in an empty field, taking up the right-hand space and throwing the
   whole box off balance. The mic depends on the same attribute when speech is unavailable. */
.bgwfind-mic[hidden],.bgwfind-clear[hidden]{display:none}
.bgwfind-mic:hover,.bgwfind-clear:hover{background:color-mix(in srgb,var(--text,#1a1714) 8%,transparent);color:var(--text,#1a1714)}
@keyframes bgwfind-pulse{0%,100%{opacity:1}50%{opacity:.55}}
.bgwfind-mic.rec{background:var(--accent,#9b2f2c);color:#fff;animation:bgwfind-pulse 1.4s ease infinite}
.bgwfind-hint{margin:8px 2px 0;font-family:'Inter',-apple-system,sans-serif;font-size:12px;line-height:1.5;color:var(--muted,#938a7e)}

.bgwfind-panel{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 6px);
	background:var(--bg,#faf7f2);border:1px solid var(--line2,rgba(26,23,20,.18));border-radius:10px;
	box-shadow:0 12px 40px rgba(0,0,0,.16);overflow:hidden;max-height:min(70vh,520px);overflow-y:auto}
.bgwfind-hit{display:block;padding:14px 16px;border-bottom:1px solid var(--line,rgba(26,23,20,.1));text-decoration:none}
.bgwfind-hit:last-child{border-bottom:0}
.bgwfind-hit:hover,.bgwfind-hit.on{background:color-mix(in srgb,var(--accent,#9b2f2c) 8%,transparent)}
.bgwfind-ser{display:block;font-family:'Inter',-apple-system,sans-serif;font-size:11px;font-weight:600;
	letter-spacing:.14em;text-transform:uppercase;color:var(--accent,#9b2f2c);margin-bottom:5px}
.bgwfind-t{display:block;font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:17px;line-height:1.28;color:var(--text,#1a1714)}
.bgwfind-e{display:block;margin-top:4px;font-family:'Inter',-apple-system,sans-serif;font-size:13px;line-height:1.5;color:var(--text2,#5b5048)}

.bgwfind-none{padding:18px}
.bgwfind-none p{margin:0 0 10px;font-family:'Inter',-apple-system,sans-serif;font-size:14px;line-height:1.6;color:var(--text2,#5b5048)}
.bgwfind-none .bgwfind-help{font-size:13px;color:var(--text,#1a1714)}
.bgwfind-all{display:inline-block;font-family:'Inter',-apple-system,sans-serif;font-weight:600;font-size:13px;color:var(--accent,#9b2f2c)}

/* Phones get the search as the way in, and the three filter rows are put away. Fifteen stacked
   links is a desktop pattern that turns into a wall on a narrow screen, and nobody arriving
   from a 2am search knows which chip they want anyway. They know what is happening to them. */
@media(max-width:820px){
	.bgwfind{margin-top:1.4rem;max-width:none}
	.bgwfind-panel{position:static;margin-top:10px;box-shadow:none;max-height:none}
	.bgw-tags,.bgw-jnav{display:none}
	.bgw-cats{margin-top:1.1rem}
}

/* Danger card. Shown above the results when the phrase describes being hurt now rather than a
   subject to read about. Handing someone typing "I'm being beat" a 2,500 word essay as the
   first thing they see is the wrong answer; the numbers go first. */
.bgwfind-urgent{padding:16px 18px;background:color-mix(in srgb,var(--accent,#9b2f2c) 10%,transparent);
	border-bottom:1px solid var(--line,rgba(26,23,20,.1))}
.bgwfind-urgent-h{margin:0 0 8px;font-family:'Inter',-apple-system,sans-serif;font-size:12px;font-weight:600;
	letter-spacing:.12em;text-transform:uppercase;color:var(--accent,#9b2f2c)}
.bgwfind-urgent-n{margin:0 0 10px;font-family:'Inter',-apple-system,sans-serif;font-size:14px;line-height:1.75;color:var(--text,#1a1714)}
.bgwfind-urgent-n a{font-weight:600;color:var(--accent,#9b2f2c)}
.bgwfind-urgent-a{display:block;font-family:'Inter',-apple-system,sans-serif;font-size:13px;font-weight:600;
	line-height:1.5;color:var(--accent,#9b2f2c);margin-top:5px}