/**
 * @file menu-find.css
 * @author Jouni Miikki
 * SPDX-License-Identifier: MIT
 * @description The find field at the top of a side menu and the narrowed menu under it
 *   (components/MenuFind.js; catalogue entry `menu-find`). The field is the poster field: one heavy
 *   underline, coral while you are in it, a glass, the / key as a chip or the clear button. A found
 *   place is a row of the side menu (side-menu.css values): hairline under it, the chosen one on the
 *   chosen ground with ↩, the matched part underlined in coral, a section of a page under its page in
 *   smaller grey words with its number in mono coral, the word it was found by in grey mono under
 *   it. The other side's places stand under an ink slab. The operator tone is the same on the admin
 *   menu's ink (operator-menu.css values): sun for the labels and the focus, the menu's grey for the
 *   quiet words. Every corner, frame and chosen ground reads the shape tokens.
 *   NOTE: this file must be linked in spa.html.
 * @version-history
 *   v1.0.0 — 2026-10-14 — Initial (wish-pikahaku-settings-controls-ja-admin-sivuille; design
 *     claude.ai/artifact/ExfoqqeSCQuguJVRdcfWuA, approved by Jouni 2026-10-14).
 */

.menu-find { display: flex; flex-direction: column; }
/* The field stays at the top of the menu's scrolling column, so the words being typed stay in sight
   while ↓ walks a long list; its ground is the menu's own (the page's, the phone drawer's card). */
.menu-find-box { position: sticky; top: 0; z-index: 2; margin: .6rem 0 .3rem; padding: .4rem 0 .45rem; background: var(--bg); }
/* While stuck, a strip of the field's own ground covers the column's top padding above it. */
.menu-find-box.is-stuck::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%;
  height: var(--menu-find-lift, 0px); background: inherit;
}
@media (max-width: 900px) { .menu-find-box { background: var(--card); } }
/* A touch screen has no / key and no Ctrl K to press: the chips say nothing there. */
@media (hover: none) { .menu-find-key { display: none; } }
.menu-find-label { margin-bottom: .3rem; }

/* The poster field: one heavy underline, coral while the person is in it. */
.menu-find-field {
  display: flex; align-items: center; gap: .45rem;
  padding: .15rem 0 .25rem;
  border-bottom: var(--shape-frame-heavy) solid var(--shape-field-colour);
}
.menu-find-field:focus-within { border-bottom-color: var(--accent); }
.menu-find-glass { flex: 0 0 auto; color: var(--text-dim); }
/* Three classes: the profile sheets give every text field its own underline and padding
   (.pf input[type="text"]), which would draw a second line inside the field's. */
.menu-find .menu-find-field .menu-find-input {
  flex: 1 1 auto; min-width: 0; padding: .3rem 0; border: 0; border-radius: var(--shape-corner-control); background: transparent;
  color: var(--text); font-family: var(--font-body); font-size: .95rem; outline: none;
}
.menu-find .menu-find-field .menu-find-input::placeholder { color: var(--text-dim); font-weight: var(--weight-semibold); opacity: 1; }
.menu-find-key { flex: 0 0 auto; line-height: 1.5; }
.menu-find-clear { flex: 0 0 auto; }

.menu-find-count { margin-top: .45rem; font-size: var(--text-xs); line-height: 1.45; color: var(--text-dim); }
.menu-find-count b { color: var(--text); font-weight: var(--weight-bold); }

/* The narrowed menu: the side menu's groups and rows. */
.menu-find-group { margin-top: 1.1rem; }
.menu-find-title {
  padding: 0 0 .35rem; border-bottom: var(--shape-frame) solid var(--shape-rule-colour);
  font-size: .66rem; font-weight: var(--font-poster-strong-weight); letter-spacing: calc(var(--shape-tracking-label) * 1.2);
  text-transform: var(--shape-case-label); color: var(--accent);
}
.menu-find-title--other { padding: .35rem .5rem; border-bottom: 0; background: var(--ink-ground); color: var(--sun); }

.menu-find-row {
  display: flex; align-items: flex-start; gap: .5rem; width: 100%;
  padding: .45rem 0; border: 0; border-bottom: 1px solid var(--border); background: none;
  color: var(--text); font: inherit; font-size: .98rem; font-weight: var(--font-poster-text-weight); text-align: left; cursor: pointer;
}
.menu-find-row:hover { color: var(--accent); }
.menu-find-row.is-sel {
  padding-left: .5rem; padding-right: .45rem; border-bottom-color: var(--shape-rule-colour); border-radius: var(--shape-corner);
  background: var(--shape-chosen-ground); color: var(--on-sun);
}
.menu-find-row--section { padding-left: .9rem; font-size: .84rem; color: var(--text-dim); }
.menu-find-row--section.is-sel { padding-left: .9rem; }
.menu-find-num { flex: 0 0 auto; padding-top: .12rem; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent); }
.menu-find-words { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.menu-find-hit {
  background: none; color: inherit; font-weight: var(--weight-bold);
  text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 3px;
}
.menu-find-via { display: block; margin-top: .12rem; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-dim); }
.menu-find-tail { flex: 0 0 auto; padding-top: .15rem; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-dim); white-space: nowrap; }
.menu-find-enter { flex: 0 0 auto; padding-top: .05rem; font-size: .85rem; }
.menu-find-row.is-sel :is(.menu-find-num, .menu-find-via, .menu-find-tail) { color: var(--on-sun); }
.menu-find-row.is-sel .menu-find-hit { text-decoration-color: var(--on-sun); }

/* Nothing in the menus: the dashed aside, and the way to the content search. */
.menu-find-none { margin-top: 1.1rem; font-size: .9rem; }
.menu-find-none-words { margin: 0 0 .6rem; }
/* The action's words carry the typed words and may be long: they wrap inside the narrow menu. */
.menu-find-none .poster-action { white-space: normal; text-align: left; overflow-wrap: anywhere; }
.menu-find-none .menu-find-key { margin-left: .4rem; }

/* ── The operator tone: the admin menu's ink ground in both modes (operator-menu.css). ── */
.menu-find--operator {
  --menu-find-ink: var(--operator-menu-ink, #FAFAF8);
  --menu-find-dim: var(--operator-menu-dim, #9AA0B0);
}
.menu-find--operator .menu-find-box { margin: 6px 0 4px; padding: 8px 18px 6px; background: var(--operator-menu-ground, #1A1A2E); }.menu-find--operator .menu-find-label { color: var(--sun); }
.menu-find--operator .menu-find-field { border-bottom-color: var(--menu-find-ink); }
.menu-find--operator .menu-find-field:focus-within { border-bottom-color: var(--sun); }
.menu-find--operator .menu-find-glass { color: var(--menu-find-dim); }
.menu-find--operator .menu-find-field .menu-find-input { color: var(--menu-find-ink); font-size: .88rem; }
.menu-find--operator .menu-find-field .menu-find-input::placeholder { color: var(--menu-find-dim); }
.menu-find--operator .menu-find-key { border-color: var(--menu-find-ink); color: var(--menu-find-ink); }
.menu-find--operator .menu-find-clear { border-color: var(--menu-find-ink); background: transparent; color: var(--menu-find-ink); }
.menu-find--operator .menu-find-clear:hover { border-color: var(--shape-chosen-ground); background: var(--shape-chosen-ground); color: var(--on-sun); }
.menu-find--operator .menu-find-count { color: var(--menu-find-dim); }
.menu-find--operator .menu-find-count b { color: var(--menu-find-ink); }
.menu-find--operator .menu-find-group { margin-top: 0; }
.menu-find--operator .menu-find-title { margin: 16px 0 4px; padding: 0 18px; border: 0; font-size: .6rem; font-weight: 700; letter-spacing: .14em; color: var(--sun); }
.menu-find--operator .menu-find-title--other { margin: 18px 18px 4px; padding: .35rem .5rem; background: var(--menu-find-ink); color: var(--operator-menu-ground, #1A1A2E); }
.menu-find--operator .menu-find-row { padding: 6px 18px; border: 0; color: var(--menu-find-ink); font-size: .82rem; font-weight: 600; }
.menu-find--operator .menu-find-row:hover { background: var(--operator-menu-hover, color-mix(in srgb, var(--menu-find-ink) 8%, transparent)); color: var(--menu-find-ink); }
.menu-find--operator .menu-find-row.is-sel { padding: 6px 18px; background: var(--shape-chosen-ground); color: var(--on-sun); font-weight: 700; }
.menu-find--operator .menu-find-row--section,
.menu-find--operator .menu-find-row--section.is-sel { padding-left: 30px; font-size: .76rem; font-weight: 500; }
.menu-find--operator .menu-find-row--section:not(.is-sel) { color: color-mix(in srgb, var(--menu-find-ink) 80%, var(--menu-find-dim)); }
.menu-find--operator .menu-find-num { color: var(--sun); }
.menu-find--operator .menu-find-hit { text-decoration-color: var(--sun); }
.menu-find--operator :is(.menu-find-via, .menu-find-tail) { color: var(--menu-find-dim); }
.menu-find--operator .menu-find-row.is-sel :is(.menu-find-num, .menu-find-via, .menu-find-tail) { color: var(--on-sun); }
.menu-find--operator .menu-find-row.is-sel .menu-find-hit { text-decoration-color: var(--on-sun); }
.menu-find--operator .menu-find-none { margin: 16px 18px 0; border-color: var(--sun); background: transparent; color: var(--menu-find-ink); }
.menu-find--operator .menu-find-none .poster-action { color: var(--menu-find-ink); border-color: var(--menu-find-ink); }
.menu-find--operator .menu-find-none .poster-action:hover { color: var(--sun); border-color: var(--sun); }