/* commentary.css — the "Break this down" verse-commentary sheet.
   Shared across struggle pages. Bottom sheet on mobile, centered card on desktop.
   Uses the same design tokens as declare.css (var(--text), --accent, --line, etc.)
   and mirrors the app's existing sheet motion. Reduced-motion safe. */

/* the trigger button under each verse reflection */
.vcomm-btn{
  display:inline-flex; align-items:center; gap:9px; margin-top:18px;
  padding:9px 17px; border-radius:999px;
  border:1px solid var(--line2); background:transparent; color:var(--goldd);
  font-family:'DM Sans',sans-serif; font-size:13px; font-weight:600; letter-spacing:.01em; cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .16s ease;
}
.vcomm-btn::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent); }
.vcomm-btn:hover{ color:var(--text); border-color:var(--accent); transform:translateY(-1px); }
.vcomm-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* the commentary source blocks live in the DOM (crawlable) but are not shown inline */
.vcomm-src{ display:none; }

/* scrim */
.cmt-scrim{
  position:fixed; inset:0; z-index:210; background:rgba(8,14,11,.62);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity .4s ease;
}
html[data-theme="light"] .cmt-scrim{ background:rgba(40,32,14,.34); }
.cmt-scrim.open{ opacity:1; pointer-events:auto; }

/* sheet — mobile bottom sheet by default */
.cmt-sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:211;
  max-height:88vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:14px clamp(22px,6vw,34px) clamp(30px,7vw,42px);
  background:var(--bgfield); color:var(--text);
  border:1px solid var(--line); border-radius:26px 26px 0 0;
  box-shadow:0 -30px 80px -30px rgba(0,0,0,.7);
  visibility:hidden; transform:translateY(102%);
  transition:transform .5s cubic-bezier(.16,1,.3,1), visibility .5s;
}
.cmt-sheet.open{ visibility:visible; transform:none; }

/* desktop — centered card */
@media (min-width:760px){
  .cmt-sheet{
    left:50%; right:auto; bottom:auto; top:50%;
    width:min(620px,92vw); max-height:84vh;
    border-radius:24px; padding:36px clamp(34px,3vw,44px) 40px;
    transform:translate(-50%,-46%) scale(.985); opacity:0;
    transition:transform .5s cubic-bezier(.16,1,.3,1), opacity .4s ease, visibility .5s;
  }
  .cmt-sheet.open{ transform:translate(-50%,-50%) scale(1); opacity:1; }
}

.cmt-grab{ width:44px; height:5px; border-radius:999px; background:var(--line2); margin:0 auto 16px; }
@media (min-width:760px){ .cmt-grab{ display:none; } }

.cmt-close{
  position:absolute; top:16px; right:16px; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line2); background:var(--field); color:var(--text); cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:transform .16s ease;
}
.cmt-close:hover{ transform:translateY(-1px); }
.cmt-close svg{ width:16px; height:16px; }

.cmt-kicker{ font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--goldd); font-weight:600; }
.cmt-ref{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--goldd); font-weight:600; margin-top:15px; }
.cmt-title{ font-family:'Cormorant Garamond',serif; font-size:clamp(24px,3.4vw,33px); font-weight:600; line-height:1.14; color:var(--text); margin:8px 0 0; text-wrap:balance; }
.cmt-body{ margin-top:20px; }
.cmt-body p{ font-size:clamp(15px,1.5vw,16.5px); line-height:1.76; color:var(--text2); margin:0 0 15px; }
.cmt-body p:last-child{ margin-bottom:0; }

.cmt-read{
  display:inline-flex; align-items:center; gap:9px; margin-top:26px; padding:12px 22px; border-radius:999px;
  background:linear-gradient(135deg, var(--accent) 0%, var(--gold) 92%); color:#1c2a22;
  font-family:'DM Sans',sans-serif; font-size:14px; font-weight:600;
  box-shadow:0 12px 26px -12px var(--accent-soft); transition:transform .16s ease, filter .2s ease;
}
.cmt-read:hover{ transform:translateY(-1px); filter:brightness(1.05); }
.cmt-read svg{ width:15px; height:15px; }

@media (prefers-reduced-motion: reduce){
  .cmt-scrim{ transition:opacity .2s linear; }
  .cmt-sheet{ transition:visibility .2s, opacity .2s linear; transform:none !important; }
  @media (min-width:760px){ .cmt-sheet{ transform:translate(-50%,-50%) !important; } }
}