/*
  Gener8 style kit — the search sheet (kit/js/search.js).

  A panel between the side panels, centred on the reach line: the search box, Search /
  By region, the scope (On screen / This model / Everywhere), then big result rows.
  By region shows regions and systems as large buttons with counts.
*/
.searchsheet {
  position: absolute; left: 50%; top: var(--reach); transform: translate(-50%, -50%); z-index: 7;
  width: min(92vw, calc(var(--u) * 62)); max-height: min(78vh, calc(var(--u) * 80));
  padding: calc(var(--u) * 1.3); border-radius: var(--r-lg);
  display: flex; flex-direction: column; gap: calc(var(--u) * .8);
}
.ss-top { display: flex; align-items: center; gap: calc(var(--u) * .6); }
.ss-field {
  flex: 1; display: flex; align-items: center; gap: calc(var(--u) * .6);
  min-height: calc(var(--u) * 5.6); padding: 0 calc(var(--u) * .4) 0 calc(var(--u) * 1.1);
  border-radius: var(--r); background: var(--well); border: 1px solid var(--line);
}
.ss-field input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font: inherit; font-size: calc(var(--tu) * 1.7); color: var(--ink); padding: calc(var(--u) * .8) 0;
  user-select: text; -webkit-user-select: text;
}
.ss-field input::-webkit-search-cancel-button { display: none; }
.ss-bars { display: grid; grid-template-columns: auto 1fr; gap: calc(var(--u) * .6); }
.ss-crumbs { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .5); }
.ss-crumbs:empty { display: none; }
.ss-out { overflow: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: calc(var(--u) * .2); min-height: calc(var(--u) * 10); }

.ss-row {
  display: flex; align-items: center; gap: calc(var(--u) * 1); text-align: left;
  min-height: calc(var(--u) * 5.4); padding: calc(var(--u) * .5) calc(var(--u) * .8); border-radius: var(--r);
}
.ss-row:active { background: var(--press); }
.ss-row > i { width: calc(var(--u) * 1.2); height: calc(var(--u) * 1.2); border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
.ss-row > i.ss-icon { width: auto; height: auto; box-shadow: none; font-style: normal; color: var(--accent); font-size: calc(var(--tu) * 1.4); }
.ss-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ss-t b { font-weight: 400; font-size: calc(var(--tu) * 1.5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-t small { font-size: calc(var(--tu) * 1.2); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-tag { min-height: calc(var(--u) * 3); font-size: calc(var(--tu) * 1.2); flex: none; }
.ss-empty { padding: calc(var(--u) * 2) calc(var(--u) * 1); color: var(--muted); font-size: calc(var(--tu) * 1.4); text-align: center; }

.ss-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * .6); }
.ss-region { min-height: calc(var(--u) * 6); justify-content: flex-start; gap: calc(var(--u) * .8); font-size: calc(var(--tu) * 1.45); }
.ss-region span:first-of-type { flex: 1; text-align: left; }
.ss-region i { width: calc(var(--u) * 1.2); height: calc(var(--u) * 1.2); border-radius: 50%; flex: none; }
.ss-region:disabled { opacity: .4; }