/* Mobile-only standardised course-reader skin.
   Restyles the existing .lv lesson view on the new course readers
   (the-long-middle, married-to-the-wall, the-art-of-repair,
   the-marriage-that-works, we-became-roommates, desire-in-a-long-marriage)
   to visually match the shame-course ("The Invisible Weight") reader on
   viewports <=700px. Desktop is untouched. */

@media (max-width:700px){
  :root{
    --cm-accent:#6B8F71;
    --cm-accent-lt:#e8eee9;
    --cm-ink:#1C1610;
    --cm-muted:#4A3A24;
    --cm-soft:#7A6645;
    --cm-border:rgba(100,82,55,.18);
    --cm-cream-mid:#E8E0D4;
    --cm-serif:'Cormorant Garamond',Georgia,serif;
    --cm-sans:'Jost','Helvetica Neue',Arial,sans-serif;
  }

  /* mobile top bar — calmer, like shame-course nav baseline */
  .mob-bar{
    background:#F0EAE0 !important;
    border-bottom:.5px solid var(--cm-border) !important;
    padding:14px 20px !important;
  }
  .mob-t{font-family:var(--cm-serif) !important;font-size:15px !important;color:var(--cm-ink) !important}
  .mob-l{font-size:10px !important;letter-spacing:.18em !important;text-transform:uppercase;color:var(--cm-soft) !important}
  .mob-btn{
    border:.5px solid rgba(100,82,55,.35) !important;
    color:var(--cm-ink) !important;
    padding:8px 16px !important;
    border-radius:100px !important;
    font-size:10px !important;
    letter-spacing:.12em !important;
    text-transform:uppercase;
    font-family:var(--cm-sans) !important;
  }

  /* lesson view container */
  .lv{
    max-width:none !important;
    margin:0 !important;
    padding:40px 24px 100px !important;
  }

  /* eyebrow / module label */
  .lv-mod{
    font-family:var(--cm-sans) !important;
    font-size:10px !important;
    letter-spacing:.2em !important;
    text-transform:uppercase !important;
    color:var(--cm-accent) !important;
    margin-bottom:10px !important;
    font-weight:400 !important;
    font-style:normal !important;
    display:block !important;
    opacity:1 !important;
  }

  /* lesson number — soft italic counter */
  .lv-num{
    font-family:var(--cm-serif) !important;
    font-style:italic !important;
    font-size:13px !important;
    color:var(--cm-soft) !important;
    margin-bottom:6px !important;
    display:block !important;
  }

  /* title — large serif w/ italic possible */
  .lv-title{
    font-family:var(--cm-serif) !important;
    font-size:30px !important;
    font-weight:300 !important;
    color:var(--cm-ink) !important;
    line-height:1.08 !important;
    margin-bottom:18px !important;
    letter-spacing:-.005em !important;
  }
  .lv-title em{color:var(--cm-accent) !important;font-style:italic !important}

  /* divider after title block */
  .lv-title::after{
    content:"";
    display:block;
    height:.5px;
    background:var(--cm-border);
    margin:24px 0 0;
  }

  /* body copy — match ld-body */
  .lv-body{
    font-family:var(--cm-serif) !important;
    font-size:17px !important;
    font-weight:300 !important;
    color:var(--cm-muted) !important;
    line-height:1.8 !important;
    margin-bottom:28px !important;
    padding-bottom:0 !important;
    border-bottom:none !important;
  }
  .lv-body p,.blk-body p{margin:0 0 18px !important}

  /* in-body emphasis like shame quotes — any blockquote/em styling */
  .lv-body em{font-style:italic;color:var(--cm-ink)}

  /* reflection block — accent-lt with accent left border */
  .lv-refl{
    background:var(--cm-accent-lt) !important;
    border:none !important;
    border-left:3px solid var(--cm-accent) !important;
    border-radius:0 6px 6px 0 !important;
    padding:22px 24px !important;
    margin:28px 0 !important;
  }
  .lv-refl .blk-lbl,
  .lv-prac .blk-lbl{
    font-family:var(--cm-sans) !important;
    font-size:9px !important;
    letter-spacing:.2em !important;
    text-transform:uppercase !important;
    color:var(--cm-accent) !important;
    margin-bottom:10px !important;
    display:block !important;
    font-weight:400 !important;
  }
  .lv-refl .blk-body,
  .lv-prac .blk-body{
    font-family:var(--cm-serif) !important;
    font-size:15px !important;
    color:var(--cm-muted) !important;
    line-height:1.75 !important;
  }

  /* practice block — outlined card */
  .lv-prac{
    border:.5px solid var(--cm-border) !important;
    border-left:3px solid var(--cm-accent) !important;
    border-radius:0 6px 6px 0 !important;
    padding:22px 24px !important;
    margin:28px 0 36px !important;
    background:transparent !important;
  }

  /* journal textarea — softer */
  .j-lbl{
    color:var(--cm-accent) !important;
    font-family:var(--cm-sans) !important;
    font-size:9px !important;
    letter-spacing:.2em !important;
  }
  .j-box{
    background:rgba(255,255,255,.55) !important;
    border:.5px solid var(--cm-border) !important;
    border-radius:6px !important;
    font-family:var(--cm-serif) !important;
    font-size:15px !important;
    color:var(--cm-ink) !important;
    line-height:1.75 !important;
  }
  .j-box:focus{border-color:var(--cm-accent) !important;background:#fff !important}
  .j-save{
    font-family:var(--cm-sans) !important;
    font-size:10px !important;
    letter-spacing:.12em !important;
    color:var(--cm-soft) !important;
  }

  /* lesson nav — pill buttons, shame-course style */
  .lv-nav{
    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
    gap:10px !important;
    padding:24px 0 0 !important;
    margin-top:40px !important;
    border-top:.5px solid var(--cm-border) !important;
    flex-wrap:wrap !important;
  }
  .lv-nav .wnav-btn{
    background:none !important;
    border:.5px solid var(--cm-border) !important;
    color:var(--cm-muted) !important;
    border-radius:100px !important;
    padding:11px 20px !important;
    font-family:var(--cm-sans) !important;
    font-size:10.5px !important;
    letter-spacing:.12em !important;
    text-transform:uppercase !important;
    cursor:pointer;
  }
  .lv-nav .wnav-btn:hover{
    color:var(--cm-ink) !important;
    border-color:var(--cm-accent) !important;
    background:none !important;
  }
  .lv-nav .done-btn{
    background:var(--cm-accent) !important;
    color:#fff !important;
    border:.5px solid var(--cm-accent) !important;
    border-radius:100px !important;
    padding:11px 20px !important;
    font-family:var(--cm-sans) !important;
    font-size:10.5px !important;
    letter-spacing:.12em !important;
    text-transform:uppercase !important;
    margin-left:auto !important;
  }
  .lv-nav .done-btn.marked{
    background:var(--cm-cream-mid) !important;
    color:var(--cm-soft) !important;
    border-color:var(--cm-border) !important;
  }

  /* overlay (course contents) — match shame-course module list aesthetic */
  .overlay{padding:24px !important;background:#F0EAE0 !important}
  .ov-close{
    border:.5px solid var(--cm-border) !important;
    color:var(--cm-ink) !important;
    border-radius:100px !important;
    font-family:var(--cm-sans) !important;
    font-size:10px !important;
    letter-spacing:.12em !important;
    text-transform:uppercase;
    padding:9px 16px !important;
  }
  .overlay .mod-lbl{
    font-family:var(--cm-sans) !important;
    font-size:10px !important;
    letter-spacing:.2em !important;
    color:var(--cm-accent) !important;
    padding:18px 4px 8px !important;
    border-top:.5px solid var(--cm-border);
    margin-top:8px;
  }
  .overlay .mod-lbl:first-of-type{border-top:none;margin-top:0}
  .overlay .wb{
    padding:12px 6px !important;
    border-radius:6px !important;
    align-items:center !important;
    gap:14px !important;
  }
  .overlay .wb.active{
    background:#fff !important;
    border-left:none !important;
    padding-left:6px !important;
  }
  .overlay .wnum{
    font-family:var(--cm-serif) !important;
    font-style:italic !important;
    font-size:13px !important;
    color:var(--cm-soft) !important;
    min-width:24px !important;
  }
  .overlay .wdot{display:none !important}
  .overlay .wt{
    font-family:var(--cm-serif) !important;
    font-style:normal !important;
    font-size:16px !important;
    color:var(--cm-ink) !important;
    line-height:1.45 !important;
  }
  .overlay .wb.done .wt{color:var(--cm-soft) !important;opacity:.55 !important}
}