/* ─────────────────────────────────────────────────────────────────────────────
   SOUL CARD (layout, typography, reader, actions)
   This stylesheet controls ONLY the Soul card UI.

   Highlights
   • Titlebar is forced visible (in case another stylesheet hides it)
   • Excerpt + Reader sit on a WHITE background for legibility
   • Actions are split into TWO rows:
        Row 1:  [ More ▾ ]
        Row 2:  [ I'm Inspired ]                      [ Read more ]
   • Buttons use your theme accent via --soul-accent (easy to recolor)
   • Button labels are LEFT-aligned; the chevron sits on the FAR RIGHT
   ───────────────────────────────────────────────────────────────────────────── */


/* ═════════ THEME HOOKS (edit these to recolor/retint) ═════════
   - Global default uses your brand accent via --chip-text-score.
   - You can override per-card below with: .card.soul { --soul-accent: #A655F7; }
*/
:root {
  --soul-accent: var(--chip-text-score, #7c3aed); /* primary button color */
  --soul-reader-bg: #ffffff;                      /* white content background */
  --soul-border-soft: rgba(0,0,0,0.06);           /* subtle inner border */
}


/* ═════════ CARD CHROME / TITLEBAR ═════════
   Ensure the Soul card titlebar is visible and spaced like other cards.
*/
/* .card.soul > .titlebar {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  height: auto !important;
  margin: 0 0 8px 0 !important;
  
}
 */
 
/* ═════════ TOP ROW (green ✓ pill + label) ═════════ */
.soul-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 8px 0;
}
/* Slightly smaller label per design feedback */
#soulCard .soul-row #soulLabel { font-size: 0.92rem; }

.card.soul .soul-subhead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:2px 0 12px;
}

.card.soul .soul-subhead .soul-audio-header{
  margin-bottom:0;
  flex:1 1 auto;
}

.card.soul .soul-share-btn{
  width:26px;
  height:26px;
  min-width:26px;
  min-height:26px;
  aspect-ratio:1 / 1;
  padding:0;
  border-radius:999px;
  box-sizing:border-box;
  appearance:none;
  -webkit-appearance:none;
  border:1px solid rgba(129, 90, 181, .34);
  background:linear-gradient(180deg, rgba(244, 234, 255, .92) 0%, rgba(210, 186, 242, .88) 100%);
  color:#7c3aed;
  font-size:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 5px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.6);
  cursor:pointer;
  flex:0 0 auto;
  margin-right:3px;
}

.card.soul .soul-share-btn::before{
  content:"";
  display:block;
  width:14px;
  height:14px;
  transform:translateX(-1px);
  background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cline x1='8.2' y1='11.2' x2='15.8' y2='6.7' stroke='%237c3aed' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='8.2' y1='12.8' x2='15.8' y2='17.3' stroke='%237c3aed' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='6' cy='12' r='3.1' fill='%237c3aed'/%3E%3Ccircle cx='18' cy='5' r='3.1' fill='%237c3aed'/%3E%3Ccircle cx='18' cy='19' r='3.1' fill='%237c3aed'/%3E%3C/svg%3E");
}

.card.soul .soul-share-btn:hover{
  border-color:rgba(109, 69, 169, .42);
  background:linear-gradient(180deg, rgba(248, 240, 255, .98) 0%, rgba(220, 198, 247, .92) 100%);
}

.card.soul .soul-share-btn:focus-visible{
  outline:2px solid rgba(147, 51, 234, .42);
  outline-offset:2px;
}

.card.soul .soul-share-btn:active{
  transform:translateY(1px);
}

.card.soul .soul-share-btn:disabled,
.card.soul .soul-share-btn[aria-disabled="true"]{
  opacity:.48;
  cursor:default;
  transform:none;
  filter:saturate(.7);
}


/* ═════════ RENDER TARGET (soul.js writes into this container) ═════════ */
.soul-text-container {
  display: block; /* keep simple; no forced margins/gutters */
}


/* ═════════ INNER CARD LAYOUT (optional thumbnail + copy) ═════════ */
.soul-card { display: flex; gap: 12px; align-items: flex-start; }
.soul-img  { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; flex: 0 0 auto; }
.soul-copy { flex: 1 1 auto; }

.soul-title { font-weight: 800; line-height: 1.2; }
.soul-meta  { margin-top: .25rem; font-size: .9rem; opacity: .75; }


/* ═════════ EXCERPT + READER (both on white for legibility) ═════════ */
.soul-excerpt,
.soul-reader {
  background: var(--soul-reader-bg);
  color: inherit;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 0 0 1px var(--soul-border-soft) inset;
}

.soul-excerpt { margin-top: 8px; line-height: 1.5; }

.soul-reader {
  margin-top: 8px;
  max-height: 60vh;               /* comfortable read height on mobile */
  overflow: auto;
  line-height: 1.6;
  overscroll-behavior: contain;   /* prevents page rubber-banding while scrolling */
}
/* Poetry keeps line breaks; prose uses <p> that soul.js emits */
.soul-reader.poem            { white-space: pre-line; }
.soul-reader.prose p         { margin: 0 0 10px 0; }
.soul-reader.prose p.spacer  { height: 10px; }  /* visual gap for blank lines */


/* ═════════ ACTIONS (two rows) ═════════
   .soul-actions.top    → Row 1 with [ More ▾ ]
   .soul-actions.bottom → Row 2 with [ I'm Inspired ] … [ Read more ]
*/
.soul-actions {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.soul-actions.top    { justify-content: flex-start; }
.soul-actions.bottom { justify-content: flex-start; }
.soul-actions .spacer { flex: 1 1 auto; } /* pushes "Read more" to the far right */


/* ═════════ ACCENT BUTTONS (More / I'm Inspired / Read more) ═════════
   - Left-aligned labels
   - Chevron (if present) floats to the far right
   - Use --soul-accent for background color (see overrides below)
*/
/* Accent buttons (More / I'm Inspired / Read more) */
.btn.soul-btn {
  background: var(--soul-accent);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: var(--soul-btn-weight, 500);  /* play here */
  font-size:  var(--soul-btn-size, 0.90rem); /* and here */
  cursor: pointer;

  /* left-aligned labels; chevron (if present) pushes to far right */
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
  text-align: left;
  min-width: 132px;

  /* soft elevation */
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.20) inset;
  transition:
    box-shadow 0.18s ease,
    transform 0.12s ease,
    filter 0.15s ease;
}

/* Ensure Soul buttons win over any global .btn rules */
.card.soul .btn.soul-btn { background: var(--soul-accent) !important; color: #fff; }

/* Hover/active effects */
.btn.soul-btn:hover {
  filter: brightness(0.98);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.25) inset;
  transform: translateY(-1px);
}
.btn.soul-btn:active {
  transform: translateY(0); /* settles back down when pressed */
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.16) inset;
}
.btn.soul-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--soul-accent), #ffffff 35%);
  outline-offset: 2px;
}
.btn.soul-btn:disabled { opacity: .6; cursor: default; }

/* Chevron alignment (no change) */
.btn.soul-btn.has-chev .chev { margin-left: auto; line-height: 1; }


/* If a global .btn rule fights the color, this wins for Soul buttons */
.card.soul .btn.soul-btn { background: var(--soul-accent) !important; color: #fff; }

.btn.soul-btn:hover        { filter: brightness(0.97); }
.btn.soul-btn:active       { transform: translateY(1px); }
.btn.soul-btn:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--soul-accent), #ffffff 35%);
  outline-offset: 2px;
}
.btn.soul-btn:disabled     { opacity: .6; cursor: default; }

/* Chevron sits at the far right when the button has .has-chev */
.btn.soul-btn.has-chev .chev { margin-left: auto; line-height: 1; }

/* Ensure all three buttons share the same footprint */
#soulMoreBtn,
#soulInspireBtn,
#soulReadBtn { min-width: 132px; text-align: left; }


/* ───────── OPTIONAL DEBUG (outline the titlebar area) ───────── */
/* .card.soul > .titlebar { outline: 2px dashed red; } */


/* ═════════ PER-CARD COLOR OVERRIDE (quick way to match your purple underline) ═════════
   - Set the exact purple you use for the line under the title here.
   - Remove/adjust if you prefer to control this via the global brand variable.
*/

/* Soul button colors */
.card.soul {
  --soul-accent: #c2afe4;   /* background (your purple) */
  --soul-btn-fg: #000000;   /* TEXT color for the buttons */
}

.card.soul .btn.soul-btn {
  background: var(--soul-accent) !important;
  color: var(--soul-btn-fg) !important;
}

/* (Optional) ensure the chevron matches the label color */
.card.soul .btn.soul-btn .chev { color: inherit; }



/**********************************************
 * SOUL AUDIO — Horizontal Tiles + Bar Player
 **********************************************/

.card.soul .soul-audio{
  position: relative;
}

.card.soul .soul-audio-rail{
  position: relative;
}

/* HEADER */
.card.soul .soul-audio-header {
  font-size: 14px;         /* match body card subtitle */
  font-weight: 400;
  color: var(--muted);
  margin-bottom: 12px;
  padding-left: 1px;
}

/* HORIZONTAL SCROLL TRACK */
.card.soul .soul-audio-track {
  display: flex;
  overflow-x: auto;
  gap: 14px;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
}

.card.soul .soul-audio-track::-webkit-scrollbar {
  display: none;
}

.card.soul .soul-nav{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:32px;
  height:32px;
  border: none;
  border-radius:50%;
  background: rgba(0,0,0,0.08);
  box-shadow: 0 6px 14px rgba(0,0,0,0.16);
  display:none;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
  color:#ffffff;
  backdrop-filter: blur(4px);
  transition: background 0.15s ease, transform 0.12s ease;
}
.card.soul .soul-nav.is-visible{ display:flex; }
.card.soul .soul-nav.is-disabled{ opacity: .35; pointer-events: none; }
.card.soul .soul-nav:hover{ background: rgba(0,0,0,0.14); }
.card.soul .soul-nav:active{ transform: translateY(-50%) scale(0.96); }
.card.soul .soul-nav-left{ left:4px; }
.card.soul .soul-nav-right{ right:4px; }
.card.soul .soul-nav::before{
  content:"";
  width:0; height:0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.card.soul .soul-nav-left::before{
  border-right: 9px solid rgba(255,255,255,0.9);
  margin-left: 2px;
}
.card.soul .soul-nav-right::before{
  border-left: 9px solid rgba(255,255,255,0.9);
  margin-right: 2px;
}

/* TILE BUTTON */
.card.soul .soul-tile {
  position: relative;
  width: 200px;
  height: 200px;
  flex: 0 0 auto;
  border-radius: 14px;
  overflow: hidden;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  scroll-snap-align: start;
  box-shadow: 0 4px 8px rgba(0,0,0,0.12);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* TILE IMAGE */
.card.soul .soul-tile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* LABEL – bottom-left */
.card.soul .soul-tile-label {
  position: absolute;
  bottom: 10px;
  left: 10px;
  color: white;
  font-weight: 700;
  font-size: 0.95rem;
  text-shadow: 0 1px 4px rgba(0,0,0,0.45);
}

.card.soul .soul-tile.is-playing-eq::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:3px;
  height:12px;
  background:#fff;
  border-radius:2px;
  box-shadow:
    6px 0 0 #fff,
    12px 0 0 #fff;
  transform: translate(-50%,-50%) scaleY(0.8);
  transform-origin: center bottom;
  animation: soulEqPulse 0.9s infinite ease-in-out;
}

@keyframes soulEqPulse {
  0%   { transform: translate(-50%,-50%) scaleY(0.6); box-shadow:6px 0 0 #fff, 12px 0 0 #fff; }
  30%  { transform: translate(-50%,-50%) scaleY(1);   box-shadow:6px 0 0 #fff, 12px 0 0 #fff; }
  60%  { transform: translate(-50%,-50%) scaleY(0.5); box-shadow:6px 0 0 #fff, 12px 0 0 #fff; }
  100% { transform: translate(-50%,-50%) scaleY(0.8); box-shadow:6px 0 0 #fff, 12px 0 0 #fff; }
}

/* PLAYER CONTAINER */
.card.soul .soul-player-container {
  display: none;
  margin-top: 0;
  min-height: 0;
}
.card.soul .soul-player-container.is-active{
  display: block;
  margin-top: 16px;
  min-height: 50px;
}

/* PLAYER BAR */
.card.soul .soul-player-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f8f4ff;
  padding: 12px 16px;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.10);
  animation: fadeSlideIn 0.25s ease;
}

/* BUTTON */
.card.soul .soul-play-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: #8670c8; /* darker lavender */
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  display:grid;
  place-items:center;
  padding:0;
  position: relative;
}
.card.soul .soul-play-btn::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
}
.card.soul .soul-play-btn span{
  display:block;
  transform: translateX(3px); /* nudge right */
  color:#fff;
}

.card.soul .soul-play-btn.playing {
  background: #9a7fd1;
}

/* TIME COUNTER */
.card.soul .soul-track-time {
  color: rgba(0,0,0,0.55);
  font-size: 0.85rem;
}

/* ANIMATION */
@keyframes fadeSlideIn {
  0% { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* DIVIDER */
.card.soul .soul-divider {
  border: none;
  height: 1px;
  background: var(--hdr-soul);
  margin: 20px 0 14px;
  border-radius: 1px;
}

/**********************************************
 * SOUL — Premium Player Card (Option A)
 **********************************************/

.card.soul .soul-player-card {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;

  background: linear-gradient(180deg, #f2eaff 0%, #ece0ff 100%);
  border: 1px solid #c2afe4; /* subtle lavender outline around the player */
  border-radius: 16px;
  padding: 16px;
  margin-top: 18px;

  box-shadow:
    0 8px 20px rgba(0,0,0,0.14),
    0 2px 4px rgba(0,0,0,0.08),
    0 1px 1px rgba(255,255,255,0.6) inset;

  animation: soulFadeCard 0.28s ease;
}

.card.soul .soul-loop-btn{
  margin-left: auto;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: none;
  background: #9f8ad9; /* match play/pause */
  color: #fff;
  font-weight: 800;
  font-size: 1.4rem; /* larger glyph */
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  transition: background 0.15s ease, transform 0.12s ease;
}
.card.soul .soul-loop-btn.is-on{
  background: #7b62bd; /* darker lavender */
  color: #fff;
  border: 2px solid #4c3b88;
  box-shadow:
    0 4px 10px rgba(0,0,0,0.18),
    0 0 0 2px rgba(123,98,189,0.35);
}
.card.soul .soul-loop-btn:hover{ background: #8d79cd; }
.card.soul .soul-loop-btn:active{ transform: scale(0.96); }
.card.soul .soul-loop-btn::before{
  content:"⟳";
  display:block;
  transform: translate(1px, -3px); /* nudge up/right visually */
}

@keyframes soulFadeCard {
  0% { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0); }
}

/*** PLAY/PAUSE BUTTON ***/
.card.soul .soul-play-btn {
  width: 56px;
  height: 56px;

  border-radius: 50%;
  border: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;

  background: #9f8ad9; /* lighter lavender */
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  display: grid;
  place-items: center;

  box-shadow:
    0 3px 6px rgba(0,0,0,0.10),
    0 1px 0 rgba(255,255,255,0.55) inset;

  transition: background 0.2s ease, transform 0.15s ease;
}

.card.soul .soul-play-btn.playing {
  background: #8b78cf;
  transform: scale(0.96);
}

.card.soul .soul-play-btn span{
}
.card.soul .soul-play-btn .icon-play{
  display:block;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid #fff;
  transform: translateX(3px); /* play nudge right */
}
.card.soul .soul-play-btn .icon-pause{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;                  /* separation between bars */
  transform: translate(0px, -1px); /* nudge up */
  color: #fff;
  font-size: 0;              /* hide text glyph */
  width: auto;
}
.card.soul .soul-play-btn .icon-pause::before,
.card.soul .soul-play-btn .icon-pause::after{
  content:"";
  width: 3px;
  height: 14px;
  border-radius: 1.2px;
  background: currentColor;
}

/*** META AREA (time + progress) ***/
.card.soul .soul-player-meta {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.card.soul .soul-track-time {
  font-size: 0.92rem;
  color: rgba(0,0,0,0.65);
  margin-bottom: 8px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 8px;
}
.card.soul .soul-track-duration{
  color: rgba(0,0,0,0.45);
  font-size: 0.88rem;
}

/*** PROGRESS BAR ***/
.card.soul .soul-progress-wrap {
  width: 100%;
  height: 6px;
  background: rgba(0,0,0,0.08);
  border-radius: 4px;
  overflow: hidden;
}

.card.soul .soul-progress-bar {
  height: 100%;
  width: 0;
  background: #b79be4; /* matches playing color */
  transition: width 0.1s linear;
}