/* ===== polish: a lighter header, a cleaner song row, clearer text ===== */

/* A · header: one row (name · playlist · add · menu), then search. no status line unless something is wrong */
.brand .sub{display:none}
.brand .sub.warn{display:block;color:var(--no,#FF6B6B);font-weight:800}
@media(max-width:620px){
  .topbar-in{padding:8px 12px;gap:8px;flex-wrap:wrap}
  .brand{flex:1 1 0;min-width:0;gap:8px}
  .brand > div:last-child{min-width:0}
  .brand .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw;font-size:10.5px}
  .topbar-in .gigbtn,.topbar-in .iconbtn{flex:0 0 auto}
  .logo{width:32px;height:32px;border-radius:10px}
  .logo span{width:24px;height:24px;border-radius:8px;font-size:13px}
  .brand h1{font-size:18px;white-space:nowrap}
  .gigbtn{padding:8px 13px;font-size:13px;min-height:40px}
  #bandbtn{display:none}
  .iconbtn{width:40px;height:40px;border-radius:12px}
  .searchwrap{order:2;flex:1 1 100%}
  #q{padding-block:9px}
}

/* C · song row: title and performer readable, the key as a small tag, no unexplained dots */
.row{min-height:62px}
.row-s{color:color-mix(in srgb,var(--tx) 70%,transparent);opacity:1}
.row-marks .mk{display:none}
.row-marks .nolyr{font-size:11.5px;font-weight:800;color:var(--mut);border:1px dashed var(--line-2);border-radius:8px;padding:2px 7px;white-space:nowrap}
.row-marks .hasvid{font-size:12px;color:var(--mut)}
.keytag{font-size:13px;border-width:1px;padding:2px 9px;border-radius:9px;opacity:.95}

/* E · contrast: the performer and the small captions */
.byline{color:color-mix(in srgb,var(--tx) 72%,transparent)}
.byline b,.byline a{color:var(--tx);font-weight:800}
.listmeta,.stats{color:color-mix(in srgb,var(--tx) 68%,transparent)}
.songcard .kbk{opacity:1}

/* B · song card: the words come first; the tools sit folded underneath */
.songcard .hero .inner{align-items:center}

/* long lists: the browser skips layout and paint for rows that are off screen (opening a song re-laid-out all 700 rows) */
.list .row{content-visibility:auto;contain-intrinsic-size:auto 80px}

/* the key filter button: always a labelled pill (it used to share the density button's icon-only look on a phone) */
.keyfilterbtn{font-size:13px;font-weight:800;color:var(--tx);padding:6px 12px;border-radius:99px;border:1px solid var(--line-2);background:var(--panel);min-height:36px;white-space:nowrap}
.keyfilterbtn.on{background:var(--acc);color:#0B0C10;border-color:transparent}

/* the playlist being built, folded: a large floating pill (drag it anywhere); count and name readable at a glance */
@media(max-width:960px){
  .buildpane.mini{inset-inline-start:auto;inset-inline-end:10px;width:auto;max-width:calc(100% - 20px);border-radius:999px;box-shadow:0 8px 28px rgba(0,0,0,.5),0 0 0 2px var(--cc)}
  .buildpane.mini .bp-head{padding:8px 10px 8px 14px;gap:10px;min-height:64px}
  .buildpane.mini .bp-back,.buildpane.mini .bp-grip{display:none}
  .buildpane.mini .bp-ico{display:inline;font-size:24px}
  .buildpane.mini .bp-name{font-size:17px;max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .buildpane.mini .bp-sub{display:block;font-size:13px;max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .buildpane.mini .bp-x{min-height:46px;padding:0 16px;font-size:15px}
  .buildpane.mini .bp-head{-webkit-user-select:none;user-select:none}
  .bp-drag{display:none}
  .buildpane.mini .bp-drag{display:block;font-size:22px;line-height:1;color:var(--fnt);cursor:grab;padding:0 2px;touch-action:none}
  #app:has(.buildpane:not([hidden])) main{padding-bottom:calc(150px + env(safe-area-inset-bottom))}
}
.bp-drag{display:none}

/* on a phone the playlist being built is a bar fixed above the bottom navigation. a later desktop rule
   (position:sticky) was overriding it, so the bar sat at the very end of a very long page and "nothing" showed */
@media(max-width:960px){
  .buildpane{position:fixed;top:auto;inset-inline:8px;bottom:calc(72px + env(safe-area-inset-bottom));z-index:65;max-height:52vh;margin:0}
}

/* ===== v147: calmer song page, fuller song names, one tools row ===== */

/* song page: a short header (category · title · performer · key), then play, then five actions, then the words */
.hero .inner{flex-wrap:wrap;gap:8px}
.hero .art{order:1}
.hero .keybig{order:2;margin-inline-start:auto;display:inline-flex;align-items:center;gap:8px;padding:4px 12px;border-radius:99px}
.hero .keybig .kbk{font-size:11px;letter-spacing:0}
.hero .keybig .kbv{font-size:16px}
.hero .txt{order:3;flex:1 1 100%;max-width:100%}
.hero .txt .cat.tapedit.catchange{min-height:32px;padding:4px 12px;font-size:12px}
.hero h2{font-size:clamp(24px,6.2vw,30px)}
.heroinfotog{margin-top:8px;font-size:13px;font-weight:800;color:var(--mut);padding:6px 12px;min-height:36px;border-radius:99px;border:1px solid var(--line-2);background:transparent}
.heroinfo{margin-top:8px}
.heroinfo[hidden]{display:none}
.heroinfo .byline{font-size:13.5px}
.bigplay{padding:10px 16px;min-height:0}
.bigplay .bp-ic{width:36px;height:36px;font-size:16px}
.bigplay .bp-2{display:none}

.actionbar{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:10px 14px}
.actionbar .act{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:58px;padding:6px 2px;border-radius:16px;white-space:nowrap}
.actionbar .act .ai{font-size:20px;line-height:1}
.actionbar .act .al{font-size:12px;font-weight:800}
.actmore{padding:0 14px 10px}

/* the folded reference sections: one compact line each */
.foldbar{padding:10px 15px;gap:10px}
.foldbar .fb-i{width:28px;height:28px;font-size:17px}
.foldbar .fb-s{display:none}

/* lists: the whole song name (two lines if needed), a readable performer, secondary marks stay quiet */
.list .row-t{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:18px;line-height:1.28}
.list:not(.dense) .row-s{font-size:14px;color:color-mix(in srgb,var(--tx) 78%,transparent)}
.list .row-marks .nolyr{display:none}
.list .row-marks{gap:6px}
.list .row-marks .keytag{font-size:12.5px;padding:2px 8px}
.list.dense .row-t{-webkit-line-clamp:1;font-size:16px}

/* list tools: count · sort · key · density in one tidy row */
#listtools{align-items:center;gap:8px}
.sortsel{font:inherit;font-size:13px;font-weight:800;color:var(--tx);background:var(--panel);border:1px solid var(--line-2);border-radius:99px;padding:6px 12px;min-height:36px;max-width:46vw}
.backout{padding:8px 12px}
.backout .bo-s{font-size:12px}

/* header: the playlist button, then three labelled buttons (add a song · links · settings), then search */
.pillbtn{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 12px;min-height:40px;border-radius:99px;font-size:13.5px;font-weight:900;color:var(--tx);background:var(--panel);border:1px solid var(--line-2);white-space:nowrap}
.pillbtn b{font-size:15px;line-height:1}
.pillbtn:hover{border-color:var(--acc);color:var(--acc)}
.hdractions{display:flex;gap:8px;flex:1 1 100%;order:1}
.searchwrap{order:2}
@media(min-width:621px){.hdractions{flex:0 0 auto;order:0}.pillbtn{flex:0 0 auto}}
#bandbtn{display:none}
#app.gig .topbar .hdractions{display:none}
body.guest #linksbtn,body.guest #addbtn{display:none!important}
@media(min-width:621px) and (max-width:1700px){.hdractions .pl{display:none}.hdractions .pillbtn{padding:8px 12px;min-width:40px}}

/* the stages of an event (הרקדה, חופה…): big tiles in a tidy grid instead of small chips that scroll sideways */
.stagechips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;overflow:visible;padding:4px 0 12px}
.stagechip{display:flex;align-items:center;gap:10px;min-height:68px;padding:10px 14px;border-radius:18px;white-space:normal;text-align:start;
  font-size:18px;font-weight:900;line-height:1.2;border:2px solid color-mix(in srgb,var(--cc) 55%,var(--line-2));background:color-mix(in srgb,var(--cc) 12%,var(--panel))}
.stagechip .sc-i{font-size:28px;line-height:1;flex:0 0 auto}
.stagechip .sc-n{flex:1;min-width:0}
.stagechip .sc-c{flex:0 0 auto;font-size:15px;font-weight:800;color:var(--mut);font-variant-numeric:tabular-nums}
.stagechip.on{background:var(--cc);color:#1a1405;border-color:var(--cc)}
.stagechip.on .sc-c{color:#1a1405;opacity:.75}

/* v154 song page: the reference sections under the words are one row of small chips; the one you open spans the full width */
.foldrow{display:flex;flex-wrap:wrap;gap:8px;padding:12px 14px 16px;border-top:1px solid var(--line)}
.foldrow > .foldsec{flex:0 0 auto;margin:0;border:0;background:none;border-radius:0;padding:0}
.foldrow > .foldsec.open{flex:1 1 100%;order:0;border:1px solid var(--line-2);border-radius:16px;background:var(--panel-2);overflow:hidden}
.foldrow > .foldsec:not(.open) .foldbar{width:auto;padding:8px 14px;border-radius:99px;border:1px solid var(--line-2);background:var(--panel);min-height:40px;gap:8px}
.foldrow > .foldsec:not(.open) .foldbar .fb-i{width:auto;height:auto;font-size:16px;background:none;border:0}
.foldrow > .foldsec:not(.open) .foldbar .fb-n{font-size:13.5px;max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.foldrow > .foldsec:not(.open) .foldbar .fb-a{display:none}
.foldrow > .foldsec.open .foldbar{padding:12px 15px}