/* WaAtsam. Song page, search and Project stage. All rules are scoped with the ad- prefix. */
.ad-wrap {
  --ad-ink: #141a33; --ad-ink2: #4a5170; --ad-line: #dde1ec; --ad-surface: #ffffff; --ad-bg: #f2f4f8;
  --ad-brand: #0070c0; --ad-red: #e00000; --ad-brand-ink: #ffffff;
  --ad-mnder: #9a5b00; --ad-mnder-bg: #fff3db; --ad-mrumun: #0b6b78; --ad-mrumun-bg: #ddf3f5;
  --ad-ishongo: #6a3fa0; --ad-ishongo-bg: #efe8f8;
  --ad-size: 20px; --ad-gold: #a86b00;
  display: flex; flex-direction: column; gap: 20px; max-width: 760px; margin: 0 auto; color: var(--ad-ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.5;
}
.ad-wrap *, .ad-wrap *::before, .ad-wrap *::after { box-sizing: border-box; }
.ad-wrap button { font: inherit; cursor: pointer; }
.ad-wrap :focus-visible, .ad-stage :focus-visible { outline: 3px solid var(--ad-brand); outline-offset: 2px; }

/* Search */
.ad-search { position: relative; }
.ad-search svg { position: absolute; left: 14px; top: 16px; width: 20px; height: 20px; stroke: var(--ad-ink2); fill: none; stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.ad-search .ad-q { display: block; width: 100%; height: 52px; margin: 0; border: 1px solid var(--ad-line); border-radius: 10px; background: var(--ad-surface); color: var(--ad-ink); padding: 0 16px 0 44px; font-size: 17px; box-shadow: none; }
.ad-search .ad-q::placeholder { color: var(--ad-ink2); opacity: 1; }
.ad-results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 50; background: var(--ad-surface); border: 1px solid var(--ad-line); border-radius: 10px; box-shadow: 0 14px 34px rgba(10, 15, 40, .22); max-height: 60vh; overflow: auto; list-style: none; margin: 0; padding: 6px; }
.ad-results[hidden] { display: none; }
.ad-results li { margin: 0; padding: 0; list-style: none; }
.ad-results a { display: flex; gap: 14px; align-items: baseline; padding: 10px 12px; border-radius: 8px; color: var(--ad-ink); text-decoration: none; }
.ad-results li[aria-selected="true"] a, .ad-results a:hover { background: var(--ad-bg); }
.ad-rno { flex: none; min-width: 3.6em; font-weight: 800; color: var(--ad-brand); font-variant-numeric: tabular-nums; }
.ad-rbody { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ad-rt { font-weight: 700; }
.ad-rs { color: var(--ad-ink2); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-rnone { padding: 12px; color: var(--ad-ink2); font-size: 15px; }

/* Song head */
.ad-head { display: flex; flex-direction: column; gap: 2px; }
.ad-coll { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ad-red); }
.ad-no { font-size: 30px; font-weight: 800; line-height: 1.15; color: var(--ad-ink); }
.ad-meta { color: var(--ad-ink2); font-size: 15px; }
.ad-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ad-actions-main { display: flex; flex-wrap: wrap; gap: 10px; }
.ad-size { margin-left: auto; }
.ad-listen { display: inline-flex; align-items: center; gap: 10px; border: 0; border-radius: 10px; background: var(--ad-red); color: #fff; font-weight: 700; font-size: 17px; height: 52px; padding: 0 20px; }
.ad-listen:hover { filter: brightness(1.1); }
.ad-audio { width: 100%; }
.ad-comp { color: var(--ad-gold); font-weight: 700; }
.ad-project { display: inline-flex; align-items: center; gap: 10px; border: 0; border-radius: 10px; background: var(--ad-brand); color: var(--ad-brand-ink); font-weight: 700; font-size: 17px; height: 52px; padding: 0 22px; }
.ad-project svg, .ad-listen svg { width: 22px; height: 22px; flex: none; }
.ad-project:hover { filter: brightness(1.1); }
.ad-size { display: flex; gap: 6px; }
.ad-size button { min-width: 44px; height: 44px; border: 1px solid var(--ad-line); background: var(--ad-surface); color: var(--ad-ink); border-radius: 8px; font-weight: 700; }

/* Song text */
.ad-song { display: flex; flex-direction: column; gap: 14px; font-size: var(--ad-size); }
.ad-part { background: var(--ad-surface); border: 1px solid var(--ad-line); border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ad-label { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ad-ink2); }
.ad-part p { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 1em; line-height: 1.55; overflow-wrap: anywhere; text-align: justify; text-justify: inter-word; hyphens: auto; color: var(--ad-ink); }
.ad-mnder { background: var(--ad-mnder-bg); border-color: transparent; }
.ad-mnder .ad-label { color: var(--ad-mnder); }
.ad-mrumun { background: var(--ad-mrumun-bg); border-color: transparent; }
.ad-mrumun .ad-label { color: var(--ad-mrumun); }
.ad-ishongo { background: var(--ad-ishongo-bg); border-color: transparent; }
.ad-ishongo .ad-label { color: var(--ad-ishongo); }
.ad-composer { background: var(--ad-surface); gap: 6px; }
.ad-cname { font-size: 1.15em; font-weight: 800; color: var(--ad-gold); }
.ad-others { color: var(--ad-ink2); font-size: .85em; line-height: 1.7; }
.ad-others-k { font-weight: 800; color: var(--ad-ink); }
.ad-others a { color: var(--ad-brand); font-weight: 700; text-decoration: none; }
.ad-others a:hover { text-decoration: underline; }
.ad-more { margin-top: 4px; }
.ad-more summary { cursor: pointer; color: var(--ad-brand); font-weight: 700; }
.ad-end { display: flex; justify-content: flex-end; }
.ad-badge { font-size: 12px; font-weight: 700; letter-spacing: .04em; border: 1px solid var(--ad-line); border-radius: 999px; padding: 1px 9px; color: var(--ad-ink2); background: var(--ad-surface); }

/* Project stage */
.ad-stage { position: fixed; inset: 0; z-index: 2147483000; background: #000; color: #f8f9fd; display: flex; flex-direction: column; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; cursor: none; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.ad-stage[hidden] { display: none; }
.ad-stage.ad-ui { cursor: default; }
.ad-stage *, .ad-stage *::before, .ad-stage *::after { box-sizing: border-box; }
.ad-slide { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 4.5vh 5vw 5vh; gap: 3vh; background: #090d1c; }
.ad-slide[data-type="mnder"] { background: #1a0707; }
.ad-slide[data-type="mrumun"] { background: #06142a; }
.ad-slide[data-type="ivur"] { background: #090d1c; }
.ad-slide[data-type="ishongo"] { background: #170b16; }
/* Header: brand red and blue (from the WaAtsam logo) */
.ad-slide-head { flex: none; display: flex; align-items: center; gap: 2vw; font-weight: 800; font-size: clamp(22px, 5.2vh, 64px); letter-spacing: .02em; line-height: 1.1; color: #fff; padding-bottom: 2vh; border-bottom: .8vh solid; border-image: linear-gradient(90deg, #e00000 0 50%, #0070c0 50% 100%) 1; }
.ad-slide-head .ad-h-text { flex: 1; min-width: 0; }
.ad-slide-head::after { content: ""; flex: none; order: 3; width: 18vh; max-width: 24vw; aspect-ratio: 250 / 70; background: #fff url(icons/tese-logo.png) center / 86% auto no-repeat; border-radius: 1.2vh; }
.ad-slide-head .ad-h-no { color: #ff2b2b; }
.ad-slide-head .ad-h-num { color: #ffffff; }
.ad-slide-head .ad-h-sep { color: #8a93b5; }
.ad-slide-head .ad-h-comp { color: #ffc72c; font-weight: 600; font-size: .62em; letter-spacing: 0; }
.ad-slide[data-type="mnder"] .ad-h-blk { color: #ff4a4a; }
.ad-slide[data-type="mrumun"] .ad-h-blk { color: #3ea6ff; }
.ad-slide[data-type="ivur"] .ad-h-blk { color: #ffffff; }
.ad-slide[data-type="ishongo"] .ad-h-blk { color: #ff9aa8; }
.ad-slide-body { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ad-slide-text { width: 100%; text-align: center; font-weight: 600; line-height: 1.28; color: #f8f9fd; overflow-wrap: anywhere; }
.ad-stage.ad-black .ad-slide, .ad-stage.ad-end .ad-slide { visibility: hidden; }
.ad-ctrl { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,0)); opacity: 0; pointer-events: none; transition: opacity .2s; cursor: default; }
.ad-stage.ad-ui .ad-ctrl { opacity: 1; pointer-events: auto; }
.ad-ctrl button { min-width: 44px; height: 44px; padding: 0 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,.35); background: rgba(20,24,44,.92); color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; }
.ad-ctrl button[aria-pressed="true"] { background: #fff; color: #0b0f22; }
.ad-ctrl .ad-sep { width: 1px; height: 28px; background: rgba(255,255,255,.3); margin: 0 4px; }
.ad-ctrl .ad-keys { flex-basis: 100%; text-align: center; font-size: 13px; color: rgba(255,255,255,.7); }
@media (prefers-reduced-motion: reduce) { .ad-ctrl { transition: none; } }

/* App page (installed WaAtsam) */
.ad-appbody { margin: 0; background: #f2f4f8; }
.ad-app { max-width: 760px; margin: 0 auto; padding: calc(10px + env(safe-area-inset-top, 0px)) 16px calc(40px + env(safe-area-inset-bottom, 0px)); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.ad-apphead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0 14px; }
.ad-applogo img { display: block; height: 26px; width: auto; }
.ad-appright { display: flex; align-items: center; gap: 8px; }
.ad-pill { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: #4a5170; border-radius: 999px; padding: 3px 10px; }
.ad-pill[hidden], .ad-install[hidden] { display: none; }
.ad-install { border: 0; border-radius: 8px; background: #0070c0; color: #fff; font: 700 14px system-ui, sans-serif; height: 38px; padding: 0 14px; cursor: pointer; }
.ad-hint { margin: 0; color: var(--ad-ink2, #4a5170); font-size: 16px; }
.ad-recent { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ad-recent a { display: flex; gap: 14px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--ad-line, #dde1ec); color: var(--ad-ink, #141a33); text-decoration: none; }
.ad-recent li:first-child a { border-top: 0; }
.ad-wrap-inner { display: flex; flex-direction: column; gap: 20px; }

/* Brand colours from the logo: W red, A blue */
.ad-no { color: var(--ad-brand); }
.ad-head::after { content: ""; display: block; width: 72px; height: 5px; margin-top: 10px; border-radius: 3px; background: linear-gradient(90deg, var(--ad-red) 0 50%, var(--ad-brand) 50% 100%); }
.ad-size button { color: var(--ad-brand); border-color: var(--ad-brand); }
.ad-size button:hover { background: var(--ad-brand); color: #fff; }
.ad-search .ad-q:focus { border-color: var(--ad-brand); outline: 0; box-shadow: 0 0 0 3px rgba(0, 112, 192, .25); }
.ad-label { color: var(--ad-ink2); }
.ad-ctrl button[aria-pressed="true"] { background: #fff; color: #0070c0; }

/* Front page "Atsam A Vesen" */
.ad-hero { background: var(--ad-surface); border: 1px solid var(--ad-line); border-radius: 14px; padding: 26px 20px 22px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; border-top: 6px solid var(--ad-brand); }
.ad-hero-logo { max-width: 300px; width: 70%; height: auto; display: block; }
.ad-hero-line { margin: 0; color: var(--ad-ink2); font-size: 17px; }
.ad-hero .ad-search { width: 100%; text-align: left; }
.ad-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.ad-hero-actions [hidden] { display: none; }
.ad-btn { text-decoration: none; justify-content: center; }
a.ad-btn:hover { color: #fff; }
.ad-h { margin: 0 0 12px; font-size: 22px; font-weight: 800; color: var(--ad-brand); line-height: 1.2; }
.ad-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ad-chip { display: inline-block; padding: 8px 14px; border: 1px solid var(--ad-brand); border-radius: 999px; background: var(--ad-surface); color: var(--ad-brand); font-weight: 700; font-size: 15px; text-decoration: none; font-variant-numeric: tabular-nums; }
.ad-chip:hover, .ad-chip.is-on { background: var(--ad-brand); color: #fff; }
.ad-list { list-style: none; margin: 16px 0 0; padding: 0; background: var(--ad-surface); border: 1px solid var(--ad-line); border-radius: 10px; }
.ad-list li { margin: 0; padding: 0; border-top: 1px solid var(--ad-line); }
.ad-list li:first-child { border-top: 0; }
.ad-list a { display: flex; gap: 14px; align-items: baseline; padding: 11px 14px; color: var(--ad-ink); text-decoration: none; }
.ad-list a:hover { background: var(--ad-bg); }
.ad-list .ad-rt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* One-page list: [waatsam_list] */
.ad-sticky { position: sticky; top: 0; z-index: 40; background: var(--ad-bg); padding: 10px 0 8px; display: flex; flex-direction: column; gap: 6px; }
.ad-count { font-size: 14px; color: var(--ad-ink2); font-weight: 700; }
.ad-biglist { margin-top: 0; }
.ad-biglist li[hidden], .ad-biglist[hidden] { display: none; }
.ad-biglist .ad-rbody { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ad-biglist .ad-rt { white-space: normal; }
.ad-biglist .ad-rs { font-size: 13px; }
.ad-pager { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; margin-top: 4px; }
.ad-pg { min-width: 42px; height: 42px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ad-brand); border-radius: 8px; background: var(--ad-surface); color: var(--ad-brand); font-weight: 700; text-decoration: none; }
.ad-pg:hover, .ad-pg.is-on { background: var(--ad-brand); color: #fff; }
.ad-gap { color: var(--ad-ink2); padding: 0 2px; }
.ad-pager[hidden] { display: none; }

/* Lists: only the song number is shown, never a theme list counter */
.ad-wrap ul.ad-list, .ad-wrap ul.ad-list > li, .ad-wrap ul.ad-results, .ad-wrap ul.ad-results > li, .ad-wrap ul.ad-recent, .ad-wrap ul.ad-recent > li { list-style: none !important; list-style-type: none !important; }
.ad-wrap ul.ad-list, .ad-wrap ul.ad-results, .ad-wrap ul.ad-recent { padding-left: 0 !important; margin-left: 0 !important; }
.ad-wrap ul.ad-list > li::marker, .ad-wrap ul.ad-results > li::marker, .ad-wrap ul.ad-recent > li::marker { content: "" !important; font-size: 0 !important; }
.ad-wrap ul.ad-list > li::before, .ad-wrap ul.ad-list > li::after { content: none !important; counter-increment: none !important; }

.ad-lock{text-align:center;border:2px dashed var(--ad-brand);border-radius:14px;padding:20px 16px;margin-top:18px}
.ad-lock .ad-lock-h{margin:6px 0 8px;font-size:1.2em}
.ad-lock p{margin:0 0 12px}
.ad-plans{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:8px 0}
.ad-plans .ad-btn{display:inline-flex;flex-direction:column;align-items:center;text-decoration:none;padding:10px 18px}
.ad-plan-n{font-weight:700}.ad-plan-p{font-size:.9em;opacity:.9}
.ad-lock-login{font-size:.95em}
.ad-plans .ad-btn{height:auto;min-height:52px}
.ad-free-note{text-align:center;font-size:.9em;color:var(--ad-brand);font-weight:700;margin:14px 0 0}
.ad-lock-free{font-size:.95em}.ad-lock a:not(.ad-btn){color:var(--ad-brand);font-weight:700}