/* Page band: the school's bar color continues down from the top bar behind each page's search,
   so the top of the page reads as one masthead. Used by Inventory and Classrooms. */
.search-wrap {
   padding-inline: 16px;
   background: var(--bar);
   color: var(--bar-fg);
   transition:
      background 0.25s,
      color 0.25s;
}
.search-in {
   max-width: 1280px;
   margin: 0 auto;
   padding-block: 8px 0;
   display: flex;
   flex-direction: column;
   gap: 12px;
}
.search-row {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
}
.search {
   flex: 1 1 420px;
   min-width: 0;
   display: flex;
   align-items: stretch;
   border-radius: 10px;
   padding: 4px;
   background: var(--surface);
   color: var(--fg);
   overflow: hidden;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
   transition: box-shadow 0.15s;
}
.search:focus-within {
   box-shadow:
      0 0 0 3px color-mix(in srgb, var(--bar-fg) 55%, transparent),
      0 2px 10px rgba(0, 0, 0, 0.18);
}
.search svg {
   flex: none;
   align-self: center;
   margin-left: 12px;
   color: var(--muted);
}
.search input {
   flex: 1;
   min-width: 0;
   border: 0;
   background: transparent;
   padding: 11px 12px;
   font-size: 19px;
   outline: none;
}
.search button {
   border: 0;
   background: var(--accent);
   color: var(--on-accent);
   padding: 0 24px;
   border-radius: 7px;
   font-weight: 600;
   font-size: 15px;
   cursor: pointer;
}
/* Phones: the keyboard's search key submits, so the field and Add share one row. */
@media (max-width: 520px) {
   .search-row {
      flex-wrap: nowrap;
   }
   .search {
      flex: 1 1 auto;
   }
   .search button {
      display: none;
   }
   .search input {
      padding-inline: 10px;
      font-size: 17px;
   }
   .search-row .btn.primary {
      padding-inline: 14px;
   }
}
/* On the band, the primary button flips to the bar's own colors so it stands out on any school color. */
.search-row .btn.primary {
   background: var(--bar-fg);
   border-color: var(--bar-fg);
   color: var(--bar);
   border-radius: 10px;
   padding-inline: 20px;
   font-size: 15px;
}
.hint {
   font-size: 12px;
   color: color-mix(in srgb, var(--bar-fg) 75%, transparent);
}
.hint kbd {
   font-family: var(--font-mono);
   font-size: 11px;
   border: 1px solid color-mix(in srgb, var(--bar-fg) 40%, transparent);
   border-bottom-width: 2px;
   border-radius: 4px;
   padding: 0 5px;
}

/* "Press / to search" only means something with a keyboard */
@media (hover: none) and (pointer: coarse) {
   .kbd-hint {
      display: none;
   }
}

/* Pages without tabs under the search close the band with padding instead. */
.search-wrap.no-tabs .search-in {
   padding-bottom: 20px;
}