/* iCifra 0.8.42 — home page search next to "Explorar músicas".
   The one global search field (#searchInput: same results, "/" shortcut, Esc) is moved by app.js into the hero row
   (#homeSearchSlot) on the home page and back to the top bar on every other view. No extra search row. */
/* (0.8.47) the search button stays in the top bar on the home page too: it focuses this field — see header-layout.css */

.home-view .hero .hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px}
.home-view .hero .hero-actions .hero-button{flex:0 0 auto}
.home-search-slot{flex:1 1 340px;min-width:0;max-width:560px}
.home-search-slot .global-search{display:flex;position:relative;align-items:center;width:100%;margin:0;padding:0;border:0;background:none;box-shadow:none;inset:auto}
.home-search-slot .global-search input{height:50px;width:100%;padding:0 46px 0 46px;border:1.5px solid var(--accent-2);border-radius:13px;background:color-mix(in srgb,var(--surface) 92%,transparent);color:var(--text);font-size:16px;line-height:1.2;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-2) 10%,transparent)}
.home-search-slot .global-search input::placeholder{color:var(--muted);opacity:1}
.home-search-slot .global-search input:focus{outline:3px solid var(--accent-2);outline-offset:2px}
.home-search-slot .global-search .search-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);font-size:22px;line-height:1;color:var(--accent-2);pointer-events:none}
.home-search-slot .global-search>kbd{display:block;position:absolute;right:14px;top:50%;transform:translateY(-50%)}
.home-search-slot .search-results{position:absolute;top:calc(100% + 6px);left:0;right:0;width:auto;max-height:min(440px,60vh);z-index:120}

/* "Ver como funciona": a small secondary link at the end of the intro text */
.hero-help-link{display:inline;padding:2px 0;margin:0;border:0;background:none;color:var(--accent-2);font:inherit;font-size:.92em;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer;white-space:nowrap}
.hero-help-link:hover{color:var(--text)}
.hero-help-link:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px;border-radius:4px}

/* Narrow screens: the button keeps its size and the field takes its own full-width line below it */
@media(max-width:700px){
 .home-search-slot{flex-basis:100%;max-width:none}
 .home-search-slot .global-search>kbd{display:none}
 .home-search-slot .global-search input{padding-right:14px;height:48px}
}

/* the magnifier is an SVG in every view; its size follows the font-size each view already sets */
.global-search .search-icon svg{display:block;width:1em;height:1em}
/* the results list must sit above the sections that follow the hero (they create their own stacking layers) */
.home-view .hero:focus-within{position:relative;z-index:60}
.home-view .hero:has(.search-results:not([hidden])){position:relative;z-index:60}
/* Homepage: two clear destinations, then a full-width search. */
.home-view .hero .hero-actions{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:stretch;gap:12px;max-width:680px}
.home-view .hero .hero-actions .hero-button,.home-view .hero .hero-actions .hero-tools-button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-width:0;min-height:54px;margin:0;padding:12px 16px;border-radius:14px;font-size:15px;font-weight:750;line-height:1.2;white-space:normal}
.hero-tools-button{border:1px solid var(--accent-2);background:linear-gradient(135deg,#0d4f59,#092637);color:#b9fff3;box-shadow:inset 0 1px 0 #ffffff15;cursor:pointer}
.hero-tools-button svg{width:23px;height:23px;flex:none}.hero-tools-button:hover{background:#145563}.hero-tools-button:focus-visible{outline:3px solid var(--accent-2);outline-offset:3px}
.home-view .hero .hero-actions .home-search-slot{grid-column:1/-1;max-width:none;width:100%;margin-top:2px}
@media(max-width:599px){
 .home-view .hero .hero-actions{gap:10px;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}
 .home-view .hero .hero-actions .hero-button,.home-view .hero .hero-actions .hero-tools-button{min-height:52px;padding:10px;font-size:13px;gap:6px}
 .home-view .hero .hero-actions .hero-button>strong{font-size:13px}
 .home-view .hero .hero-actions .hero-button{justify-content:center}
 .hero-tools-button svg{width:21px;height:21px}
 .home-view .dashboard-shortcuts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:12px}
 .home-view .dashboard-shortcuts>button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:66px;padding:7px 3px;border-radius:12px;text-align:center;background:#0c1d2d}
 .home-view .dashboard-shortcuts .shortcut-icon{width:24px;height:24px;font-size:21px;border:0;background:transparent;box-shadow:none}
 .home-view .dashboard-shortcuts strong{display:block;font-size:10px;line-height:1.25;overflow-wrap:normal}
 .home-view .dashboard-shortcuts small,.home-view .dashboard-shortcuts b{display:none}
}
/* 0.8.84: compact desktop home actions and activity cards. */
@media(min-width:901px){
 .home-view .hero .hero-actions{grid-template-columns:minmax(190px,max-content) minmax(160px,max-content) minmax(240px,1fr);max-width:900px;gap:12px;align-items:center}
 .home-view .hero .hero-actions .home-search-slot{grid-column:3;grid-row:1;margin:0}
 .home-view .hero .hero-actions .hero-button,.home-view .hero .hero-actions .hero-tools-button{min-height:46px;height:46px;padding:8px 10px;font-size:14px;gap:7px;white-space:nowrap}
 .home-view .hero .hero-actions .hero-button>strong{font-size:14px}
 .home-view .hero .hero-actions .global-search input{height:46px;font-size:15px}
 .home-view .hero{padding-bottom:12px}
}
.home-view .dashboard-activity>div{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;padding:7px 8px;gap:3px 6px}
.home-view .dashboard-activity>div>span{font-size:19px;line-height:20px}
.home-view .dashboard-activity>div>strong{font-size:19px;line-height:20px}
.home-view .dashboard-activity>div>small{grid-column:1/-1;line-height:13px;overflow-wrap:anywhere}
@media(min-width:901px){.home-view .hero .hero-actions #startPlayingBtn{height:46px;min-height:46px;padding:8px 10px}}
/* Existing autocomplete, with a full-width local-lyrics excerpt. */
.global-search .search-result.has-lyrics{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;text-align:left}
.global-search .search-result.has-lyrics>strong,.global-search .search-result.has-lyrics>span{min-width:0;overflow-wrap:anywhere}
.global-search .search-lyrics{grid-column:1/-1;display:block;font-size:12px;line-height:1.5;color:var(--muted);white-space:normal;overflow-wrap:anywhere}
.global-search .search-lyrics mark{color:var(--text);background:var(--surface-2);font-weight:800;border-radius:3px;padding:0 2px;text-decoration:underline;text-decoration-color:var(--accent-2)}