/* ============ עריכה בלחיצה ============ */
/* the category label and the key badge are buttons now — a dotted underline says
   so without turning the card into a form. */
.hero .cat.tapedit{background:none;border:none;padding:0;font:inherit;cursor:pointer;
  border-bottom:1px dashed currentColor;line-height:1.5}
.hero .cat.tapedit:hover{opacity:.75}
.keybig.tapedit{cursor:pointer;transition:.14s}
.keybig.tapedit:hover{border-color:var(--cc);
  background:color-mix(in srgb, var(--cc) 26%, transparent)}
.keybig.none{border-style:dashed;opacity:.72}
.keybig.none .kbv{font-size:15px}

.catgrid{display:grid;gap:6px;margin-top:12px;max-height:min(52vh,420px);overflow:auto}
.catopt{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:13px;
  border:1px solid var(--line);background:var(--panel-2);text-align:start;transition:.14s;
  border-inline-start:3px solid var(--cc)}
.catopt:hover{border-color:var(--cc);background:var(--panel-3)}
.catopt.on{background:color-mix(in srgb, var(--cc) 16%, var(--panel-2));border-color:var(--cc)}
.catopt .co-i{font-size:19px;flex:0 0 auto}
.catopt .co-t{flex:1;min-width:0}
.catopt .co-n{font-size:15px;font-weight:800;letter-spacing:-.02em}
.catopt .co-s{font-size:11.5px;color:var(--mut);font-weight:700}
.catopt .co-v{font-size:16px;font-weight:900;color:var(--cc);
  color:color-mix(in srgb, var(--cc), #000 var(--cc-dark))}

.keygrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px;
  margin-top:12px}
.keyopt{padding:11px 8px;border-radius:12px;border:1px solid var(--line);
  background:var(--panel-2);font-size:14px;font-weight:800;direction:ltr;transition:.14s}
.keyopt:hover{border-color:var(--acc);color:var(--acc)}
/* the keys that sit well in his range are the ones he should reach for first */
.keyopt.fit{border-color:var(--acc-line);color:var(--acc);background:var(--acc-dim)}
.keyopt.on{background:var(--acc);border-color:var(--acc);color:#0B0C10;font-weight:900}
:root[data-theme="light"] .keyopt.on,:root:not([data-theme="dark"]) .keyopt.on{color:#fff}


/* ============ תיקיות בתוך כרטיס השיר ============ */
.foldrow{display:flex;flex-wrap:wrap;gap:7px}
.foldchip{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:99px;
  font-size:14px;font-weight:800;border:1px solid var(--line-2);background:var(--panel-2);
  color:var(--tx-2);transition:.14s;min-height:42px}
.foldchip:hover{border-color:var(--cc);color:var(--cc);
  color:color-mix(in srgb, var(--cc), #000 var(--cc-dark))}
.foldchip.on{background:var(--cc);border-color:var(--cc);color:#0B0C10}
:root[data-theme="light"] .foldchip.on,
:root:not([data-theme="dark"]) .foldchip.on{color:#fff}
:root[data-theme="dark"] .foldchip.on{color:#0B0C10}
.foldchip .fc-i{font-size:15px;line-height:1;flex:0 0 auto}
.foldchip.on .fc-i{font-weight:900}
.foldchip .fc-n{font-size:11.5px;font-weight:900;font-variant-numeric:tabular-nums;
  background:rgba(0,0,0,.14);border-radius:99px;padding:1px 7px;min-width:20px;text-align:center}
.foldchip:not(.on) .fc-n{background:var(--panel-3);color:var(--mut)}


/* ============ סינון סגנון בזמן הרכבה ============ */
.buildfilter{order:10;flex:0 0 100%;display:flex;align-items:center;gap:6px;overflow-x:auto;
  scrollbar-width:none;padding:8px 2px 2px;margin-top:4px;
  border-top:1px dashed var(--line)}
.buildfilter::-webkit-scrollbar{display:none}
.buildfilter .bf-l{flex:0 0 auto;font-size:11.5px;font-weight:900;color:var(--fnt);
  letter-spacing:.04em;padding-inline-end:3px;white-space:nowrap}
.buildfilter .bf{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;border-radius:99px;font-size:13px;font-weight:800;white-space:nowrap;
  border:1px solid var(--line);background:var(--panel);color:var(--mut);transition:.14s;
  min-height:38px}
.buildfilter .bf:hover{border-color:var(--cc);color:var(--tx)}
.buildfilter .bf .bf-d{width:7px;height:7px;border-radius:50%;background:var(--cc);flex:0 0 auto}
.buildfilter .bf .bf-n{font-size:11px;font-weight:900;opacity:.6;
  font-variant-numeric:tabular-nums}
.buildfilter .bf.on{background:var(--cc);border-color:var(--cc);color:#0B0C10}
:root[data-theme="light"] .buildfilter .bf.on,
:root:not([data-theme="dark"]) .buildfilter .bf.on{color:#fff}
:root[data-theme="dark"] .buildfilter .bf.on{color:#0B0C10}
.buildfilter .bf.on .bf-d{background:currentColor;opacity:.7}
/* while a list is being assembled the ＋ is the point of every row */
#app:has(.buildpane:not([hidden])) .list .row .rowadd{border-color:var(--acc);color:var(--acc)}
#app:has(.buildpane:not([hidden])) .list .row .rowadd.in{border-color:var(--cc);color:#0B0C10}


/* ============ פחות בלגן ============ */
/* the numbers row and the meta row are gone; what they carried sits in the toolbar */
.listmeta{display:none}
.toolcount{font-size:12.5px;font-weight:700;color:var(--fnt);white-space:nowrap;
  padding-inline-end:2px}
.toolcount b{color:var(--tx-2);font-weight:900;font-variant-numeric:tabular-nums}
#listtools #savestate{font-size:11.5px;margin-inline-start:auto}
@media(max-width:620px){
  /* a toggle does not need a sentence */
  .densbtn{font-size:0;padding:5px 9px}
  .densbtn::before{content:"▥";font-size:13px}
  #listtools #savestate{margin-inline-start:0}
}

/* ── reference sections: one row that says what is inside ── */
.foldsec{padding:0}
.foldsec + .foldsec{border-top:1px solid var(--line)}
.foldbar{width:100%;display:flex;align-items:center;gap:13px;padding:15px 22px;
  text-align:start;transition:.15s;background:none}
@media(max-width:620px){.foldbar{padding:14px 15px;gap:11px}}
.foldbar:hover{background:var(--panel-2)}
.foldbar .fb-i{font-size:20px;line-height:1;flex:0 0 auto;width:34px;height:34px;
  display:grid;place-items:center;border-radius:11px;
  background:color-mix(in srgb, var(--cc) 15%, transparent)}
.foldbar .fb-t{flex:1;min-width:0}
.foldbar .fb-n{font-size:14.5px;font-weight:800;letter-spacing:-.01em;color:var(--tx);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.foldbar .fb-s{font-size:12px;color:var(--mut);font-weight:600;margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.foldbar .fb-a{flex:0 0 auto;width:28px;height:28px;display:grid;place-items:center;
  border-radius:50%;border:1px solid var(--line);font-size:13px;font-weight:900;
  color:var(--mut);transition:.15s}
.foldbar:hover .fb-a{border-color:var(--cc);color:var(--cc);
  color:color-mix(in srgb, var(--cc), #000 var(--cc-dark))}
.foldsec.open .fb-a{background:var(--cc);border-color:var(--cc);color:#0B0C10}
:root[data-theme="light"] .foldsec.open .fb-a,
:root:not([data-theme="dark"]) .foldsec.open .fb-a{color:#fff}
.foldsec.open > *:not(.foldbar){padding-inline:22px}
@media(max-width:620px){.foldsec.open > *:not(.foldbar){padding-inline:15px}}
.foldsec.open > *:last-child{padding-bottom:17px}


/* ============ accessibility ============ */
.skip{position:absolute;inset-inline-start:8px;top:-60px;z-index:200;background:var(--acc);color:#0B0C10;
  padding:10px 16px;border-radius:10px;font-weight:800;transition:top .15s}
.skip:focus{top:8px}
.iconbtn,.chip,.tab,.minibtn{min-height:40px}
.iconbtn{min-width:40px}
[role="button"]:focus-visible,.row:focus-visible{outline:3px solid var(--cc);outline-offset:2px}
:root[data-calm] *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
:root[data-contrast]{--tx:#fff;--tx-2:#fff;--mut:#E6EAF5;--fnt:#CFD5E6;--line:#7A85A3;--line-2:#A8B2CC}
:root[data-contrast][data-theme="light"]{--tx:#000;--tx-2:#000;--mut:#1B2233;--fnt:#2E3850;--line:#5E6880;--line-2:#3A4560}
:root[data-contrast] :focus-visible{outline-width:4px}

/* ============ phone: no zoom, no sideways drift, clear of the notch ============ */
/* iOS Safari zooms the whole page when a field under 16px gets focus, and in an
   installed app it never zooms back out. every field is 16px on touch screens. */
@media (hover:none) and (pointer:coarse){
  input,textarea,select,#q,.fld,textarea.ed{font-size:16px}
}
html,body{max-width:100%;overflow-x:clip;overscroll-behavior-x:none}
/* the installed app draws under the status bar and the home indicator */
.topbar{padding-top:env(safe-area-inset-top)}
#bottomnav{padding-bottom:calc(6px + env(safe-area-inset-bottom))}
.toast{bottom:calc(88px + env(safe-area-inset-bottom))}
@supports (padding:max(0px)){
  .topbar-in,.stats,.striphead,.plstrip,.filters-in,main{
    padding-inline-start:max(18px,env(safe-area-inset-left));
    padding-inline-end:max(18px,env(safe-area-inset-right))}
}

/* when the screen does extend under the notch, the sticky rows start below the taller header */
.filters,#gigbar{top:calc(60px + env(safe-area-inset-top))}
.buildpane,.listpane{top:calc(118px + env(safe-area-inset-top))}

/* the assembly sheet: a labelled way back */
.bp-back{flex:0 0 auto;padding:6px 12px;border-radius:99px;font-size:13px;font-weight:800;
  color:var(--cc);border:1px solid var(--cc);background:transparent;min-height:34px;white-space:nowrap}
.bp-back:hover{background:color-mix(in srgb, var(--cc) 14%, transparent)}

/* ============ easier on stage: bigger, calmer, readable at arm's length ============
   the tiles used to carry a name in 13px, a count and three lines of 11px song
   names that nobody can read in a dark hall. now a tile says three things, large:
   what it is, how many songs, and a colour. rows are a full finger tall, the key
   is a badge you can read without leaning in. */
.plchip{width:176px}
.plchip-art{width:176px;height:104px;border-radius:20px;padding:12px 14px;justify-content:space-between}
.plchip-t{padding:0 3px 8px}
.plchip-t .n1{font-size:18px;font-weight:900;letter-spacing:-.01em}
.plchip-t .n2{font-size:13px}
.pl-ico{font-size:32px}
.pl-cnt{font-size:36px}
.pl-cnt.dim{font-size:24px}
.pl-peek{display:none}
.plchip.active .plchip-art,.plchip.cattile.active .plchip-art{
  box-shadow:0 0 0 4px var(--cc),0 14px 30px -14px color-mix(in srgb, var(--cc) 90%, transparent)}
.plchip.active .plchip-t .n1{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px}
@media(max-width:620px){
  .plchip,.plchip-art{width:162px}
  .plchip-art{height:100px;border-radius:18px}
  .pl-cnt{font-size:32px}
  /* long names ("שירים שאני אוהב") wrap to two lines instead of being cut, and every
     tile reserves the two lines so the squares stay level */
  .plchip-t .n1{white-space:normal;line-height:1.15;height:2.3em;display:-webkit-box;
    -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:clip}
}
.chip{font-size:15px;min-height:46px;padding:8px 17px}
.chip .n{font-size:13px}
.row,.list.dense .row{min-height:58px;padding:7px 11px}
.row-t,.list.dense .row-t{font-size:18px}
.row-s,.list.dense .row-s{font-size:13px}
.list.dense .cover{width:40px;height:40px;font-size:14px}
.keytag{font-size:13px;font-weight:900;letter-spacing:.02em;color:var(--tx);
  border:2px solid var(--cc);border-radius:9px;padding:3px 9px}
.mk{width:8px;height:8px}
.grouphead,.list.dense .grouphead{font-size:14px;letter-spacing:.03em;padding:17px 4px 8px}
.grouphead .gdot{width:13px;height:13px}

/* ============ tiles scroll DOWN, not sideways ============
   the strip of squares ran off to the side and had to be dragged along. now the
   same tiles lie in a grid down the page: two across on a phone, as many as fit on
   a wide screen. the name sits on the tile itself, large and white, and a tap
   still jumps straight to the songs. */
.plstrip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;overflow:visible;
  scroll-snap-type:none;padding:2px 18px 12px}
@media(min-width:621px){.plstrip{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}
.plchip,.plchip-art{width:auto}
.plchip{position:relative;scroll-snap-align:none}
.plchip:hover{transform:none}
.plchip-art{height:96px;border-radius:18px;padding:11px 13px}
.plchip-art.plus{height:96px}
.plchip-t{position:absolute;inset:auto 0 0 0;padding:0 13px 10px;z-index:2;pointer-events:none;order:0}
.plchip .plchip-t{order:0}
.plchip-t .n1{font-size:18px;font-weight:900;color:#fff;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;height:auto;display:block;text-shadow:0 1px 8px rgba(0,0,0,.6);letter-spacing:-.01em}
.plchip-t .n2{display:none}
.plchip.active .plchip-t .n1,.plchip.cattile.active .plchip-t .n1{color:#fff;text-decoration:underline;
  text-decoration-thickness:3px;text-underline-offset:5px}
.plchip-t.edt{padding-inline-end:13px}
.tile-edit{pointer-events:auto;top:7px;bottom:auto;inset-inline-end:7px;background:rgba(0,0,0,.35);
  color:#fff;border-color:rgba(255,255,255,.35)}
.plchip-art.plus ~ .plchip-t .n1,.plchip.newpl .plchip-t .n1{color:var(--tx);text-shadow:none}
/* the labelled break between "my lists" and "styles" is a full-width heading now */
.stripsep{grid-column:1 / -1;width:auto;align-self:auto;display:flex;justify-content:flex-start;padding:6px 0 0}
.stripsep::before{display:none}
.stripsep span{background:none;border:none;padding:0;font-size:13px;letter-spacing:.08em}
@media(max-width:620px){
  .plchip,.plchip-art{width:auto}
  .plchip-art{height:92px}
  .pl-cnt{font-size:30px}
  .plchip-t .n1{font-size:17px;height:auto;display:block;-webkit-line-clamp:unset;white-space:nowrap}
}
.plchip .pl-ghosthint{display:none}
/* song page: key + chords as one clear block above the lyrics */
.keypanel{margin:0 0 4px}
.keypanel > .section{border-bottom:0}
.keypanel .transp{font-size:17px;gap:10px}
.keypanel .transp .out{font-size:24px;font-weight:900}
.minibtn.rec{font-size:15px;padding:10px 16px}
.minibtn.rec.on{background:#E5484D;border-color:#E5484D;color:#fff;animation:recpulse 1.2s infinite}
@keyframes recpulse{50%{opacity:.72}}
/* big tiles: easy to hit and easy to read from a distance */
.plstrip{gap:12px}
.plchip-art{height:132px;border-radius:22px;padding:14px 16px}
.plchip-art.plus{height:132px}
.plchip-t{padding:0 16px 14px}
.plchip-t .n1{font-size:23px;white-space:normal;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;height:auto}
.pl-cnt{font-size:40px}
.tile-edit{width:32px;height:32px;top:9px;inset-inline-end:9px}
@media(max-width:620px){
  .plchip-art,.plchip-art.plus{height:128px}
  .plchip-t .n1{font-size:21px;white-space:normal;-webkit-line-clamp:2;display:-webkit-box}
  .pl-cnt{font-size:38px}
}
.plchip-t{inset:0;display:flex;flex-direction:column;justify-content:flex-end}
.plchip-t .n1{width:100%}
.tile-edit{top:auto;bottom:12px;inset-inline-start:12px;inset-inline-end:auto;width:30px;height:30px}
.plchip-t.edt{padding-inline-start:50px}
/* medium tiles: more categories on screen at once, still easy to hit */
.plstrip{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:2px 14px 10px}
@media(min-width:621px){.plstrip{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}
.plchip-art,.plchip-art.plus{height:94px;border-radius:16px;padding:9px 10px}
.pl-cnt{font-size:26px}
.plchip-t{padding:0 10px 8px}
.plchip-t.edt{padding-inline-start:10px}
.plchip-t .n1{font-size:15px;line-height:1.1;-webkit-line-clamp:2}
.tile-edit{top:7px;bottom:auto;left:50%;right:auto;inset-inline-start:auto;inset-inline-end:auto;transform:translateX(-50%);width:24px;height:24px;font-size:12px}
@media(max-width:620px){
  .plchip-art,.plchip-art.plus{height:92px}
  .pl-cnt{font-size:25px}
  .plchip-t .n1{font-size:14.5px;-webkit-line-clamp:2}
}
.tile-edit{top:-5px;left:-5px;transform:none;width:22px;height:22px;font-size:11px;background:var(--panel-2,#1b1f2a);color:var(--tx);border-color:var(--line-2)}
/* playlists: slim pills beside the style tiles, deletable when the event is over */
.plrow{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px;padding:0 0 4px}
.plpill{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:6px 8px 6px 12px;border-radius:999px;
  background:var(--panel-2);border:1.5px solid color-mix(in srgb,var(--cc) 55%,var(--line-2));color:var(--tx);font-weight:800;font-size:15px}
.plpill.active{background:color-mix(in srgb,var(--cc) 28%,var(--panel-2));border-color:var(--cc)}
.plpill .pp-c{font-size:13px;color:var(--mut);font-weight:700}
.plpill .tile-edit,.plpill .pp-del{position:static;transform:none;width:26px;height:26px;font-size:12px;display:grid;place-items:center;
  border-radius:50%;background:transparent;color:var(--mut);border:1px solid var(--line-2);pointer-events:auto}
.plpill.newpl{border-style:dashed;color:var(--mut);padding:6px 16px}
.plpill{gap:5px;font-size:14px;min-height:40px;padding:4px 6px 4px 10px}
.plpill .pp-i{display:none}
.plpill .tile-edit,.plpill .pp-del{width:24px;height:24px}
/* ===== easy on the eyes on a dark stage =====
   pure white on pure black blooms and tires the eye after an hour under stage lights.
   a warm off-white on near-black reads just as sharply with far less glare, the serif
   gets a touch more weight and air so it holds up at arm's length, and the neon glow
   under the tiles is dialled down. */
#stage{background:#06070B}
#stagetext,#versetext{color:#EEEADF;font-weight:500;letter-spacing:.01em}
#stagetext{line-height:1.72}
#versetext{text-shadow:none}
.plchip,.plchip:hover,.plchip.active{box-shadow:0 6px 16px -12px rgba(0,0,0,.7)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ===== evening mode: warm, dim, no blue light — for a dark hall or a late set ===== */
:root[data-evening]{--bg:#08070A;--bg-2:#0C0B0E;--panel:#111014;--panel-2:#161519;--panel-3:#1D1B20;
  --line:#26232A;--line-2:#37333B;--tx:#E4DCCB;--tx-2:#C2B9A5;--mut:#8D8576;--fnt:#6C665A;
  --acc:#E3A13A;--acc-2:#EDB65C;--acc-dim:#2E2411;--acc-line:#52401B}
:root[data-evening] #stage{background:#050406}
:root[data-evening] #stagetext,:root[data-evening] #versetext{color:#D9CDB0}
:root[data-evening] img,:root[data-evening] .plchip-art,:root[data-evening] .art{filter:saturate(.8) brightness(.88)}
#stageeve.on{background:#3a2d12;border-color:#E3A13A}
/* the solid amber key badge was the brightest object on the stage screen */
#stagekey{background:#2E2411!important;color:#F2BE63!important;border:1.5px solid #8A6A2A}
/* ===== density: two clearly different settings =====
   spacious (default) = stage-sized rows. compact = a real "see lots at once" mode:
   one tight line per song, no cover, the performer small beside the title. */
.list:not(.dense) .row{min-height:64px;padding:8px 12px}
.list:not(.dense) .row-t{font-size:19px}
.list.dense .row{min-height:34px;padding:2px 8px;gap:8px;border-radius:7px}
.list.dense .cover{display:none}
.list.dense .row-main{display:flex;align-items:baseline;gap:8px;min-width:0}
.list.dense .row-t{font-size:15px;font-weight:800;flex:0 1 auto}
.list.dense .row-s{display:block;font-size:11.5px;margin:0;flex:1 1 0;min-width:0;opacity:.85}
.list.dense .keytag{font-size:11px;border-width:1px;padding:1px 6px;border-radius:6px}
.list.dense .mk{width:6px;height:6px}
.list.dense .grouphead{font-size:12px;padding:9px 4px 4px}
.list.dense .grouphead .gdot{width:9px;height:9px}
/* while searching, the results come right under the search box and the tiles,
   playlists and filters step down below them */
#app.searching > .topbar{order:-3}
#app.searching > main{order:-2}
#app.searching > #gigbar{order:-2}
#q::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
/* English mode: the page runs left-to-right, but song text stays right-to-left */
html[dir="ltr"] body{direction:ltr}
html[dir="ltr"] :is(.row-t,.row-s,.lyrics,.lblock,#stagetext,#versetext,#stagetitle,.hero h2,.translit,.medname,.medsub,.pk-n,.notebox,textarea){
  direction:rtl;unicode-bidi:plaintext;text-align:start}
html[dir="ltr"] .brand h1{letter-spacing:0}
.stripsep{justify-content:space-between!important;align-items:center}
.sep-add{font-size:14px;font-weight:800;color:var(--acc);border:1.5px solid var(--acc-line,var(--line-2));
  border-radius:999px;padding:7px 14px;min-height:38px;background:transparent}
/* ===== calmer header and fewer controls =====
   the header keeps search, playlist and add. language, accessibility, day/night,
   ideas and the account live behind one ⋯ menu. edit handles on tiles and
   playlists only show while "עריכה" is switched on. */
.topbar #langbtn,.topbar #a11ybtn,.topbar #themebtn,.topbar #reqbtn{display:none}
.sh-btns{display:flex;gap:16px;align-items:baseline}
#app:not(.manage) .tile-edit,
#app:not(.manage) .plpill .pp-del{display:none}
#app.manage .plchip.cattile,#app.manage .plpill{outline:1.5px dashed var(--line-2);outline-offset:3px}
.actmore{display:flex;flex-wrap:wrap;gap:8px;padding:2px 22px 12px}
.actmore[hidden]{display:none}
@media(max-width:620px){.actmore{padding:2px 15px 12px}}
.actionbar{gap:8px}
/* recently sung */
.recents{max-width:1560px;margin:0 auto;padding:6px 18px 2px}
@media(max-width:620px){.recents{padding:6px 16px 0}}
.rc-t{font-size:12px;font-weight:900;letter-spacing:.1em;color:var(--fnt);margin-bottom:7px}
.rc-row{display:flex;flex-wrap:wrap;gap:8px}
.rc-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 14px;border-radius:12px;max-width:100%;
  background:var(--panel);border:1px solid var(--line-2);border-inline-start:4px solid var(--cc);font-weight:800;font-size:15px}
.rc-n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}
.rc-k{font-size:12px;color:var(--mut);font-weight:800}
/* ===== the year wheel ===== */
.wheelwrap{width:100%;max-width:1560px;margin:0 auto;padding:0 18px 6px}
@media(max-width:620px){.wheelwrap{padding:0 8px 4px}}
.wheelwrap .striphead{padding-inline:8px}
.wheel-ring{width:min(100%,430px);margin:0 auto}
.wheel-svg{display:block;width:100%;height:auto;overflow:visible;-webkit-tap-highlight-color:transparent}
.w-track{fill:none;stroke:var(--line-2);stroke-width:1.2;stroke-dasharray:1.5 7;stroke-linecap:round;opacity:.9}
.w-today-halo{fill:var(--acc);opacity:.28;animation:wpulse 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.w-today{fill:var(--acc);stroke:var(--bg);stroke-width:2}
@keyframes wpulse{0%,100%{transform:scale(1);opacity:.28}50%{transform:scale(1.9);opacity:.06}}
.w-seg{cursor:pointer;outline:none;transition:opacity .15s}
.w-shape{stroke-width:7;stroke-linejoin:round;opacity:.78;transition:opacity .15s}
.w-seg:hover .w-shape,.w-seg:focus-visible .w-shape{opacity:1}
.w-seg.next .w-shape{opacity:1}
.w-seg:active{opacity:.85}
.w-ico{font-size:22px;pointer-events:none}
.w-ico.big{font-size:28px}
.w-ico.big2{font-size:34px}
.w-lab{font-size:11.5px;font-weight:900;fill:#fff;pointer-events:none;paint-order:stroke;stroke:rgba(0,0,0,.35);stroke-width:2.2px;stroke-linejoin:round}
.w-lab.big{font-size:13.5px}
.w-sub{font-size:9.5px;font-weight:700;fill:rgba(255,255,255,.82);pointer-events:none}
.w-pointer{fill:var(--acc);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--acc) 70%,transparent));animation:wnudge 2s ease-in-out infinite;transform-box:fill-box}
@keyframes wnudge{0%,100%{opacity:1}50%{opacity:.6}}
.w-mid{cursor:pointer;outline:none}
.w-mid-bg{filter:drop-shadow(0 8px 18px rgba(0,0,0,.35))}
.w-mid-ring{fill:none;stroke-width:3}
.w-mid:focus-visible .w-mid-ring{stroke-width:5}
.w-k{font-size:11.5px;font-weight:900;letter-spacing:.1em;fill:var(--mut)}
.w-name{font-size:25px;font-weight:900;fill:var(--tx)}
.w-days{font-size:16px;font-weight:800;fill:var(--acc)}
@media(prefers-reduced-motion:reduce){.w-today-halo,.w-pointer{animation:none}}
:root[data-calm] .w-today-halo,:root[data-calm] .w-pointer{animation:none}

/* the wheel turns */
.wheelhead{display:flex;justify-content:center}
.wheelseg{display:inline-flex;gap:3px;padding:3px;border-radius:99px;background:var(--panel);border:1px solid var(--line)}
.wheelseg button{padding:7px 16px;border-radius:99px;font-size:13.5px;font-weight:800;color:var(--mut);min-height:36px}
.wheelseg button[aria-pressed="true"]{background:var(--acc);color:#0B0C10}
.wheel-ring{touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.w-rot{transform-origin:210px 210px;will-change:transform}
.w-upright{transform:rotate(calc(-1 * var(--rot, 0deg)));transition:transform .6s cubic-bezier(.25,.8,.3,1)}
.w-rot[style*="transition: none"] .w-upright{transition:none}
.w-seg.sel .w-shape{opacity:1;stroke:#fff;stroke-opacity:.9;stroke-width:2.5}
.w-seg:not(.sel):not(.next) .w-shape{opacity:.62}
.wheel-svg:focus-visible{outline:2px solid var(--acc)}

/* the songs come first; the wheel, playlists and tiles sit under them */
.showall{display:block;width:100%;margin:12px 0 4px;padding:14px;border-radius:14px;font-weight:900;font-size:15.5px;
  background:var(--panel);border:1.5px dashed var(--line-2);color:var(--acc)}

.wheel-hint{text-align:center;font-size:13px;color:var(--mut);font-weight:700;margin:2px 0 8px}
.wheel-bar{display:flex;align-items:stretch;gap:8px;max-width:430px;margin:8px auto 4px;padding:0 4px}
.wb-arrow{flex:0 0 52px;border-radius:16px;background:var(--panel);border:1.5px solid var(--line-2);font-size:28px;font-weight:900;color:var(--tx)}
.wb-open{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:60px;padding:8px 10px;border-radius:16px;
  background:color-mix(in srgb,var(--cc,var(--acc)) 30%,var(--panel));border:2px solid var(--cc,var(--acc));color:var(--tx)}
.wb-t{font-size:18px;font-weight:900}
.wb-s{font-size:12.5px;font-weight:700;color:var(--tx-2)}
.w-ico.sm{font-size:18px}.w-lab.sm{font-size:10px}.w-sub.sm{font-size:8.5px}

/* ---- events, stages, evening log ---- */
.evhead{flex:0 0 100%;width:100%;display:flex;flex-direction:column;gap:6px;padding:4px 2px 8px}
.evback{align-self:flex-start;background:none;border:1px solid var(--line-2);color:inherit;border-radius:12px;padding:7px 14px;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.evtitle{font-size:26px;font-weight:800;color:var(--cc)}
.evsub{font-size:13.5px;opacity:.75;line-height:1.4}
.stagechips{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;-webkit-overflow-scrolling:touch}
.stagechip{flex:0 0 auto;border:1px solid var(--line-2);background:var(--bg-2);color:inherit;border-radius:999px;padding:9px 15px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap}
.stagechip.on{background:var(--cc);color:#1a1405;border-color:var(--cc)}

/* a quick second tap on a button used to zoom the page in (and make the next tap miss);
   "manipulation" keeps scrolling and pinch-zoom but drops the double-tap zoom everywhere */
*{touch-action:pan-x pan-y}
button,.row,.plchip,.plpill,.tab,.chip{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}

/* ---- home faces: events with their stages, and styles, as big buttons ---- */
.w-ico{font-size:26px}
.w-lab{font-size:15px}
.w-sub{font-size:12px}
.evcards{display:flex;flex-direction:column;gap:14px;max-width:560px;margin:6px auto 4px;padding:0 6px}
.evcard{border:2px solid var(--cc);border-radius:22px;padding:14px;background:color-mix(in srgb,var(--cc) 14%,var(--panel))}
.evcard-h{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.evcard-i{font-size:34px}
.evcard-n{font-size:26px;font-weight:900;flex:1}
.evcard-c{font-size:14px;font-weight:800;color:var(--mut)}
.evstages{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.evst{display:flex;align-items:center;gap:9px;min-height:62px;padding:8px 12px;border-radius:15px;text-align:start;
  background:var(--panel);border:1.5px solid var(--line-2);color:var(--tx);font:inherit}
.evst:active{background:color-mix(in srgb,var(--cc) 30%,var(--panel))}
.evst-i{font-size:26px;flex:0 0 auto}
.evst-n{font-size:17px;font-weight:800;flex:1;line-height:1.2}
.evst-c{font-size:14px;font-weight:800;color:var(--mut)}
.stylegrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:560px;margin:6px auto 4px;padding:0 6px}
.stylebtn{display:flex;align-items:center;gap:10px;min-height:68px;padding:10px 14px;border-radius:17px;text-align:start;
  background:color-mix(in srgb,var(--cc) 20%,var(--panel));border:2px solid var(--cc);color:var(--tx);font:inherit}
.sb-i{font-size:30px}
.sb-n{font-size:18px;font-weight:900;flex:1;line-height:1.15}
.sb-c{font-size:15px;font-weight:800;color:var(--tx-2)}

.bulkfind{width:100%;margin:6px 0 8px;padding:10px 12px;border-radius:12px;border:1px solid var(--line-2);background:var(--bg-2);color:inherit;font:inherit;font-size:15px}
.bulkcats{max-height:42vh;overflow-y:auto;display:flex;flex-direction:column;gap:6px}

.catfind{width:100%;margin:6px 0;box-sizing:border-box}
.catopt[hidden]{display:none}

/* the category on a song page is a visible button, not plain text */
.hero .cat.tapedit.catchange{display:inline-flex;align-items:center;gap:4px;padding:8px 14px;min-height:40px;border-radius:999px;
  border:1.5px solid var(--cc);background:color-mix(in srgb,var(--cc) 18%,transparent);font-size:15px;font-weight:800;letter-spacing:0}

#refreshbtn.spin{animation:rfspin .9s linear infinite}
@keyframes rfspin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){#refreshbtn.spin{animation:none;opacity:.5}}
#app.gig .topbar #refreshbtn{display:none}

.alsoin{font-size:13.5px;font-weight:700;opacity:.85;margin:4px 0 2px}

/* a finger, not a mouse: every control at least 44px (the size a thumb can hit without looking) */
@media (pointer:coarse){
  .iconbtn{width:44px;height:44px}
  .act,.minibtn,.gigbtn,.stagechip,.wheelseg button,.catopt,.evst,.stylebtn{min-height:44px}
  .rowadd,.gigcheck{min-width:44px;min-height:44px}
  .bottomnav button,#bottomnav button{min-height:52px}
}
/* inbox card: extra categories */
.alsobtn{margin-top:8px;min-height:44px;padding:8px 14px;border-radius:12px;border:1px dashed var(--line-2);background:transparent;color:inherit;font:inherit;font-size:14px;width:100%;text-align:start}
.alsobox{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;width:100%}
.alsobox[hidden]{display:none}
.catchip{min-height:40px;padding:6px 12px;border-radius:999px;border:1px solid var(--line-2);background:var(--bg-2);color:inherit;font:inherit;font-size:14px}
.catchip.on{background:var(--cc,#E8B84D);color:#10131c;border-color:transparent;font-weight:700}

/* inbox card: record the song */
.recbox{padding:0 18px 12px;display:flex;flex-direction:column;gap:6px}
.recbox .minibtn{min-height:44px}
.recnote{font-size:14px;opacity:.9;display:flex;flex-direction:column;align-items:flex-start}

/* wide screens: keep the header on one row (the ⋯ button used to drop to a second line) */
@media(min-width:900px){.topbar-in{flex-wrap:nowrap}.topbar-in .searchwrap{min-width:0;flex:1 1 240px}}
.alsobox .alsofind{width:100%}
.alsochips{display:flex;flex-wrap:wrap;gap:8px;width:100%}

#stagekey{cursor:pointer;min-height:36px;padding-inline:12px}
.scrim{z-index:120}

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* assistant panel on a phone: below the notch and above the home bar, big rows, one scroll */
@media(max-width:620px){
  #aipanel{inset:max(10px,env(safe-area-inset-top)) 8px max(10px,env(safe-area-inset-bottom)) 8px;height:auto;max-height:100dvh}
  .aihead{padding-top:12px}
  #aiclose{min-width:44px;min-height:44px}
}
.msg.bot{max-width:100%}
.msg .act{border-radius:12px;width:100%;min-height:46px;white-space:normal;text-align:start;line-height:1.35;justify-content:flex-start;padding:8px 12px}
.aibody{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}

/* the musician's copy: none of the singer's admin */
body.guest [data-view="new"], body.guest [data-view="todo"], body.guest [data-view="learn"],
body.guest #reqbtn, body.guest #bandbtn, body.guest #addbtn, body.guest #savestate{ display:none !important; }

/* the musician's link: show nothing until the singer's own book has arrived, so his own options never flash first */
html.guestload body{visibility:hidden}
html.guestload::before{content:"טוען את הספרייה…";visibility:visible;position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:#0A0C12;color:#fff;font:700 20px system-ui,sans-serif}