/* TASK-1137 (owner #254, variant В of TASK-1129): «Find a casino review» above the ranking — label and count, the field,
   results as cards in the page flow (not an overlay). Tokens of styles.css only; sizes from docs/os/work/TASK-1129/spec.md:
   field 48 px, border 1.5 px --muted (≈ 8:1 to the page), text 17 px, rows ≥ 56 px, focus ring 3 px --purple + 2 px. */
.cs { position: relative; margin: 0 0 14px; color: var(--ink); text-align: left; scroll-margin-top: 72px; }
.cs-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.cs-label { font-weight: 800; font-size: 17px; line-height: 1.3; color: var(--ink); }
.cs-count { font-weight: 600; font-size: 15px; color: var(--muted); white-space: nowrap; }
.cs-box { position: relative; display: flex; align-items: center; background: var(--surface); border: 1.5px solid var(--muted); border-radius: 10px; min-height: 48px; }
.cs-box:focus-within { outline: 3px solid var(--purple); outline-offset: 2px; border-color: var(--purple); }
.cs-ico { width: 20px; height: 20px; flex: 0 0 auto; margin-left: 12px; color: var(--muted); }
.cs-in { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font-size: 17px; font-weight: 500; color: var(--ink); padding: 0 8px; height: 45px; outline: none; -webkit-appearance: none; appearance: none; }
.cs-in::placeholder { color: var(--muted); opacity: 1; }
.cs-in::-webkit-search-cancel-button, .cs-in::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.cs-clear { flex: 0 0 auto; width: 44px; height: 44px; border: 0; background: transparent; color: var(--muted); font-size: 24px; line-height: 1; border-radius: 8px; }
.cs-clear:focus-visible { outline: 3px solid var(--purple); outline-offset: -3px; box-shadow: none; }
.cs-list { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; margin-top: 8px; padding: 6px; }
.cs-res { margin: 0; font-size: 14px; color: var(--muted); padding: 2px 6px 4px; }
.cs-res:empty { display: none; }
.cs-opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cs-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 56px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; color: var(--ink); }
.cs-opt:hover, .cs-opt[aria-selected=true] { background: var(--purple-soft); }
.cs-opt[aria-selected=true] { box-shadow: inset 3px 0 0 var(--purple); outline: 2px solid var(--purple); outline-offset: -2px; }
/* TASK-1241 (UX-01): forced colors drop the fill and the shadow — the chosen row takes the system selection colours
   (Highlight / HighlightText), as a native listbox does; its neighbours stay Canvas. */
@media (forced-colors: active) {
  .cs-opt[aria-selected=true] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; outline: 2px solid CanvasText; outline-offset: 1px; }
  .cs-opt[aria-selected=true] .cs-name, .cs-opt[aria-selected=true] .cs-name small, .cs-opt[aria-selected=true] .cs-meta,
  .cs-opt[aria-selected=true] .cs-meta b, .cs-opt[aria-selected=true] .cs-go { color: HighlightText; border-color: HighlightText; }
}
.cs-tx { display: flex; flex-direction: column; min-width: 0; }
.cs-name { font-size: 17px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.cs-name small { font-weight: 600; font-size: 14px; color: var(--muted); }
.cs-meta { font-size: 15px; line-height: 1.3; color: var(--muted); }
.cs-meta b { color: var(--ink); font-weight: 700; }
.cs-go { flex: 0 0 auto; display: flex; align-items: center; min-height: 32px; padding: 6px 12px; font-size: 15px; font-weight: 800; color: var(--purple); border: 1.5px solid var(--purple); border-radius: 8px; }
.cs-more, .cs-foot { font-size: 14px; color: var(--muted); padding: 6px 12px; }
.cs-foot { border-top: 1px solid var(--line); margin-top: 4px; }
.cs-empty { padding: 10px 12px; font-size: 16px; }
.cs-empty a { color: var(--purple); font-weight: 700; }
@media (min-width: 760px) {
  .cs-opts { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1200px) {
  .cs-grid { display: grid; grid-template-columns: 1fr 420px; gap: 16px; align-items: center; }
  .cs-top { margin: 0; justify-content: flex-start; gap: 14px; }
  .cs-opts { grid-template-columns: 1fr 1fr 1fr; }
}
/* TASK-1380: the block is hidden in the HTML and search.js (deferred) shows it at DOMContentLoaded — the ranking under
   it moved 62–91 px down on every load (CLS 0.015–0.047, 0.08–0.10 on a reload while scrolled). With scripting on the
   box takes its room from the first paint, invisible (not focusable, not read) until search.js drops [hidden], so
   nothing moves. Without scripting it stays display:none (styles.css [hidden]), as before. */
@media (scripting: enabled) {
  .cs[hidden] { display: block !important; visibility: hidden; }
}
@media print { .cs, .cs[hidden] { display: none !important; } }