/* ─────────── screen bar ─────────── */
/* Three slots that never move: the page's single primary action on the left,
 * a search form or tab group in the middle, the ⋯ menu on the right. Both edge
 * slots are held even when empty and the height is fixed, so the action and the
 * menu sit at the same position on every screen. No title, no back button. */
.screen-bar {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.625rem;
  height: 3.375rem;
  padding: 0 var(--pad);
  background: var(--bar);
}
.screen-bar > .bar-actions { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.screen-bar > .bar-middle { display: flex; align-items: center; min-width: 0; overflow: hidden; }

.screen-bar .search-field {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: var(--bar-control);
  padding: 0 0.3125rem 0 0.6875rem;
  gap: 0.5rem;
  border-radius: 0.5625rem;
}
.screen-bar .search-field input { font-size: 0.9375rem; }
/* same footprint as the gold action beside it */
.screen-bar .icon-button { width: var(--bar-control); height: var(--bar-control); padding: 0; border-radius: 0.5625rem; }

.bar-action {
  flex: 0 0 auto;
  width: var(--bar-control);
  height: var(--bar-control);
  border-radius: 0.5625rem;
  border: 0;
  cursor: pointer;
  background: var(--accent);
  color: var(--accent-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bar-action:active { filter: brightness(.9); }
.bar-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* holds the slot open on pages with no primary action, at the same weight the
 * disabled menu button uses */
.bar-action:disabled { opacity: .22; cursor: default; }

.icon-button {
  flex: 0 0 auto;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0.3125rem;
  border-radius: 0.4375rem;
}
.icon-button:active { background: rgba(255, 255, 255, .06); }
.icon-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.icon-button:disabled { opacity: .22; cursor: default; }

.search-submit {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.5rem;
  border: 0;
  border-radius: 0.375rem;
  cursor: pointer;
  background: var(--raised);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.search-submit:active { background: var(--line-strong); color: var(--text); }
.search-submit:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ─────────── search ─────────── */
.search-field {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.6875rem;
  padding: 0.6875rem 0.8125rem;
}
.search-field:focus-within { border-color: var(--line-strong); }
.search-field .icon { flex: 0 0 auto; color: var(--faint); }
.search-field input {
  flex: 1 1 auto;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--text);
  caret-color: var(--accent);
}
.search-field input::placeholder { color: var(--faint); }
/* ─────────── saved searches ─────────── */
.saved-searches { display: flex; gap: 0.4375rem; overflow-x: auto; padding: 0.25rem var(--pad) 0.75rem; scrollbar-width: none; }
.saved-searches::-webkit-scrollbar { display: none; }
.saved-search {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  line-height: 1.5;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 1.25rem;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.6875rem;
  padding: 0 0.75rem;
  letter-spacing: .03em;
  white-space: nowrap;
}
.saved-search:active { border-color: var(--line-strong); color: var(--text); background: var(--raised); }
.saved-search:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }