/* LiveEPK setlist maker. Used by /setlist-maker and the dashboard's Tools rail.
   Expects the page to define --paper, --paper-2, --ink, --ink-2, --ink-3, --rule, --accent, --accent-2, --display, --sans, --mono. */

.slt { background: var(--paper-2); border: 1px solid var(--rule); padding: 1.1rem; font-family: var(--sans); color: var(--ink); }
.slt [hidden] { display: none !important; }
.slt label.lbl, .slt h3.slt__h {
  font-family: var(--sans); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3);
  display: block; margin: 0 0 0.3rem;
}
.slt .lbl__soft { font-weight: 400; letter-spacing: 0.04em; text-transform: none; color: var(--ink-3); }
.slt input[type="text"], .slt input[type="number"], .slt textarea {
  width: 100%; font-family: var(--sans); font-size: 0.92rem; padding: 0.5rem 0.6rem;
  border: 1px solid var(--rule); background: #fff; color: var(--ink); border-radius: 0; min-width: 0;
}
.slt input:focus, .slt textarea:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.slt .sbtn {
  font-family: var(--sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; display: inline-block;
  padding: 0.55rem 0.9rem; border: 1px solid var(--ink); background: #fff; color: var(--ink); cursor: pointer; transition: all 120ms ease;
}
.slt .sbtn:hover { border-color: var(--accent-2); color: var(--accent-2); }
.slt .sbtn:disabled { opacity: 0.45; cursor: default; }
.slt .sbtn--primary { background: var(--ink); color: var(--paper); }
.slt .sbtn--primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--paper); }
.slt .sbtn--quiet { border-color: var(--rule); color: var(--ink-2); }
.slt .seg { display: inline-flex; border: 1px solid var(--ink); }
.slt .seg button { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.55rem 0.8rem; border: none; background: #fff; color: var(--ink); cursor: pointer; }
.slt .seg button + button { border-left: 1px solid var(--ink); }
.slt .seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.slt .rowbtn { border: none; background: none; color: var(--ink-3); cursor: pointer; font-size: 1.05rem; line-height: 1; padding: 0.35rem 0.3rem; font-family: var(--sans); }
.slt .rowbtn:hover { color: var(--accent-2); }
.slt .rowbtn.has-more { color: var(--accent); font-weight: 700; }   /* this song has an artist, tempo or note behind the dots */

.slt__fields { display: grid; grid-template-columns: 1.3fr 1.2fr 1.2fr 0.8fr; gap: 0.6rem 0.8rem; margin-bottom: 0.9rem; }
.slt__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin-bottom: 0.9rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--rule); }
.slt__adds { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; }
.slt__clear { margin-left: auto; }
.slt__hint { font-size: 0.76rem; color: var(--ink-3); line-height: 1.5; margin: 0; }
.slt__empty { font-size: 0.86rem; color: var(--ink-3); padding: 1rem; background: #fff; border: 1px dashed var(--rule); margin: 0; }

.slt__paste { background: #fff; border: 1px solid var(--ink); padding: 0.9rem; margin-bottom: 0.9rem; }
.slt__paste textarea { min-height: 170px; resize: vertical; line-height: 1.5; font-size: 0.95rem; }
.slt__paste-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.6rem; margin-top: 0.6rem; }
.slt__paste-foot .slt__hint { flex: 1 1 260px; }

.slt__body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 1.2rem; align-items: start; }

/* rows */
.slt__rows { display: flex; flex-direction: column; gap: 0.3rem; }
.slr { display: grid; grid-template-columns: 1.7rem 1.6rem minmax(0, 1fr) 4.2rem 4.2rem auto auto auto; align-items: center; gap: 0.3rem; background: #fff; border: 1px solid var(--rule); padding: 0.25rem 0.3rem 0.25rem 0.1rem; }
.slr input[type="text"], .slr input[type="number"] { border-color: transparent; padding: 0.42rem 0.45rem; }
.slr input:hover { border-color: var(--rule); }
.slr__grip { border: none; background: none; color: var(--ink-3); cursor: grab; font-size: 0.95rem; line-height: 1; padding: 0.5rem 0.3rem; touch-action: none; }
.slr__grip:active { cursor: grabbing; }
.slr__grip:focus-visible { outline: 2px solid var(--accent); }
.slr__n { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-3); text-align: right; }
.slr__title { font-weight: 600; }
.slr__more { grid-column: 3 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 4.2rem minmax(0, 1.4fr); gap: 0.3rem; padding-bottom: 0.15rem; }
.slr__more input { font-size: 0.84rem !important; background: var(--paper-2) !important; }
.slr.is-drag { opacity: 0.55; border-color: var(--accent); }
.slr--set, .slr--encore, .slr--break, .slr--text { grid-template-columns: 1.7rem minmax(0, 1fr) auto auto auto; background: var(--paper); }
.slr--set, .slr--encore { border-left: 3px solid var(--ink); margin-top: 0.45rem; }
.slr--set .slr__label, .slr__fixed { font-size: 0.74rem !important; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.slr__fixed { padding: 0.42rem 0.45rem; }
.slr--break { border-style: dashed; }
.slr--break .slr__min { width: 4.2rem; }
.slr--text .slr__text { font-style: italic; color: var(--ink-2); }
.slr__meta { font-family: var(--mono); font-size: 0.74rem; color: var(--ink-3); padding-right: 0.3rem; white-space: nowrap; }
.slr--spare { grid-template-columns: minmax(0, 1fr) 4.2rem auto auto; padding-left: 0.3rem; }

.slt__spares { margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid var(--rule); }
.slt__spares #sl-spares { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.5rem; }
.slt__time { display: grid; grid-template-columns: 9.5rem 9.5rem minmax(0, 1fr); gap: 0.8rem; align-items: start; margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid var(--rule); }
.slt__clock { font-size: 0.86rem; }
.slt__clockrow { display: flex; justify-content: space-between; gap: 1rem; padding: 0.28rem 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); }
.slt__clockrow b { font-family: var(--mono); font-weight: 500; color: var(--ink); white-space: nowrap; }
.slt__clockrow.is-over b { color: #b3261e; }
.slt__clockrow--total { border-bottom: none; font-weight: 600; color: var(--ink); }
.slt__clock .slt__hint { margin-top: 0.4rem; }

/* output */
.slt__out { position: sticky; top: 0.8rem; }
.slt__outbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
.slt__cols { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; margin: 0.4rem 0 0.6rem; font-size: 0.8rem; color: var(--ink-2); }
.slt__col { display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; }
.slt__col input { accent-color: var(--accent); margin: 0; }
.slt__preview { background: #d9d3c6; padding: 0.8rem; max-height: 78vh; overflow: auto; display: flex; flex-direction: column; gap: 0.8rem; }
.slt__preview .slt__empty { background: transparent; }
.slt__fitnote { color: var(--ink-2) !important; }
.slt-page { display: block; flex: none; width: 100%; height: auto; background: #fff; box-shadow: 0 1px 6px rgba(26, 24, 20, 0.25); }
.slt__actions { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.7rem; }

.slt__save { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem 1.4rem; margin-top: 1.2rem; padding: 1rem 1.1rem; background: #fff; border: 1px solid var(--rule); border-left: 3px solid var(--accent); }
.slt__save p { margin: 0; font-size: 0.9rem; color: var(--ink-2); flex: 1 1 320px; }
.slt__save strong { color: var(--ink); }

.slt-toast {
  position: fixed; left: 50%; bottom: 1.4rem; transform: translate(-50%, 1rem); opacity: 0; pointer-events: none; z-index: 1200;
  background: #1a1814; color: #f6f1e7; font-family: var(--sans, system-ui, sans-serif); font-size: 0.86rem; padding: 0.7rem 1rem; max-width: min(92vw, 520px);
  transition: opacity 160ms ease, transform 160ms ease; display: flex; gap: 0.9rem; align-items: center;
}
.slt-toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.slt-toast button { background: none; border: 1px solid #f6f1e7; color: #f6f1e7; font: inherit; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.25rem 0.6rem; cursor: pointer; }

/* stage view: dark, large, read-only */
html.slt-stage-open { overflow: hidden; }
.slt-stage { position: fixed; inset: 0; z-index: 1100; background: #0d0d0c; color: #f4f1ea; overflow-y: auto; -webkit-overflow-scrolling: touch; font-family: Helvetica, Arial, sans-serif; padding: 0 0 3rem; }
.slt-stage__bar { position: sticky; top: 0; background: #0d0d0c; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; padding: 0.7rem 1rem; border-bottom: 1px solid #2c2a26; z-index: 1; }
.slt-stage__head { min-width: 0; flex: 1 1 12rem; }
.slt-stage__head b { display: block; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slt-stage__head span { display: block; font-size: 0.78rem; color: #a39d90; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slt-stage__btns { display: flex; gap: 0.4rem; flex: none; }
.slt-stage__btns button { background: none; border: 1px solid #5d584e; color: #f4f1ea; font: inherit; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.5rem 0.7rem; cursor: pointer; }
.slt-stage__btns button:hover, .slt-stage__btns button:focus-visible { border-color: #f4f1ea; }
.slt-stage__list { list-style: none; margin: 0 auto; padding: 0.4rem 1rem; max-width: 900px; }
.slt-stage__song { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto; align-items: baseline; gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid #1f1e1b; font-size: clamp(1.5rem, 6.2vw, 2.6rem); font-weight: 700; line-height: 1.12; cursor: pointer; }
.slt-stage__song i { font-style: normal; font-size: 0.42em; font-weight: 400; color: #8d877a; text-align: right; }
.slt-stage__song em { font-style: normal; font-size: 0.6em; font-weight: 400; color: #e0b95c; white-space: nowrap; }
.slt-stage__song.is-done { color: #55514a; text-decoration: line-through; }
.slt-stage__song.is-done em { color: #55514a; }
.slt-stage__song:focus-visible { outline: 2px solid #e0b95c; outline-offset: 2px; }
.slt-stage__set { display: flex; justify-content: space-between; gap: 1rem; padding: 1.3rem 0 0.3rem; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #a39d90; }
.slt-stage__set.is-encore { border-top: 2px solid #f4f1ea; margin-top: 0.9rem; }
.slt-stage__set em { font-style: normal; font-weight: 400; letter-spacing: 0.04em; }
.slt-stage__break { text-align: center; padding: 0.9rem 0; margin: 0.6rem 0; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #0d0d0c; background: #a39d90; }
.slt-stage__text { padding: 0.45rem 0 0.45rem 2.7rem; font-style: italic; color: #a39d90; font-size: 1.05rem; }
.slt-stage__spares { margin-top: 1.4rem; padding: 0.8rem; border: 1px solid #5d584e; font-size: 1.05rem; line-height: 1.6; }
.slt-stage__spares b { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: #a39d90; display: block; }
.slt-stage__spares em { font-style: normal; color: #e0b95c; font-size: 0.85em; }
.slt-stage__credit { text-align: center; font-size: 0.78rem; color: #8d877a; margin: 1.6rem 1rem 0; }
.slt-stage__credit a { color: #c9c2b4; }

/* browser print (the fallback when the PDF font lacks a letter): only the sheets print */
#slt-print { display: none; }
@media print {
  html.slt-printing body > *:not(#slt-print) { display: none !important; }
  html.slt-printing #slt-print { display: block; }
  html.slt-printing #slt-print .slt-page { width: 100vw; height: 100vh; box-shadow: none; page-break-after: always; break-after: page; }
  html.slt-printing #slt-print .slt-page:last-child { page-break-after: auto; break-after: auto; }
}

@media (max-width: 900px) {
  .slt__body { grid-template-columns: minmax(0, 1fr); }
  .slt__out { position: static; }
  .slt__preview { max-height: none; }
}
@media (max-width: 640px) {
  .slt { padding: 0.7rem; }
  .slt__fields { grid-template-columns: 1fr 1fr; }
  .slt__clear { margin-left: 0; }
  /* phone: the title gets the whole first line; key and length sit under it */
  .slr--song { grid-template-columns: 1.6rem 1.3rem minmax(0, 1fr) minmax(0, 1fr) auto auto auto; gap: 0.1rem; }
  .slr--song > .slr__grip { grid-area: 1 / 1; } .slr--song > .slr__n { grid-area: 1 / 2; }
  .slr--song > .slr__title { grid-area: 1 / 3 / 2 / 5; }
  .slr--song > [data-act="more"] { grid-area: 1 / 5; } .slr--song > [data-act="spare"] { grid-area: 1 / 6; } .slr--song > [data-act="del"] { grid-area: 1 / 7; }
  .slr--song > .slr__key { grid-area: 2 / 3; } .slr--song > .slr__len { grid-area: 2 / 4; }
  .slr--song > .slr__more { grid-area: 3 / 3 / 4 / -1; }
  .slr--song > .slr__key, .slr--song > .slr__len { background: var(--paper-2); font-size: 14px !important; padding: 0.3rem 0.4rem !important; }
  .slr input[type="text"], .slr input[type="number"] { padding: 0.5rem 0.3rem; font-size: 16px; }   /* 16px: iOS does not zoom the page on focus */
  .slr--set, .slr--encore, .slr--break, .slr--text { grid-template-columns: 1.6rem minmax(0, 1fr) auto auto auto; }
  .slr--spare { grid-template-columns: minmax(0, 1fr) 3.5rem auto auto; }
  .slr__more { grid-template-columns: minmax(0, 1fr) 3.5rem; }
  .slr__more input:last-child { grid-column: 1 / -1; }
  .slt .rowbtn { padding: 0.5rem 0.22rem; }
  .slt__time { grid-template-columns: 1fr 1fr; }
  .slt__clock { grid-column: 1 / -1; }
  .slt input[type="text"], .slt input[type="number"], .slt textarea { font-size: 16px; }
}