/* Search, the five-destination menu and the phone tab bar (UX overhaul, change 7 and 8). Zentrum tokens only. */

/* Search button in the top bar */
.sr-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px 0 12px; border: 1px solid var(--amino-border); border-radius: 99px;
  background: var(--amino-surface); color: var(--amino-text-muted); font: inherit; font-size: 13.5px; cursor: pointer; white-space: nowrap;
}
.sr-btn svg, .sr-field svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; flex: none; }
.sr-btn kbd { font-family: var(--amino-font-mono, ui-monospace, monospace); font-size: 11px; border: 1px solid var(--amino-border); border-radius: 5px; padding: 0 5px; }
.sr-btn:focus-visible { outline: 2px solid var(--z-accent); outline-offset: 2px; }

/* The search sheet */
.sr-scrim { position: fixed; inset: 0; z-index: 70; background: color-mix(in srgb, var(--amino-text) 22%, transparent); }
.sr-sheet {
  position: fixed; z-index: 71; top: 76px; left: 50%; transform: translateX(-50%); width: min(640px, calc(100vw - 32px)); max-height: min(70vh, 640px);
  display: flex; flex-direction: column; background: var(--amino-surface); color: var(--amino-text); border-radius: 18px; border: 1px solid var(--amino-border);
  box-shadow: var(--z-paper-shadow); overflow: hidden; animation: sr-in .14s ease;
}
@keyframes sr-in { from { opacity: 0; transform: translate(-50%, -4px); } }
.sr-field { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--amino-border); color: var(--amino-text-muted); }
.sr-field input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 16px; color: var(--amino-text); padding: 4px 0; box-shadow: none; height: auto; }
.sr-close { appearance: none; border: 0; background: var(--amino-surface-sunk); color: var(--amino-text-muted); border-radius: 99px; padding: 5px 11px; font: inherit; font-size: 12.5px; cursor: pointer; }
.sr-results { overflow-y: auto; padding: 6px; overscroll-behavior: contain; }
.sr-hint { margin: 0; padding: 14px 10px; color: var(--amino-text-muted); font-size: 13.5px; }
.sr-res {
  all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 9px 10px; border-radius: 10px;
}
.sr-res.on, .sr-res:focus-visible { background: var(--amino-surface-sunk); }
.sr-kind { font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--amino-text-muted); }
.sr-main { display: grid; min-width: 0; }
.sr-main strong { font-size: 14px; font-weight: 600; color: var(--amino-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-detail { font-size: 12.5px; color: var(--amino-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-amt { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--amino-text); white-space: nowrap; }

/* Account menu: settings and reference pages */
.z-menu-pages { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--amino-border); }
.z-menu-pages button {
  all: unset; box-sizing: border-box; cursor: pointer; padding: 8px 10px; border-radius: 10px; font-size: 13px; color: var(--amino-text);
}
.z-menu-pages button:hover, .z-menu-pages button:focus-visible { background: var(--amino-surface-sunk); }
.z-menu-pages button[aria-current="page"] { background: var(--amino-surface-sunk); font-weight: 600; }

/* Phone tab bar: hidden on wide screens */
.z-tabbar { display: none; }

@media (max-width: 760px) {
  /* The five destinations leave the top bar for the tab bar; the top bar keeps brand, Search, New, tasks and account. */
  .z-groups { display: none; }
  .z-bar { flex-wrap: nowrap; }
  .sr-btn { width: 36px; padding: 0; justify-content: center; }
  .sr-btn .sr-btn-l, .sr-btn kbd { display: none; }
  .z-tools { gap: 6px; }
  .z-menu { top: calc(env(safe-area-inset-top, 0px) + 66px); }
  .z-tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--z-glass); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 -1px 0 var(--amino-border);
  }
  .z-tabbar button {
    flex: 1 1 0; min-width: 0; appearance: none; border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 5px 0 3px; font: inherit; font-size: 10.5px; font-weight: 600; color: var(--amino-text-muted); cursor: pointer; border-radius: 12px;
  }
  .z-tabbar button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .z-tabbar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .z-tabbar button[aria-current="page"] { color: var(--amino-text); }
  .z-tabbar button[aria-current="page"] svg { stroke-width: 2.2; }
  .main { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  /* Toasts rise above the tab bar instead of covering it. */
  .toaster { bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important; }
}

@media (max-width: 640px) {
  .sr-sheet { top: auto; bottom: 0; left: 0; right: 0; transform: none; width: auto; max-height: 86vh; border-radius: var(--amino-radius-lg) var(--amino-radius-lg) 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); animation-name: sr-up; }
  .sr-res { grid-template-columns: minmax(0, 1fr) auto; }
  .sr-kind { grid-column: 1 / -1; margin-bottom: -6px; }
}
@keyframes sr-up { from { transform: translateY(24px); opacity: .4; } }