/* Phones: folded sections and the bottom drawer they open in (/mobile.js). Nothing here applies above 720px. */
.mopen { display: none; }
.mob { display: none; }
@media (max-width: 720px) {
  .dsk { display: none; } .mob { display: inline; }
  .m-folded { display: none !important; }
  .mopen { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin: 18px 0 4px; padding: 13px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--char-2); color: var(--fg); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
  .mopen i { font-style: normal; font-size: 22px; line-height: 1; color: var(--teal); }
  .mopen:active { background: #222733; }
  section.s { padding-top: 40px !important; padding-bottom: 28px !important; }
  section.s .intro { margin-bottom: 0; }
  html.msheet-open { overflow: hidden; }
  /* the dimmed page behind the drawer */
  .mdim { position: fixed; inset: 0; z-index: 59; background: rgba(4, 6, 10, .55); opacity: 0; transition: opacity .25s ease; pointer-events: none; }
  .mdim.on { opacity: 1; pointer-events: auto; }
  /* the drawer: slides up from the bottom, covers most of the screen, rounded top, a drag handle */
  .msheet { position: fixed; left: 0; right: 0; bottom: 0; height: 92vh; height: 92dvh; z-index: 60; display: flex; flex-direction: column; background: var(--black); border-radius: 18px 18px 0 0; box-shadow: 0 -18px 50px rgba(0,0,0,.6); transform: translateY(100%); transition: transform .3s cubic-bezier(.2,.8,.2,1); will-change: transform; }
  .msheet.open { transform: translateY(0); }
  .msheet[hidden] { display: none; }
  .msheet-grip { height: 22px; display: grid; place-items: center; touch-action: none; }
  .msheet-grip::before { content: ""; width: 44px; height: 5px; border-radius: 3px; background: var(--muted); opacity: .6; }
  .msheet-bar { display: flex; align-items: center; gap: 10px; padding: 0 12px 10px; border-bottom: 1px solid var(--line); touch-action: none; }
  .msheet-bar b { flex: 1; font-family: Sora, sans-serif; font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .msheet-bar button { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--fg); font-size: 20px; line-height: 1; cursor: pointer; }
  .msheet-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 18px 16px 24px; }
  .msheet-body > * { max-width: 100%; }
  .msheet-body > :first-child, .msheet-body > :first-child > :first-child { margin-top: 0 !important; padding-top: 0 !important; }
  .msheet-body .rv { opacity: 1; transform: none; transition: none; }
  .msheet-foot { padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--char); }
  .msheet-foot button { width: 100%; padding: 12px; border-radius: 999px; border: none; font: inherit; font-weight: 600; font-size: 15px; color: #06131a; background: linear-gradient(90deg, var(--teal), var(--blue)); cursor: pointer; }
  @media (prefers-reduced-motion: reduce) { .msheet, .mdim { transition: none; } }
}