/* ---------- search: the field under the logo and the panel it opens (features/find) ---------- */
/* the field: it looks like one and is a button; F is the key that opens it */
.rail-find { padding: 0 0 12px; }
.findbtn { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 9px; width: 100%; min-height: 34px; padding: 0 8px 0 10px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); color: var(--ink-3); font-size: 13px; transition: border-color var(--t1) ease-out, color var(--t1) ease-out; }
.findbtn:hover { border-color: var(--hover-line); color: var(--ink-2); } .findbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.findbtn svg { width: 15px; height: 15px; flex: none; } .findbtn span { flex: 1; min-width: 0; }
kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 5px; border: 1px solid var(--line-strong); background: var(--well); color: var(--ink-2); font-family: var(--mono); font-size: 10.5px; line-height: 1; }
/* the panel: near the top of the page, the field first, the results under it. A surface with a border, like every panel: no shadow */
#find-root .scrim { z-index: 70; animation: fade-in var(--t1) ease-out both; }      /* its entrance is kept (owner, 2026-10-08: "bring it back, I liked it") */
.find { position: fixed; z-index: 71; top: min(14vh, 120px); left: 50%; width: min(560px, calc(100% - 24px)); transform: translateX(-50%); display: flex; flex-direction: column; max-height: min(70vh, 560px); background: var(--lift); border: 1px solid var(--line-strong); border-radius: var(--r-lg); overflow: hidden; animation: find-in 200ms var(--ease) both; }
@keyframes find-in { from { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(.985); } to { opacity: 1; transform: translateX(-50%); } }
.find-top { display: flex; align-items: center; gap: 10px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--line); flex: none; }
.find-top > svg { width: 17px; height: 17px; color: var(--ink-3); flex: none; }
.find-top input { flex: 1; min-width: 0; width: auto; min-height: 52px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: 15px; color: var(--ink-strong); }
.find-top input:hover, .find-top input:focus { border: 0; box-shadow: none; outline: none; }
.find-esc { all: unset; cursor: pointer; display: grid; place-items: center; padding: 6px 4px; border-radius: var(--r); } .find-esc:focus-visible { outline: 2px solid var(--focus); }
.find-list { overflow-y: auto; overscroll-behavior: contain; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.find-o { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 10px; border-radius: var(--r); color: var(--ink-2); }
.find-o > svg { width: 17px; height: 17px; flex: none; color: var(--ink-3); }
.find-o[aria-selected="true"] { background: var(--select); } @media (hover: hover) { .find-o:hover { background: var(--select); } } .find-o[aria-selected="true"] > svg { color: var(--ink-strong); }
.find-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.find-t b { font-weight: 500; font-size: 13.5px; color: var(--ink-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.find-t small { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.find-none { display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; padding: 34px 20px; color: var(--ink-3); font-size: 13px; } .find-none b { font-weight: 500; font-size: 14px; color: var(--ink-strong); overflow-wrap: anywhere; }
.find-foot { display: flex; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 11.5px; flex: none; } .find-foot span { display: inline-flex; align-items: center; gap: 5px; }
/* phones: no side bar, so the way in is the first row of More; the panel fills the width and the hints about keys go */
.sheet-find { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 11px; width: 100%; min-height: 46px; margin: 4px 0 8px; padding: 0 14px; border-radius: var(--r-mid); border: 1px solid var(--line); background: var(--well); color: var(--ink-3); font-size: 16px; }
.sheet-find svg { width: 17px; height: 17px; flex: none; }
@media (max-width: 920px) { .find { top: calc(10px + var(--safe-t)); max-height: 78vh; } .find-top input { font-size: 16px; } .find-foot, .find-esc { display: none; } .find-top { padding-right: 16px; } .find-o { min-height: 52px; } }