/* No Cover Charge · Daily Licks styles. Owned by WS1 Daily Licks; Foundation owns ncc.css.
   Linked from both hosts (GuitarSuperSystem/wwwroot/index.html, GuitarSuperSystem.Web/Components/App.razor)
   after ncc/ncc.css with the shared build stamp, so it ships with every deploy and can use the tokens.
   Plain CSS (Tailwind does not compile this file): scope every rule under the feature's root class,
   use var(--n-*) tokens instead of raw colours, and keep motion to the ncc.css kit.

   Roots: .dl-wrap (the Daily Licks page, incl. its fullscreen feed),
   .ncc-feed-chrome (close / sound buttons over any full-screen video feed), .dl-sheet-*, .dl-ms, .dl-ask
   and .dl-share-card (sheet content: NSheet may move itself to <body>, so these can't hang off .dl-wrap),
   .ncc-takes (TakesRow), .ncc-clip (ClipPlayer), .tkc (TakeComposer). */

/* ---- page header, streak, week strip ------------------------------------------------------------- */
/* Gutter, width and top spacing come from NPage; the tab room below comes from the layout. */
.dl-wrap { color: var(--n-text); }
.dl-wrap .dl-header { display: flex; align-items: center; justify-content: space-between; gap: var(--n-4); }
.dl-wrap .dl-header__titles { min-width: 0; }
.dl-wrap .dl-header .n-kicker { display: block; margin-bottom: 6px; }
.dl-wrap .dl-title { margin: 0; }
.dl-wrap .dl-streaknum { display: flex; align-items: center; gap: var(--n-2); flex: none; }
.dl-wrap .dl-streaknum > b {
  min-width: 1.2ch; font: 700 34px/1 var(--n-font-display); letter-spacing: var(--n-ls-title);
  color: var(--n-red); font-variant-numeric: tabular-nums; text-align: right;
}
.dl-wrap .dl-streakflame { color: var(--n-red); --n-icon-size: 26px; }
/* The streak goal ring around the flame (pathLength 100; the offset is the part still to go). */
.dl-wrap .dl-ring { position: relative; display: grid; place-items: center; width: 44px; height: 44px; flex: none; }
.dl-wrap .dl-ring__svg { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; overflow: visible; }
.dl-wrap .dl-ring__track, .dl-wrap .dl-ring__fill { fill: none; stroke-width: 3; }
.dl-wrap .dl-ring__track { stroke: var(--n-line-2); }
.dl-wrap .dl-ring__fill {
  stroke: var(--n-red); stroke-linecap: round; stroke-dasharray: 100 100;
  transition: stroke-dashoffset var(--n-dur-slow) var(--n-out);
}
.dl-wrap .dl-ring__fill.is-full { stroke: var(--n-amber); }
.dl-wrap .dl-streakword {
  font: 700 var(--n-fs-kicker)/1.15 var(--n-font-display); letter-spacing: var(--n-ls-kicker);
  text-transform: uppercase; color: var(--n-text-2);
}
/* Same footprint as the number it stands in for, so the title never shifts when the streak lands. */
.dl-wrap .dl-streaknum.is-skel { width: 136px; height: 44px; }

.dl-wrap .dl-week { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; margin: var(--n-4) 0 var(--n-2); max-width: 560px; }
.dl-wrap .dl-week--skel { margin-bottom: var(--n-4); }
.dl-wrap .dl-week--skel .n-skel { border-radius: var(--n-r-sm); }
.dl-wrap .dl-day {
  display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 71px; padding: 8px 0 9px;
  background: transparent; border: 1px solid var(--n-line-2); border-radius: var(--n-r-sm); color: inherit; font: inherit;
  transition: border-color var(--n-dur-fast) ease, background-color var(--n-dur-fast) ease, scale var(--n-dur-fast) ease;
}
/* Eight pills share a 343px phone row (about 39px each); the hit area reaches 3px into the gaps either
   side so every tappable day is at least 44px wide. */
.dl-wrap .dl-day { position: relative; }
.dl-wrap .dl-day::after { content: ""; position: absolute; inset: 0 -3px; }
.dl-wrap .dl-day:not(:disabled) { cursor: pointer; }
.dl-wrap .dl-day:not(:disabled):active { scale: .96; }
@media (hover: hover) { .dl-wrap .dl-day:not(:disabled):hover { background: var(--n-card); } }
.dl-wrap .dl-day:disabled { cursor: default; opacity: 1; }
.dl-wrap .dl-day-l {
  font: 700 var(--n-fs-kicker)/1 var(--n-font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--n-text-2);
}
.dl-wrap .dl-day-n { font: 700 var(--n-fs-small)/1 var(--n-font-display); font-variant-numeric: tabular-nums; }
.dl-wrap .dl-day-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--n-card-3);
  transition: background-color var(--n-dur) var(--n-out), box-shadow var(--n-dur) var(--n-out), scale var(--n-dur) var(--n-pop);
}
/* A missed day a streak freeze covered: ice instead of a hole. */
.dl-wrap .dl-day-ice { height: 8px; display: grid; place-items: center; color: var(--n-text-hi); overflow: visible; }
.dl-wrap .dl-day.frozen { border-color: var(--n-line-3); background: var(--n-card); }
.dl-wrap .dl-day.done .dl-day-dot { background: var(--n-red); box-shadow: 0 0 10px var(--n-red-line); }
.dl-wrap .dl-day.missed .dl-day-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--n-text-3); }
/* No lick dropped that day: neutral, never "missed". */
.dl-wrap .dl-day.nodrop { border-style: dashed; border-color: var(--n-line); }
.dl-wrap .dl-day.nodrop .dl-day-dot { background: var(--n-card-2); }
.dl-wrap .dl-day.today { border-color: var(--n-red-line); }
.dl-wrap .dl-day.today.open .dl-day-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--n-red); }
/* The day Mark Complete just filled: pops with a glow (nccLicks.celebrate). */
.dl-wrap .dl-day-dot.is-new { animation: n-like calc(520ms / var(--n-tempo)) var(--n-pop) 1; box-shadow: 0 0 16px var(--n-red), 0 0 4px var(--n-red); }

/* Best and total under the strip: one quiet line, so the hero still starts high on a phone. */
.dl-wrap .dl-under { display: grid; gap: var(--n-2); margin: 0 0 var(--n-4); }
.dl-wrap .dl-stats { display: flex; gap: var(--n-4); font-size: var(--n-fs-small); color: var(--n-text-2); }
.dl-wrap .dl-stats b { font-family: var(--n-font-display); font-weight: 700; color: var(--n-text); font-variant-numeric: tabular-nums; }
.dl-wrap .dl-freezes { display: inline-flex; align-items: center; gap: 4px; }
.dl-wrap .dl-freezes .n-icon { color: var(--n-text-hi); }
.dl-wrap .dl-perfect { margin: 0; }
.dl-wrap .dl-hint { font-size: var(--n-fs-small); color: var(--n-text-2); }
.dl-wrap .dl-hint b { color: var(--n-text); font-weight: 600; }
.dl-wrap .dl-tagline { margin: 6px 0 var(--n-6); color: var(--n-text-2); }
.dl-wrap .dl-error { margin-bottom: var(--n-4); }

/* ---- hero ---------------------------------------------------------------------------------------- */
.dl-wrap .dl-today { display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: var(--n-6); align-items: start; }

/* The licks are genuinely vertical: every HLS rendition is 9:16 (810x1440,
   608x1080, 406x720, 270x480). Ignore the master playlist's RESOLUTION tags,
   which wrongly advertise 2560x1440 landscape — the tags are bad metadata
   from the transcode, not a description of the frames. Trust ffprobe on a
   variant playlist, not the master, if this ever needs re-checking.

   Height is what's constrained here, not width. At 9:16 a full-width player
   on a phone is taller than the viewport, so the video and its title/streak
   controls could not be on screen at once and the page had to be scrolled to
   watch one lick. Deriving width from 68vh keeps the whole unit visible;
   anyone wanting it bigger taps into the fullscreen overlay.

   width is load-bearing: `margin: 0 auto` on a grid item cancels the default
   stretch alignment in WebKit, so the box falls back to shrink-to-fit; its
   children are percentage-sized, so it collapses to 0x0 and the player
   vanishes on iOS. Use justify-self, never auto margins. */
.dl-wrap .dl-player-col { width: min(100%, calc(68vh * 9 / 16)); justify-self: center; min-width: 0; }
.dl-wrap .dl-player {
  position: relative; width: 100%; aspect-ratio: 9 / 16;
  background: #000; border-radius: var(--n-r-lg); overflow: hidden; box-shadow: var(--n-shadow-card);
}
/* contain, not cover: the frames are already exactly 9:16, so this fits with
   nothing cropped, and it stays safe if a box ever lands a pixel off-ratio. */
.dl-wrap .dl-player video { width: 100%; height: 100%; object-fit: contain; }
.dl-wrap .dl-player--skel { background: var(--n-card); box-shadow: none; }
.dl-wrap .dl-player--skel .n-skel { position: absolute; inset: 0; height: 100% !important; border-radius: 0; }
.dl-wrap .dl-thumb-fallback { width: 100%; height: 100%; border-radius: 0; }
.dl-wrap .dl-thumb-fallback.is-locked > img { filter: grayscale(.4) brightness(.5); }

/* Sits clear of the bottom control bar so it never covers the scrubber. */
.dl-wrap .dl-fs {
  position: absolute; top: 10px; right: 10px; z-index: 5; display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 0 12px; border: 0; border-radius: var(--n-r-pill); cursor: pointer;
  background: var(--n-scrim); color: var(--n-text-hi); font: 600 var(--n-fs-meta)/1 var(--n-font-body);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

.dl-wrap .dl-meta { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.dl-wrap .dl-eyebrow { display: flex; align-items: center; gap: var(--n-2); min-height: 20px; }
.dl-wrap .dl-back { min-height: 28px; margin-left: auto; }
.dl-wrap .dl-lick-title { margin: 2px 0 0; font: 700 26px/1.15 var(--n-font-display); letter-spacing: var(--n-ls-title); text-wrap: balance; }
.dl-wrap .dl-artist { color: var(--n-text-2); font-size: var(--n-fs-body); }
.dl-wrap .dl-badges { display: flex; gap: var(--n-2); align-items: center; margin: 4px 0 var(--n-3); }
.dl-wrap .dl-dur { color: var(--n-text-3); font-size: var(--n-fs-meta); font-variant-numeric: tabular-nums; }
.dl-wrap .dl-done { display: inline-flex; align-items: center; gap: 6px; min-height: 50px; color: var(--n-go); font-weight: 600; }
/* 90% through the lick: Mark Complete asks "Nailed it?" with a few red rings. */
.dl-wrap .dl-complete.is-nudge { animation: n-pulse calc(1100ms / var(--n-tempo)) var(--n-out) 3; }
.dl-wrap .dl-skel-title { margin: 6px 0 2px; }
.dl-wrap .dl-skel-cta { margin-top: var(--n-2); }

/* Mark Complete's success state: the button morphs into a "Day N" stamp that slams in (ncc.stamp). */
.dl-wrap .dl-stamp {
  display: inline-flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 20px 0 16px;
  border-radius: var(--n-r-md); border: 1.5px solid var(--n-red); background: var(--n-red-wash); color: var(--n-text-hi);
  font: 700 18px/1 var(--n-font-display); letter-spacing: .02em; transform-origin: 30% 50%;
  --n-icon-size: 24px;
}
.dl-wrap .dl-stamp .n-icon { color: var(--n-red); }
.dl-wrap .dl-stamp--slide { min-height: 44px; font-size: 16px; }

/* ---- take ask, takes row ------------------------------------------------------------------------- */
.dl-wrap .dl-take { display: grid; gap: var(--n-2); margin-top: var(--n-5); }
/* The streak goal question under the lick (first visit without a goal). */
.dl-wrap .dl-goalcard { display: grid; gap: var(--n-2); margin-top: var(--n-5); }
.dl-wrap .dl-goalcard__title { margin: 0; font: 700 var(--n-fs-h2)/1.2 var(--n-font-display); }
.dl-wrap .dl-goalcard__copy { margin: 0 0 var(--n-2); color: var(--n-text-2); font-size: var(--n-fs-small); line-height: 1.5; }
.dl-wrap .dl-take-title { margin: 0; font: 700 var(--n-fs-h2)/1.2 var(--n-font-display); }
.dl-wrap .dl-take-copy { margin: 0; color: var(--n-text-2); font-size: var(--n-fs-small); line-height: 1.5; }
.dl-wrap .dl-take-row { display: flex; gap: var(--n-2); margin-top: 4px; }
.dl-wrap .dl-take-cta { flex: 1; }
.dl-wrap .dl-takes { margin-top: var(--n-section); }
.dl-wrap .dl-takes-alert { margin-bottom: var(--n-3); }

/* ---- Tab Pro ------------------------------------------------------------------------------------- */
.dl-wrap .dl-tab { margin-top: var(--n-section); }
.dl-wrap .dl-tab-card { border-left: 3px solid var(--n-red); }
.dl-wrap .dl-tab-head { display: flex; gap: var(--n-3); align-items: flex-start; margin-bottom: var(--n-3); }
.dl-wrap .dl-tab-icon {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--n-r-sm);
  background: var(--n-red-wash); color: var(--n-red); --n-icon-size: 22px;
}
.dl-wrap .dl-tab-body { min-width: 0; }
.dl-wrap .dl-tab-title { font: 700 var(--n-fs-h3)/1.3 var(--n-font-display); }
.dl-wrap .dl-tab-sub { margin-top: 2px; color: var(--n-text-2); font-size: var(--n-fs-small); line-height: 1.45; }
.dl-wrap .dl-tab-dl { margin-top: var(--n-3); }

/* ---- the vault ----------------------------------------------------------------------------------- */
.dl-wrap .dl-archive { margin-top: var(--n-section); }
/* nccLicks.scrollTo / scrollToPulse targets land below the top bar, not under it. */
.dl-wrap .dl-archive, .dl-wrap .dl-tab, .dl-wrap .dl-upsell, .dl-wrap .dl-today { scroll-margin-top: calc(var(--n-safe-t) + var(--n-topbar-h) + var(--n-3)); }
.dl-wrap .dl-filter { margin-bottom: var(--n-4); }
.dl-wrap .dl-archive > .n-alert { margin-bottom: var(--n-4); }
.dl-wrap .dl-more-alert { margin-top: var(--n-4); }
.dl-wrap .dl-upsell { display: grid; gap: var(--n-2); justify-items: start; margin-bottom: var(--n-4); }
.dl-wrap .dl-upsell-title { margin: 2px 0 0; font: 700 var(--n-fs-h3)/1.3 var(--n-font-display); }
.dl-wrap .dl-upsell-copy { margin: 0 0 4px; color: var(--n-text-2); font-size: var(--n-fs-small); line-height: 1.45; }
/* Leaving the feed on a locked slide brings the upsell into view with one pulse. */
.dl-wrap .dl-upsell.is-pulse { animation: dl-pulse calc(1400ms / var(--n-tempo)) var(--n-out) 1; }
@keyframes dl-pulse {
  0% { box-shadow: 0 0 0 0 var(--n-red-line); }
  40% { box-shadow: 0 0 0 10px rgba(232,35,43,0); scale: 1.015; }
  100% { box-shadow: 0 0 0 0 rgba(232,35,43,0); }
}

/* Two columns on phones: auto-fill at 150px fell to ONE column inside a 32px gutter at
   375px, which made every tile full width and the page ~16,700px tall. */
/* align-items:start: a tile is a <button>, which centres its content when a row stretches it, so a
   one-line title sat lower than its two-line neighbour. */
.dl-wrap .dl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--n-3); align-items: start; }
@media (min-width: 640px) { .dl-wrap .dl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--n-4); } }
@media (min-width: 1024px) { .dl-wrap .dl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dl-wrap .dl-vault-end { height: 1px; }

/* VaultTile */
.dl-wrap .dl-card {
  display: block; width: 100%; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit;
  text-align: left; cursor: pointer; transition: scale var(--n-dur-fast) ease;
}
.dl-wrap .dl-card:active { scale: .97; }
.dl-wrap .dl-card.is-skel { cursor: default; display: grid; gap: 6px; }
.dl-wrap .dl-card-skel { border-radius: var(--n-r-sm); margin-bottom: 4px; }
.dl-wrap .dl-thumb { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: var(--n-r-sm); background: var(--n-card); overflow: hidden; }
/* inset:0 pins the image to the tile box, so object-fit always has a concrete
   box to fit against: if anything ever stretches the tile off 9:16, the image
   crops from the centre instead of collapsing to a sliver. */
.dl-wrap .dl-card.locked .dl-thumb > img { filter: grayscale(.4) brightness(.55); }
.dl-wrap .dl-lock { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.25); }
.dl-wrap .dl-card-done {
  position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--n-go); color: var(--n-bg);
}
.dl-wrap .dl-card-title {
  display: -webkit-box; margin: 8px 0 4px; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  font: 600 var(--n-fs-small)/1.3 var(--n-font-body); color: var(--n-text);
}
.dl-wrap .dl-card-sub { display: flex; gap: var(--n-2); align-items: center; }
.dl-wrap .dl-card-date { color: var(--n-text-3); font-size: var(--n-fs-meta); }

/* ---- phones: the hero is one card ---------------------------------------------------------------- */
@media (max-width: 640px) {
  /* The hero is one full-width card: the player across the top (a black stage with
     the 9:16 video contained in it), then the title, difficulty and Mark Complete on
     a band that fades from the stage into the card. Everything above the player is
     compressed so that the player, the lick title and Mark Complete all fit in one
     viewport: watch it, then mark it. */
  .dl-wrap .dl-today { grid-template-columns: 1fr; gap: 0; background: var(--n-card); border: 1px solid var(--n-line); border-radius: var(--n-r-lg); overflow: hidden; }
  /* The tagline is marketing copy for people deciding whether to care; on a phone it costs
     the exact space the Mark Complete button needs. Desktop keeps it. */
  .dl-wrap .dl-tagline { display: none; }
  /* 46vh, not more: the app's bottom nav overlays roughly the last 85pt of
     the viewport, which vh units know nothing about. Sizing purely off vh
     put the button underneath the nav bar on a real device even though it
     fit fine in a browser at the same height. If this is ever retuned,
     check it in the simulator, not the web preview. */
  .dl-wrap .dl-player-col { width: 100%; justify-self: stretch; }
  .dl-wrap .dl-player { width: 100%; max-height: 46vh; justify-self: stretch; border-radius: 0; box-shadow: none; }
  /* Speed and loop sit on the black stage, which runs on into the title band's fade. The stage gives up
     their height, so Mark Complete stays as high as it was (above the tab bar). */
  .dl-wrap .dl-player-col.vp-wrap { gap: 0; background: #000; }
  .dl-wrap .dl-player-col.vp-wrap .dl-player { max-height: calc(46vh - 40px); }
  .dl-wrap .dl-player-col .vp-tools { padding: 6px var(--n-4) 0; }
  /* Metadata stays BELOW rather than overlaid: the player's native controls run along the bottom of the video. */
  .dl-wrap .dl-meta { padding: var(--n-3) var(--n-4) var(--n-4); background: linear-gradient(180deg, #000, var(--n-card) 56px); }
  .dl-wrap .dl-lick-title { font-size: 21px; }
  .dl-wrap .dl-badges { margin-bottom: var(--n-2); }
  .dl-wrap .dl-complete { align-self: stretch; }
}

/* ---- fullscreen swipe feed ------------------------------------------------------------------------
   An in-app overlay rather than native video fullscreen. Native would swap in the OS player, losing our
   chrome, and on iPhone it wants to rotate landscape, which is wrong for 9:16 content. In the MAUI app
   the WebView is already the whole screen, so this is visually equivalent.

   The swipe itself is CSS scroll-snap, not a JS gesture handler. Native scrolling gives momentum,
   rubber-banding and accessibility for free, and it tracks the finger perfectly because it never leaves
   the compositor. JS (nccLickFeed) only decides which video plays. */
.dl-wrap .dl-feed {
  position: fixed; inset: 0; z-index: var(--n-z-full); background: #000; color: var(--n-text-hi);
  overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;   /* don't chain the scroll to the page underneath */
  scrollbar-width: none;
}
.dl-wrap .dl-feed::-webkit-scrollbar { display: none; }
.dl-wrap .dl-slide {
  position: relative;
  /* 100% of the container, not 100vh/100dvh. .dl-feed is position:fixed with inset:0, so it already IS
     the viewport and percentage height matches it exactly. Both viewport units came up short of the
     WebView's real height on device, which left the next slide peeking in under the meta panel. */
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;       /* one lick per swipe, never fling past three */
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.dl-wrap .dl-slide-video { width: 100%; height: 100%; object-fit: contain; background: #000; }
/* Tap-to-pause indicator. pointer-events:none so the tap that resumes lands on the slide underneath. */
.dl-wrap .dl-slide-paused {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 76px; height: 76px; border-radius: 50%;
  display: none; place-items: center; background: var(--n-scrim); color: var(--n-text-hi); pointer-events: none;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.dl-wrap .dl-slide.is-paused .dl-slide-paused { display: grid; }
.dl-wrap .dl-slide-poster { position: absolute; inset: 0; border-radius: 0; filter: brightness(.35); }
.dl-wrap .dl-slide-lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 0 var(--n-8); text-align: center; }
.dl-wrap .dl-slide-lock-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--n-red-wash); color: var(--n-pink); }
.dl-wrap .dl-slide-lock-title { font: 700 var(--n-fs-h3)/1.3 var(--n-font-display); margin-bottom: 4px; }

.dl-wrap .dl-slide-meta {
  position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 4px; justify-items: start;
  padding: 48px 84px calc(var(--n-safe-b) + var(--n-5)) var(--n-4);
  /* Gradient rather than a solid bar: the video runs edge to edge behind it. */
  background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0));
}
.dl-wrap .dl-slide-title { font: 700 18px/1.25 var(--n-font-display); }
.dl-wrap .dl-slide-artist { color: var(--n-text-2); font-size: var(--n-fs-small); }
.dl-wrap .dl-slide-badges { display: flex; gap: var(--n-2); align-items: center; margin: 4px 0 8px; }
.dl-wrap .dl-slide-date { color: var(--n-text-2); font-size: var(--n-fs-meta); }
.dl-wrap .dl-slide-done { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--n-go); font-weight: 600; font-size: 14px; }

/* Right rail on lick slides: takes, share, tab. Above the meta band, clear of the home indicator. */
.dl-wrap .dl-rail {
  position: absolute; right: 8px; bottom: calc(var(--n-safe-b) + 120px); z-index: var(--n-z-raised);
  display: grid; gap: var(--n-3); justify-items: center;
}
.dl-wrap .dl-rail-item { display: grid; justify-items: center; gap: 2px; }
.dl-wrap .dl-rail-item > small { font: 700 var(--n-fs-meta)/1 var(--n-font-display); color: var(--n-text-hi); text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.dl-wrap .dl-rail-btn { background: var(--n-scrim); color: var(--n-text-hi); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); --n-icon-size: 24px; }

/* Close top-left, sound top-right, over any full-screen video feed (the lick feed; the takes viewer can
   share it). Fixed to the viewport, so the safe-area inset belongs right here. */
.ncc-feed-chrome {
  position: fixed; top: calc(var(--n-safe-t) + 10px); z-index: calc(var(--n-z-full) + 1);
  width: 40px; height: 40px; min-width: 40px; min-height: 40px; border-radius: 50%; border: 0;
  background: rgba(0,0,0,.45); color: var(--n-text-hi); --n-icon-size: 20px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.ncc-feed-chrome--start { left: 12px; }
.ncc-feed-chrome--end { right: 12px; }

/* ---- sheets (catch-up, reminders, milestone) ------------------------------------------------------ */
.dl-sheet-copy { margin: 0; color: var(--n-text-2); font-size: 14px; line-height: 1.5; }
.dl-sheet-actions { display: grid; gap: var(--n-2); width: 100%; }

/* StreakGoalPicker: three goal cards (a radiogroup), then Commit / Not now. Unscoped: it also sits in
   sheets and in onboarding, outside .dl-wrap. */
.dl-goal { display: grid; gap: var(--n-3); }
.dl-goal__opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--n-2); }
/* Top-aligned, so the big numbers line up across the row when one label wraps to two lines. */
.dl-goal__opt {
  display: grid; justify-items: center; align-content: start; gap: 2px; min-height: 96px; padding: var(--n-4) var(--n-2) var(--n-3);
  border: 1px solid var(--n-line-2); border-radius: var(--n-r-md); background: var(--n-card-2); color: var(--n-text);
  font: inherit; cursor: pointer;
  transition: border-color var(--n-dur-fast) ease, background-color var(--n-dur-fast) ease, scale var(--n-dur-fast) var(--n-pop);
}
.dl-goal__opt:not(:disabled):active { scale: .97; }
.dl-goal__opt.on { border-color: var(--n-red); background: var(--n-red-wash); }
.dl-goal__opt:disabled { cursor: default; opacity: .45; }
.dl-goal__n { font: 700 30px/1 var(--n-font-display); letter-spacing: var(--n-ls-title); font-variant-numeric: tabular-nums; }
.dl-goal__opt.on .dl-goal__n { color: var(--n-text-hi); }
.dl-goal__unit {
  font: 700 var(--n-fs-kicker)/1.2 var(--n-font-display); letter-spacing: var(--n-ls-kicker); text-transform: uppercase; color: var(--n-text-2);
}
.dl-goal__sub { margin-top: 4px; color: var(--n-text-3); font-size: var(--n-fs-meta); text-align: center; }
.dl-goal__opt.on .dl-goal__sub { color: var(--n-pink); }
.dl-goal__actions { display: grid; gap: var(--n-2); }

.dl-ask { display: grid; justify-items: center; gap: var(--n-2); padding: var(--n-2) 0 0; text-align: center; }
.dl-ask__icon {
  display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: var(--n-2); border-radius: 50%;
  background: var(--n-red-wash); color: var(--n-red); --n-icon-size: 28px;
}
.dl-ask__title { margin: 0; font: 700 var(--n-fs-h2)/1.2 var(--n-font-display); }
.dl-ask__body { margin: 0 0 var(--n-3); max-width: 34ch; color: var(--n-text-2); font-size: 14px; line-height: 1.5; }

.dl-ms { display: grid; gap: var(--n-3); padding-top: var(--n-1); }
.dl-ms__title { margin: var(--n-2) 0 0; font: 700 var(--n-fs-h2)/1.2 var(--n-font-display); text-align: center; text-wrap: balance; }
.dl-ms__body { margin: 0; color: var(--n-text-2); font-size: 14px; line-height: 1.5; text-align: center; }
.dl-ms__badges { display: grid; gap: var(--n-2); }
.dl-ms__badge { display: flex; align-items: center; gap: var(--n-3); padding: 10px 12px; border-radius: var(--n-r-md); background: var(--n-card-2); }
.dl-ms__badge-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--n-red-wash); color: var(--n-red); --n-icon-size: 22px; }
.dl-ms__badge-text { display: grid; gap: 2px; min-width: 0; }
.dl-ms__badge-text b { font: 700 15px/1.3 var(--n-font-display); }
.dl-ms__badge-text small { color: var(--n-text-2); font-size: var(--n-fs-meta); line-height: 1.4; }
.dl-ms__actions { display: grid; gap: var(--n-2); margin-top: var(--n-2); }

/* StreakShareCard: the preview of the image "Share your streak" sends (nccLicks.shareStreak draws it). */
.dl-share-card {
  display: grid; gap: 4px; padding: var(--n-5); border-radius: var(--n-r-lg); border: 1px solid var(--n-red-line);
  background: radial-gradient(120% 90% at 100% 0%, rgba(232,35,43,.38), rgba(232,35,43,0) 60%), var(--n-bg);
}
.dl-share-card__kick { font: 700 var(--n-fs-kicker)/1.2 var(--n-font-display); letter-spacing: var(--n-ls-kicker); text-transform: uppercase; color: var(--n-pink); }
.dl-share-card__num {
  display: inline-flex; align-items: center; gap: 6px; margin-top: var(--n-2);
  font: 700 72px/1 var(--n-font-display); letter-spacing: var(--n-ls-title); color: var(--n-red); font-variant-numeric: tabular-nums;
  --n-icon-size: 48px;
}
.dl-share-card__word { font: 700 22px/1.2 var(--n-font-display); color: var(--n-text); }
.dl-share-card__days { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; margin-top: var(--n-3); }
.dl-share-card__days > span { aspect-ratio: 1; border-radius: 6px; background: var(--n-card-2); }
.dl-share-card__days > span.on { background: var(--n-red); }

/* ---- TakesRow ------------------------------------------------------------------------------------ */
.ncc-takes { display: flex; gap: var(--n-2); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.ncc-takes::-webkit-scrollbar { display: none; }
.ncc-takes .ncc-tk-item { flex: none; display: flex; }
.ncc-takes .ncc-tk {
  position: relative; flex: none; width: 88px; aspect-ratio: 9 / 14; border-radius: var(--n-r-sm); overflow: hidden;
  background: var(--n-sunken); border: 0; padding: 0; cursor: pointer; color: var(--n-text-hi);
  transition: scale var(--n-dur-fast) ease;
}
.ncc-takes .ncc-tk:active { scale: .96; }
.ncc-takes .ncc-tk > .n-img { position: absolute; inset: 0; border-radius: 0; }
.ncc-takes .ncc-tk::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.8)); }
.ncc-takes .ncc-tk.mine { outline: 2px solid var(--n-red); outline-offset: -2px; }
.ncc-takes .ncc-tk-who {
  position: absolute; left: 7px; right: 7px; bottom: 6px; z-index: 1; font-size: var(--n-fs-kicker); font-weight: 600;
  line-height: 1.2; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ncc-takes .ncc-tk-dur {
  position: absolute; top: 6px; right: 6px; z-index: 1; padding: 1px 5px; border-radius: var(--n-r-xs); background: var(--n-scrim);
  font: 700 var(--n-fs-micro)/1.4 var(--n-font-display);
}
.ncc-takes .ncc-tk-add {
  display: grid; place-items: center; align-content: center; gap: 6px; background: var(--n-card-2); border: 1.5px dashed var(--n-line-3);
  font: 700 var(--n-fs-kicker)/1 var(--n-font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--n-pink);
}
.ncc-takes .ncc-tk-add::after { display: none; }
.ncc-takes .ncc-tk-add .n-icon { color: var(--n-red); }
.ncc-takes .ncc-tk-skel { border-radius: var(--n-r-sm); }

/* ---- ClipPlayer ---------------------------------------------------------------------------------- */
.ncc-clip { position: relative; width: 100%; max-width: 420px; aspect-ratio: 4 / 5; border-radius: var(--n-r-sm); overflow: hidden; background: #000; }
.ncc-clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.ncc-clip .ncc-clip-play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 60px; height: 60px; border-radius: 50%; border: 0;
  display: grid; place-items: center; background: var(--n-scrim); color: var(--n-text-hi); cursor: pointer;
}
.ncc-clip .ncc-clip-dur {
  position: absolute; right: 8px; bottom: 8px; padding: 2px 6px; border-radius: var(--n-r-xs); background: var(--n-scrim);
  color: var(--n-text-hi); font: 700 var(--n-fs-kicker)/1.3 var(--n-font-display);
}

/* ---- TakeComposer (inside NSheet) ---------------------------------------------------------------- */
.tkc .tkc-body { display: flex; flex-direction: column; gap: var(--n-3); }
.tkc .tkc-stage {
  position: relative; flex: none; width: 100%; aspect-ratio: 4 / 5; max-height: 46dvh; border-radius: var(--n-r-md); overflow: hidden;
  background: var(--n-sunken); border: 1px solid var(--n-line);
}
.tkc .tkc-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tkc .tkc-stage > .n-img { position: absolute; inset: 0; border-radius: 0; }
.tkc .tkc-empty { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 14px; padding: var(--n-5); text-align: center; }
.tkc .tkc-empty p { margin: 0; font-size: var(--n-fs-small); color: var(--n-text-2); }
.tkc .tkc-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.tkc .tkc-pickbtn {
  display: grid; justify-items: center; gap: 6px; padding: 16px 8px; border-radius: var(--n-r-md); border: 0; cursor: pointer;
  background: var(--n-card-2); color: var(--n-text); font: 700 12px/1 var(--n-font-display); letter-spacing: var(--n-ls-btn); text-transform: uppercase;
  transition: scale var(--n-dur-fast) ease;
}
.tkc .tkc-pickbtn:active { scale: .97; }
.tkc .tkc-pickbtn.rec .n-icon { color: var(--n-red); }
.tkc .tkc-busy {
  position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px; border-radius: var(--n-r-sm); background: rgba(0,0,0,.7); font-size: var(--n-fs-small); color: var(--n-text-hi);
}
.tkc .tkc-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.12); }
.tkc .tkc-progress > span { display: block; height: 100%; background: var(--n-red); transition: width var(--n-dur) var(--n-out); }
.tkc .tkc-dur {
  position: absolute; right: 10px; bottom: 10px; padding: 2px 6px; border-radius: var(--n-r-xs); background: var(--n-scrim);
  color: var(--n-text-hi); font: 700 var(--n-fs-kicker)/1.3 var(--n-font-display);
}
.tkc .tkc-redo {
  position: absolute; left: 10px; bottom: 10px; min-height: 32px; padding: 0 12px; border: 0; border-radius: var(--n-r-pill); cursor: pointer;
  background: var(--n-scrim); color: var(--n-text-hi); font: 600 var(--n-fs-meta)/1 var(--n-font-body);
}
.tkc .tkc-file { display: none; }
.tkc .tkc-lick { display: grid; gap: var(--n-2); }
.tkc .tkc-lickchip {
  display: flex; align-items: center; gap: var(--n-2); width: 100%; min-height: 44px; padding: 0 12px; border-radius: var(--n-r-sm); border: 0;
  background: var(--n-card-2); color: var(--n-text); font-size: 14px; text-align: left; cursor: pointer;
}
.tkc .tkc-lickchip:disabled { cursor: default; }
.tkc .tkc-lickchip .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tkc .tkc-lickchip .n-icon { color: var(--n-text-2); }
.tkc .tkc-lickchip .tkc-fire { color: var(--n-red); }
.tkc .tkc-licklist {
  display: grid; gap: 2px; max-height: 220px; overflow-y: auto; padding: 6px; border-radius: var(--n-r-sm);
  background: var(--n-card-2); border: 1px solid var(--n-line);
}
.tkc .tkc-licklist button {
  display: grid; gap: 1px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--n-text);
  font-size: 14px; text-align: left; cursor: pointer;
}
.tkc .tkc-licklist button small { font: 700 var(--n-fs-kicker)/1.3 var(--n-font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--n-text-2); }
.tkc .tkc-licklist button.on { background: var(--n-red-wash); }
.tkc .tkc-note { font-size: var(--n-fs-meta); color: var(--n-text-2); }
.tkc .tkc-note button { padding: 0; border: 0; background: none; color: var(--n-pink); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.tkc .tkc-caption { width: 100%; resize: none; }
.tkc .tkc-fine { display: flex; gap: 6px; align-items: flex-start; font-size: var(--n-fs-meta); color: var(--n-text-2); }
.tkc .tkc-fine .n-icon { margin-top: 1px; }

/* ---- VideoPlayer (.vp): lessons and the Daily Licks hero ---------------------------------------- */
/* Global, not under .dl-wrap: LessonDetails and Admin use the same player. The box is 16:9 unless the
   page reshapes it (Daily Licks: .dl-player, 9:16). */
.vp-wrap { display: grid; gap: var(--n-3); min-width: 0; }
.vp { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--n-r-md); overflow: hidden; box-shadow: var(--n-shadow-card); }
.vp__video { display: block; width: 100%; height: 100%; object-fit: contain; }
.vp__error, .ncc-video-error-overlay {
  position: absolute; inset: 0; z-index: 6; display: grid; place-content: center; justify-items: center; gap: var(--n-3);
  padding: var(--n-5); background: var(--n-scrim); color: var(--n-text); text-align: center; font-size: var(--n-fs-small);
}
.vp__error p, .ncc-video-error-overlay p { margin: 0; }
.vp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--n-2); }
.vp-speeds { display: inline-flex; gap: 6px; }
.vp-loop { margin-left: auto; font-variant-numeric: tabular-nums; }
.dl-wrap .dl-player-col .vp-tools { justify-content: center; }
.dl-wrap .dl-player-col .vp-loop { margin-left: 0; }

/* ---- PDF pages (GuitarSuperSystem.PdfViewer in main.js) ----------------------------------------- */
/* Drawn at the device pixel ratio, shown at the container's width. */
.ncc-pdf-page { display: block; width: 100%; height: auto; margin: 0 auto 8px; border-radius: var(--n-r-xs); }
.ncc-pdf-fallback { display: grid; place-items: center; min-height: 160px; padding: var(--n-5); color: var(--n-text-2); text-align: center; font-size: var(--n-fs-small); }
.ncc-pdf-fallback a { color: var(--n-pink); text-decoration: underline; }

/* ---- TabPlayer (.tabp): Guitar Pro tab with its own synth (Daily Licks and lessons) -------------- */
/* Global: LessonDetails uses it too. Buttons are .n-btn / .n-icon-btn / .n-chip driven by tabplayer.js. */
.tabp { margin-top: var(--n-3); }
.tabp-bar { display: flex; align-items: center; gap: var(--n-2); flex-wrap: wrap; margin-bottom: var(--n-3); }
.tabp-play { min-width: 128px; }
.tabp-speeds { display: inline-flex; gap: 6px; margin-left: auto; }
.tabp-speed { font-variant-numeric: tabular-nums; }
.tabp-status {
  margin-bottom: var(--n-2); color: var(--n-text-3);
  font: 600 var(--n-fs-kicker)/1.4 var(--n-font-display); letter-spacing: var(--n-ls-kicker); text-transform: uppercase;
}
.tabp-status:empty { display: none; }
.tabp-stagebox { position: relative; }
.tabp-stage {
  position: relative; max-height: 420px; min-height: 160px; overflow: hidden auto; contain: paint;
  background: var(--n-sunken); border-radius: var(--n-r-sm); padding: 10px;
}
.tabp-stage .at-cursor-bar { background: transparent !important; }
.tabp-stage .at-cursor-beat { background: var(--n-red) !important; border-radius: 3px; }
/* Stands in for the tab until alphaTab has drawn (or given up). */
.tabp-skel { position: absolute; inset: 0; display: grid; align-content: center; gap: var(--n-3); padding: var(--n-5); pointer-events: none; }
.tabp.is-drawn .tabp-skel { display: none; }
.tabp-hint { margin-top: var(--n-2); color: var(--n-text-3); font-size: var(--n-fs-meta); }