/* UX pack 181 — čipy spevníkov, Čo spievame, omša, mobilný spev. */

.group-chips { display: none !important; }

.sing-now {
  margin: 0 0 18px;
}
.sing-now label {
  display: block;
  margin: 0 0 8px;
  font-size: 0.82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.sing-now input[type="search"] {
  width: 100%;
  min-height: 56px;
  font-size: 1.15rem;
  padding: 12px 16px;
  border-radius: 14px;
}
.sing-now-results {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 46vh;
  overflow: auto;
}
.sing-now-results .search-hit {
  text-align: left;
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: inherit;
  cursor: pointer;
}
.sing-now-results .search-hit strong { display: inline; }
.sing-now-results .search-hit .meta { display: block; color: var(--muted); font-size: 0.85rem; }

.home-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 10px;
  margin: 18px 0 8px;
}
.home-tile {
  text-align: left;
  padding: 14px 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: inherit;
  cursor: pointer;
  min-height: 88px;
}
.home-tile span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.home-tile strong {
  display: block;
  font-size: 1rem;
  line-height: 1.25;
}
.home-tiles:empty { display: none; }

.sheet-mode-switch {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  flex: 0 0 auto;
}
.sheet-mode-btn {
  min-height: 48px;
  min-width: 72px;
  padding: 8px 16px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
}
.sheet-mode-btn.is-on {
  background: var(--accent);
  color: #141820;
}
.sheet-mode-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.fav-toggle {
  margin-left: 8px;
  min-width: 44px;
  min-height: 44px;
}

#btn-toggle-pdf { display: none !important; }

html[data-layout="phone"] .song-key-badge,
html[data-layout="phone"] .song-capo-badge,
html[data-layout="tablet"][data-orient="portrait"] .song-key-badge,
html[data-layout="tablet"][data-orient="portrait"] .song-capo-badge {
  display: none;
}

html[data-layout="phone"] .step-select .btn-step,
html[data-layout="tablet"][data-orient="portrait"] .step-select .btn-step {
  min-width: 56px;
  min-height: 56px;
  font-size: 1.6rem;
  font-weight: 700;
}

html[data-layout="phone"][data-theme="church"],
html[data-layout="tablet"][data-orient="portrait"][data-theme="church"] {
  --sheet-lyrics-size: 1.28rem;
  --sheet-chord-size: 1.05rem;
}
html[data-layout="phone"] .view-title,
html[data-layout="tablet"][data-orient="portrait"] .view-title {
  font-size: 1.55rem;
}

body.reading-focus #song-toolbar,
body.reading-focus .sheet-zoom-bar {
  display: none !important;
}
body.reading-focus.song-tools-open #song-toolbar {
  display: flex !important;
}
body.reading-focus.song-tools-open .sheet-zoom-bar:not([hidden]) {
  display: flex !important;
}

body.mass-mode .mass-bar {
  grid-template-columns: 1fr 1.2fr 1fr;
}
body.mass-mode #view-library:not(:has(#song-editor:not(.hidden))) #song-toolbar {
  bottom: calc(84px + env(safe-area-inset-bottom));
}
body.mass-mode #mass-verse {
  font-size: 1.12rem;
  font-weight: 700;
}

html[data-layout="phone"] body.is-guest .nav-login-btn,
html[data-layout="phone"] body.is-guest #btn-login,
html[data-layout="phone"] body.is-guest .sidebar-import,
html[data-layout="phone"] body.is-guest #btn-import,
html[data-layout="phone"] body.is-guest #btn-new-own-group,
html[data-layout="phone"] body.is-guest .sidebar-head a[href="register.php"],
html[data-layout="phone"] body.is-guest #more-admin,
html[data-layout="tablet"][data-orient="portrait"] body.is-guest .nav-login-btn,
html[data-layout="tablet"][data-orient="portrait"] body.is-guest #btn-login,
html[data-layout="tablet"][data-orient="portrait"] body.is-guest .sidebar-import,
html[data-layout="tablet"][data-orient="portrait"] body.is-guest #more-admin {
  display: none !important;
}

.chord {
  cursor: pointer;
  text-decoration: underline dotted color-mix(in srgb, var(--chord) 55%, transparent);
  text-underline-offset: 3px;
}

#hymnal-offline-status { min-height: 1.2em; }

@media (max-width: 800px) {
  .home-dash { margin-top: 2vh; }
  .home-ask { font-size: 1.55rem; margin-bottom: 14px; }
  .bottom-nav-item { font-size: 0.72rem; }
}