/* find.css - the whole-app search screen (find.js) and nothing else.
     Its own file rather than more lines in styles.css, which is at the 1000-line limit.
     Relies on the palette variables in :root there, so it loads after it. */

  /* The box itself. Sticky so it stays put while she scrolls a long result list and can keep typing
     without scrolling back up. The top offset is the app header, measured into --hh by app.js. */
  .fx-input{position:sticky; top:0; z-index:12; width:100%; box-sizing:border-box; -webkit-appearance:none;
    background:var(--card); border:1px solid var(--line); border-radius:12px; color:var(--txt);
    font:inherit; font-size:16px; padding:13px 14px; margin:0 0 4px}
  .fx-input:focus{outline:none; border-color:var(--acc); box-shadow:0 0 0 3px rgba(180,143,154,.14)}
  .fx-input::placeholder{color:var(--mut2)}

  .fx-hint{font-size:13px; color:var(--mut); line-height:1.5; margin:12px 4px 2px}

  /* A workout row is a <button> (it may have to switch program first, see openRow), a screen row is an
     <a>. Same rule set, so the reset that a button needs is folded in and both look identical. */
  .fx-row{display:flex; align-items:center; gap:12px; width:100%; box-sizing:border-box; text-align:left;
    background:var(--card); border:1px solid var(--line); color:inherit; font:inherit;
    border-radius:12px; padding:11px 12px; margin-bottom:8px}
  .fx-row:active{background:var(--card2)}
  .fx-ic{width:34px; height:34px; border-radius:10px; flex:none; display:flex; align-items:center;
    justify-content:center; background:rgba(180,143,154,.12); color:var(--acc)}
  .fx-ic .ic{width:18px; height:18px}
  .fx-row .grow{min-width:0}
  .fx-t{font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  /* the matched letters, so it's obvious why a row came back */
  .fx-t b{color:var(--acc); font-weight:800}
  .fx-s{font-size:12.5px; color:var(--mut); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .fx-row .chev{color:var(--mut2); flex:none; font-size:20px; line-height:1}

  /* No search field on Home: Tina didn't want one taking up the top of the screen. The way in is the
     "Search" chip in the quick links at the bottom of Home (homeTilesHTML in helpers.js). */