/* Общий стеклянный материал «Сегодня»; временно только три вкладки и поиск. */
#nav .nav-btn { flex-direction: row; gap: 0; }
#nav .nav-btn .ico { width: 27px; height: 27px; }
#phone.notes-shell-open #top { display: none; }
#scrNotes.notes-shell { background: var(--bg); }
.ng-root { padding: calc(env(safe-area-inset-top, 0px) + var(--sp-12)) var(--sp-12) 0; gap: var(--sp-12); }
.ng-tabs, .ng-search {
  flex: none; position: relative; isolation: isolate;
  border: 1px solid var(--glass-line); border-radius: var(--r-pill);
  background: var(--glass);
  box-shadow: inset 0 1px color-mix(in srgb, var(--fg) 26%, transparent), 0 8px 24px color-mix(in srgb, var(--bg) 35%, transparent);
  backdrop-filter: blur(24px) saturate(115%); -webkit-backdrop-filter: blur(24px) saturate(115%);
}
.ng-tabs { display: flex; min-width: 0; padding: var(--sp-4); }
.ng-tab {
  flex: 1; min-width: 0; min-height: var(--tap); padding: 0 var(--sp-4);
  border-radius: var(--r-pill); color: color-mix(in srgb, var(--fg) 65%, var(--bg));
  font-size: var(--fs-small); font-weight: var(--fw-medium); white-space: nowrap;
}
.ng-tab[aria-selected="true"] {
  color: var(--fg); font-weight: var(--fw-semibold);
  border: 1px solid color-mix(in srgb, var(--fg) 27%, transparent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--fg) 21%, transparent), color-mix(in srgb, var(--fg) 4%, transparent) 50%, color-mix(in srgb, var(--fg) 9%, transparent));
  box-shadow: inset 0 1px color-mix(in srgb, var(--fg) 38%, transparent), 0 3px 12px color-mix(in srgb, var(--bg) 32%, transparent);
}
.ng-search { display: flex; align-items: center; gap: var(--sp-10); min-height: calc(var(--tap) + var(--sp-8)); padding: 0 var(--sp-12); }
.ng-search > .ico { flex: none; width: 20px; height: 20px; color: color-mix(in srgb, var(--fg) 60%, var(--bg)); }
.ng-search-input { flex: 1; min-width: 0; min-height: var(--tap); padding: 0; border: 0; outline: none; background: transparent; color: var(--fg); font-family: inherit; font-size: var(--fs-lead); }
.ng-search-input::placeholder { color: color-mix(in srgb, var(--fg) 55%, var(--bg)); }
.ng-search-input::-webkit-search-cancel-button { display: none; }
.ng-search-clear { flex: none; display: grid; place-items: center; width: var(--tap); height: var(--tap); margin-right: calc(-1 * var(--sp-8)); color: color-mix(in srgb, var(--fg) 70%, var(--bg)); border-radius: var(--r-round); }
.ng-search:focus-within { border-color: color-mix(in srgb, var(--fg) 40%, transparent); }
.ng-results { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 0 0 var(--sp-16); }
.ng-results::-webkit-scrollbar { display: none; }
.ng-result { display: block; width: 100%; min-height: var(--tap); padding: var(--sp-12); margin-bottom: var(--sp-8); border: 1px solid var(--glass-line); border-radius: var(--r-16); background: var(--glass); color: var(--fg); text-align: left; overflow-wrap: anywhere; }
.ng-result b, .ng-result span { display: block; }
.ng-result b { font-size: var(--fs-lead); font-weight: var(--fw-semibold); }
.ng-result span { margin-top: var(--sp-4); color: color-mix(in srgb, var(--fg) 65%, var(--bg)); font-size: var(--fs-small); }
.ng-result mark { background: color-mix(in srgb, var(--fg) 20%, transparent); color: inherit; }
.ng-empty { margin: var(--sp-16) 0; text-align: center; font-size: var(--fs-body); color: color-mix(in srgb, var(--fg) 60%, var(--bg)); }
.ng-tab:focus-visible, .ng-search-clear:focus-visible, .ng-result:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .ng-tab { transition: background .18s, box-shadow .18s, color .18s; }
}