/* The member's screens — the path, a lesson, the signed screen — as both the editor's
   "View as a student" and the member's own /library draw them (member-view.js).
   Everything is under .mv so neither page's own styles leak in or out. The one
   exception is the up-hint, which the library pins to the window. */

.mv-screen :is(p,h1,h2,h3,blockquote,figure),.mv .appbar p{margin:0}
.mv-screen{display:flex;flex-direction:column;gap:16px}

/* ---- the bar: belt and place in the level ---- */
/* Bone and the rule run the full width of the screen, so the scenery never shows beside it. */
.mv .appbar{position:sticky;top:0;z-index:5;background:var(--bone);
  box-shadow:0 0 0 100vmax var(--bone),0 1px 0 100vmax var(--rule);clip-path:inset(0 -100vmax -1px);
  display:flex;align-items:center;gap:10px;padding:9px 12px;min-height:60px}
.mv .beltbadge{display:flex;align-items:center;gap:9px;padding:5px 8px;border-radius:6px;
  border:2px solid var(--bone-dim);background:#fff;min-height:48px;flex:0 1 auto;min-width:0;font:inherit;color:inherit}
/* ^ shrinks and wraps when the phone's text is set large, so Menu stays on screen. */
.mv button.beltbadge{cursor:pointer}
.mv .beltbadge .mini{width:52px;flex:0 0 auto}
.mv .beltbadge .txt{display:flex;flex-direction:column;line-height:1.2;text-align:left}
.mv .beltbadge .rk,.mv .beltbadge .xp{font-family:var(--util);font-weight:700;font-size:.9375rem}
.mv .beltbadge .xp{color:var(--aizome);font-variant-numeric:tabular-nums}
.mv .appbar .pos{margin-left:auto;text-align:right;font-family:var(--util);font-size:.9375rem;
  font-weight:700;color:var(--stone);line-height:1.25}
.mv .appbar .pos span{display:block;font-weight:400}
.mv .beltbadge .place{font-family:var(--util);font-size:.8125rem;color:var(--stone)}

/* On the path there is no band and no title: the painting runs to the top edge and the
   belt and Menu float over it as two pills (Roy, 2026-09-23, library-top-options.html).
   Solid white behind every word — these sit on painted bamboo, read by eyes of 70. */
.mv.float .appbar{background:none;box-shadow:none;clip-path:none;padding:10px;
  pointer-events:none;align-items:flex-start;min-height:0}
/* A breath of light under the pills so a name on the path passing beneath them stays
   readable and they never sit on bare bamboo. */
.mv.float .appbar::before{content:"";position:absolute;left:0;right:0;top:0;height:104px;z-index:-1;
  background:linear-gradient(#F7F5F0D9,#F7F5F000)}
.mv.float .appbar > *{pointer-events:auto}
.mv.float .beltbadge,.mv.float .menu-btn{border-radius:999px;border-color:#fff;
  background:#fff;box-shadow:0 2px 10px #00000026}
.mv.float .beltbadge{padding:5px 14px 5px 9px}
.mv.float .menu-btn{margin-left:auto;padding:5px 14px}

/* ---- type ---- */
.mv .eyebrow{font-family:var(--util);font-size:.875rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ochre-ink)}
.mv .h-l{font-family:var(--util);font-weight:700;font-size:1.5rem;line-height:1.2;letter-spacing:0}
.mv .h-m{font-family:var(--util);font-weight:700;font-size:1.1875rem;line-height:1.25}
.mv .sub{font-size:1rem;color:var(--stone)}
.mv .sub b{color:var(--ink)}
.mv .mv-note{font-family:var(--util);font-size:.9375rem;color:var(--stone)}
.mv hr.r{border:0;border-top:1px solid var(--rule);margin:0;width:100%}

/* ---- the path ---- */

/* The words above the path stay pinned under the bar while the path scrolls beneath.
   ponytail: top tucks under the ~69px bar (it covers the overlap); a much taller bar
   would need the bar's measured height here. Background bleeds to the screen's edges. */
.mv .mv-head{position:sticky;top:56px;z-index:4;display:flex;flex-direction:column;gap:16px;
  margin-top:-16px;padding:16px 0 14px;background:var(--bone);
  box-shadow:0 0 0 100vmax var(--bone),0 1px 0 100vmax var(--rule);clip-path:inset(0 -100vmax -1px)}
/* On the path the bar and the words are one block: the rule moves to the bottom of the words. */
.mv:has(:not([hidden]) > .mv-head) .appbar{box-shadow:0 0 0 100vmax var(--bone)}

.mv .trail{position:relative;margin:0 auto}
.mv .trail svg.line{position:absolute;inset:0;pointer-events:none}
/* The journey: painted scenery the full width of the screen behind the trail, one picture
   per stretch, climbing from lesson 1. Only the clouds move, and only slowly. On the
   member's page the screen is the window; in the editor it is the phone (inline width). */
.mv .scenery{position:absolute;top:0;left:50%;width:100vw;transform:translateX(-50%);overflow:hidden;
  pointer-events:none;background:#EBD7AE}
.mv .scenery img{position:absolute;left:0;width:100%;max-width:none;object-fit:cover;display:block}
.mv .scenery .veil{position:absolute;left:0;width:100%;background:#F3EBD6D9}
/* A cloud: four lobes lit from above, a shaded underside, and its shadow on the painting. */
.mv .scenery .clouds{position:absolute;inset:0}
.mv .scenery .cl{position:absolute;left:0;width:var(--w);height:calc(var(--w)*.46);
  animation:mv-cross linear infinite;will-change:transform}
.mv .scenery .cl b{position:absolute;border-radius:50%;filter:blur(6px);
  background:radial-gradient(circle at 45% 35%,#FFFEFA 0,#FFFDF6E6 34%,#F1ECE0B3 62%,#DCD8CF66 82%,#DCD8CF00 100%)}
.mv .scenery .cl b:nth-child(3){width:50%;height:80%;left:4%;top:22%}
.mv .scenery .cl b:nth-child(4){width:54%;height:100%;left:26%;top:0}
.mv .scenery .cl b:nth-child(5){width:44%;height:74%;right:2%;top:24%}
/* The underside: a cool grey wash, like the ink under the painted mist. */
.mv .scenery .cl .u{width:96%;height:44%;left:2%;bottom:-4%;border-radius:50%;filter:blur(7px);
  background:radial-gradient(ellipse at 50% 40%,#A9AEB899 0,#B8BCC466 50%,#B8BCC400 100%)}
.mv .scenery .cl .sh{width:120%;height:80%;left:22%;top:170%;filter:blur(18px);
  background:radial-gradient(closest-side,#3F352366,#3F352300)}
.mv .scenery .cl{opacity:.82}
.mv .scenery .clouds.far .cl{opacity:.62}
.mv .scenery .clouds.far .cl .sh{opacity:.6}
@keyframes mv-cross{from{transform:translateX(var(--a))}to{transform:translateX(var(--b))}}
/* The temple's sea of clouds: long soft bands drifting between the peaks. */
.mv .scenery .sea{position:absolute;left:0;width:200%;height:70px;filter:blur(8px);
  background:repeating-linear-gradient(90deg,#fff0 0,#FFFDF7E6 70px,#FFFDF7B0 150px,#fff0 230px,#fff0 270px);
  animation:mv-sea linear infinite}
@keyframes mv-sea{from{transform:translateX(-50%)}to{transform:translateX(0)}}
/* A few cranes cross the sky about every 40 seconds, then it is empty again. */
.mv .scenery .cranes{position:absolute;left:0;opacity:0;animation:mv-fly 40s linear 6s infinite}
.mv .scenery .cranes svg{display:block;fill:none;stroke:#2E2B26;stroke-width:1.5;stroke-linecap:round}
.mv .scenery .cranes g{animation:mv-flap 1.5s ease-in-out infinite alternate;transform-origin:center}
@keyframes mv-fly{0%{opacity:0;transform:translate(-70px,0)}3%,33%{opacity:.75}
  37%{opacity:0;transform:translate(var(--b),-40px)}100%{opacity:0;transform:translate(var(--b),-40px)}}
@keyframes mv-flap{to{transform:scaleY(.5)}}
/* Bamboo leaves fall only while she scrolls through the grove, a few at a time. */
.mv .scenery .leaf{position:absolute;width:30px;height:9px;opacity:0;animation:mv-leaf 5.5s ease-in forwards}
.mv .scenery .leaf svg{display:block;width:100%;height:100%}
@keyframes mv-leaf{0%{opacity:0;transform:translate(0,0) rotate(var(--r))}10%{opacity:.9}
  35%{transform:translate(var(--x1),90px) rotate(calc(var(--r) + 50deg))}
  70%{transform:translate(var(--x2),190px) rotate(calc(var(--r) - 20deg))}
  90%{opacity:.8}100%{opacity:0;transform:translate(var(--x1),270px) rotate(calc(var(--r) + 30deg))}}
/* Arriving on the path, the mist rolls aside (once per visit). */
.mv .arrive{position:absolute;left:50%;width:100vw;transform:translateX(-50%);pointer-events:none;z-index:4;overflow:hidden}
.mv .arrive i{position:absolute;top:-15%;bottom:-15%;width:75%;border-radius:45%;filter:blur(24px);background:#F6F1E6}
.mv .arrive i:first-child{left:-12%;animation:mv-part-l 3.2s cubic-bezier(.5,0,.2,1) .3s forwards}
.mv .arrive i:nth-child(2){right:-12%;animation:mv-part-r 3.2s cubic-bezier(.5,0,.2,1) .3s forwards}
.mv .arrive b{position:absolute;left:0;right:0;top:40%;text-align:center;font:700 .9375rem var(--util);
  letter-spacing:.12em;text-transform:uppercase;color:var(--aizome);opacity:0;animation:mv-lvl 2.6s ease .1s forwards}
@keyframes mv-part-l{to{transform:translateX(-120%);opacity:0}}
@keyframes mv-part-r{to{transform:translateX(120%);opacity:0}}
@keyframes mv-lvl{20%,55%{opacity:1}100%{opacity:0}}
/* After a lesson, the ink runs on to the next stone. That stone is already there with its
   number, as any stone ahead; it turns into today's stone when the ink reaches it. */
.mv .trail .walked.flow{transition:stroke-dashoffset 1.6s cubic-bezier(.45,0,.25,1)}
.mv .trail .node.cur.arriving .stone{background:var(--bone-2);border:2px solid var(--bone-dim);color:var(--stone);
  width:66px;height:66px;font-size:1.3rem;box-shadow:none;animation:none}
.mv .trail .node.cur.arriving .cap{opacity:0}
.mv .node.landed .stone{animation:mv-land .7s ease-out}
.mv .node.landed .cap{transition:opacity .5s}
@keyframes mv-land{0%{transform:scale(.9)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.mv .scenery .cl,.mv .scenery .sea{animation:none}.mv .scenery .cl{transform:translateX(var(--x))}
  .mv .scenery .cranes,.mv .scenery .leaf,.mv .arrive{display:none}}

.mv .node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;
  align-items:center;gap:6px;width:140px;background:none;border:0;padding:0;cursor:pointer;
  font:inherit;color:inherit}
.mv .face{position:relative;display:block}
.mv .stone{width:66px;height:66px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-family:var(--util);font-weight:700;font-size:1.3rem;
  border:2px solid var(--bone-dim);background:var(--bone-2);color:var(--stone)}
.mv .node.done .stone{background:var(--aizome);border-color:var(--aizome);color:#fff}
.mv .node.cur .stone{background:#fff;border:4px solid var(--aizome);color:var(--aizome);
  width:74px;height:74px;font-size:1.45rem;box-shadow:0 0 0 6px #25455C1F}
/* An icon is a picture in a circle sized for two digits: let it fill the circle. */
.mv .stone.ico{font-size:1.9rem;line-height:1}
.mv .node.cur .stone.ico{font-size:2.1rem}
.mv .stone.pic{padding:0;overflow:hidden;background:#fff}
.mv .stone.pic img{width:100%;height:100%;object-fit:cover;display:block}
/* Studied, a stone keeps its picture; the ring and a small tick say it is done. */
.mv .node.done .stone.pic,.mv .node.done .stone.ico{border:4px solid var(--aizome);background:#fff;color:inherit}
.mv .tick{position:absolute;right:-4px;bottom:-4px;width:26px;height:26px;border-radius:50%;
  background:var(--aizome);color:#fff;font:700 .875rem/26px var(--util);text-align:center;
  border:2px solid var(--bone)}
.mv .node.soon .stone{border:2px dashed var(--stone)}
.mv .node.shut .stone{opacity:.7}
.mv .cap{font-family:var(--util);font-size:.9375rem;font-weight:700;line-height:1.25;text-align:center;
  color:var(--ink);background:#FBF7ECE6;padding:2px 8px;border-radius:4px}
.mv .node.ahead .cap{color:var(--stone);font-weight:400}
/* Today's name is the tag: a sentence over the lesson's name, under the stone. */
.mv .node .cap.now{background:var(--aizome);color:#fff;font-weight:700;padding:5px 10px}
.mv .node .cap.now.tom{background:var(--ochre-ink)}
.mv .cap.now b{display:block}
.mv .cap.now small{display:block;font-weight:500;font-size:.875em;color:#E2E9EE}
/* A 320px phone narrows the path: a tighter tag still clears the edge. */
@media (max-width:359px){.mv .node .stat{font-size:.75rem;letter-spacing:.02em;padding:3px 6px;left:calc(100% + 7px)}
  .mv .node .stat.l{left:auto;right:calc(100% + 7px)}}
/* Today's stone breathes slowly; not when it only opens tomorrow. */
.mv .node.cur:not(.wait) .stone{animation:mv-breathe 1.8s ease-in-out infinite}
@keyframes mv-breathe{50%{box-shadow:0 0 0 14px #25455C14}}
@media (prefers-reduced-motion:reduce){.mv .node.cur .stone{animation:none}}
/* A stone gives under the finger, and while its lesson loads a ring keeps spreading
   from it — the press was heard, even on a slow line. */
.mv .stone{transition:transform .12s ease-out}
.mv .node:active .stone{transform:scale(.9)}
.mv .node.opening .stone{animation:mv-open .9s ease-out infinite}
@keyframes mv-open{0%{transform:scale(.94);box-shadow:0 0 0 0 #25455C59}
  100%{transform:scale(1);box-shadow:0 0 0 22px #25455C00}}

/* A paper tag in the bottom-left corner points the way: back to today's stone, or up from
   the foot of the path. Paper and brown ink, like the lesson names, and still. The corner is
   the one spot a lesson name never reaches (Roy, 2026-09-26, path-scroll-cues).
   96px up clears Safari's bottom bar. */
.todaycard{position:fixed;left:max(12px,calc(50% - 268px));bottom:96px;z-index:7;
  display:flex;flex-direction:column;align-items:center;gap:2px;white-space:nowrap;text-align:center;
  background:#FBF7ECF2;color:#6B4A2B;border:2px solid #8A6A45;border-radius:14px;padding:8px 12px;
  min-width:88px;min-height:48px;cursor:pointer;font-family:var(--util);font-size:1rem;font-weight:700;
  line-height:1.2;box-shadow:0 2px 8px #0000001F}
.todaycard.inframe{position:absolute;left:12px;bottom:16px}
.todaycard > b{font-size:1.375rem;line-height:1}
.todaycard small{display:block;font-weight:500;font-size:.875rem}

/* ---- a lesson ---- */
.mv .mv-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  width:100%;min-height:68px;border:0;border-radius:6px;background:var(--aizome);color:#fff;cursor:pointer;
  font-family:var(--util);font-weight:700;font-size:1.1875rem;padding:13px 16px;text-align:center}
.mv .mv-btn[disabled]{opacity:.6;cursor:default}
.mv .mv-btn .sm{display:block;font-weight:400;font-size:.9375rem;color:#E2E9EE}
.mv .mv-btn2{display:block;width:100%;min-height:60px;border-radius:6px;background:var(--bone-2);cursor:pointer;
  border:2px solid var(--stone);color:var(--ink);font-family:var(--util);font-weight:700;
  font-size:1.0625rem;padding:11px 16px;text-align:center}
.mv .blk{display:flex;flex-direction:column;gap:9px}
.mv .blkhead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.mv .chip{display:inline-flex;align-items:center;font-family:var(--util);font-weight:700;
  font-size:.9375rem;color:var(--ochre-ink);border:2px solid var(--brass);border-radius:999px;
  padding:3px 10px;background:#FFFDF7}
.mv .quote{font-size:1.125rem;line-height:1.5;border-left:4px solid var(--brass);padding-left:14px}
.mv .quote cite{display:block;font-style:normal;font-size:.9375rem;color:var(--stone);margin-top:6px}
.mv .quote.todo{border-left-color:var(--bone-dim);color:var(--stone);font-size:1rem;font-style:italic}

.mv .md{font-size:1.0625rem;line-height:1.65}
.mv .md p{margin:0 0 12px}
.mv .md h2,.mv .md h3,.mv .md h4{font-family:var(--util);font-weight:700;line-height:1.25;margin:16px 0 6px}
.mv .md h2{font-size:1.3125rem}
.mv .md h3{font-size:1.15rem}
.mv .md h4{font-size:1.0625rem}
.mv .md ul,.mv .md ol{margin:0 0 12px;padding-left:22px}
.mv .md li{margin-bottom:7px}
.mv .md a{color:var(--aizome);text-decoration:underline;text-underline-offset:2px}
.mv .md blockquote{margin:0 0 12px;padding-left:14px;border-left:4px solid var(--brass)}
.mv .md img{max-width:100%;border-radius:4px}
.mv .md hr{border:0;border-top:1px solid var(--rule);margin:14px 0}
.mv .md :first-child{margin-top:0}
.mv .md :last-child{margin-bottom:0}

.mv .figure{display:flex;flex-direction:column;gap:7px}
.mv .figure .frameimg{border:1px solid var(--rule);border-radius:4px;background:var(--bone-2);overflow:hidden}
.mv .figure img{width:100%;display:block}
.mv .figure .ph{aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;color:var(--stone);font-family:var(--util);font-size:.9375rem;
  text-align:center;padding:14px}
.mv .figure figcaption{font-size:.9375rem;color:var(--stone)}

/* The player, and the three things she can do to the picture, in words under it. */
.mv .player{background:#22201E;border-radius:4px;overflow:hidden}
.mv .player video,.mv .player iframe,.mv .player mux-player{width:100%;aspect-ratio:16/9;border:0;display:block}
.mv .player mux-player:not(:defined){background:#22201E}
.mv .player mux-player::part(button){min-width:48px;min-height:48px}
.mv .player.flip mux-player,.mv .player.flip video{transform:scaleX(-1)}
.mv .tools{display:flex;flex-wrap:wrap;gap:10px}
.mv .tool{flex:1 1 9rem;min-height:60px;padding:12px 14px;cursor:pointer;
  background:var(--bone-2);color:var(--ink);border:2px solid var(--stone);border-radius:6px;
  font:700 1rem/1.25 var(--util)}
.mv .tool[aria-pressed="true"]{background:var(--aizome);color:var(--bone);border-color:var(--aizome)}
.mv .mv-note a{display:inline-block;padding:8px 2px;font-weight:600;color:var(--aizome)}

/* ---- signed ---- */
.mv .xp-big{font-family:var(--util);font-weight:700;font-variant-numeric:tabular-nums;
  font-size:2.7rem;line-height:1;color:var(--ink)}
.mv .beltbig svg{max-width:100%;height:auto}
.mv .promo{border:3px solid var(--brass);background:#FFFDF5;border-radius:8px;padding:16px;
  display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center}
.mv .promo svg{max-width:100%;height:auto}
.mv .ceil{border:2px solid var(--ochre-ink);border-radius:6px;padding:14px;background:#FFFDF7;
  display:flex;flex-direction:column;gap:8px}
.mv .ceil .h-m{color:var(--ochre-ink)}

/* ---- a free member's path: one gate, then stones with no words, then mist ---- */
.mv .node.q .stone{border:2px dashed var(--stone);background:#EFE8D8;color:var(--stone);font-size:1.5rem}
.mv .gate,.mv .beyond{position:absolute;left:8px;right:8px;transform:translateY(-50%);z-index:2;cursor:pointer;
  font:inherit;color:var(--ink);text-align:left}
/* A torii painted into the scene; the path runs straight up between its pillars
   (Roy, 2026-09-23). The white label is what says it can be tapped. */
.mv .gate{left:50%;right:auto;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;
  background:none;border:0;padding:0;width:190px;text-align:center}
.mv .gate .tor{width:176px;height:auto;display:block;margin-bottom:-6px}
.mv .gate .lbl{background:#fff;border-radius:8px;box-shadow:0 2px 10px #00000026;padding:6px 14px;
  width:max-content;max-width:calc(100vw - 24px - 2 * var(--gx,0px))}
/* ^ one line; wraps only on a small phone with large text. --gx: how far off centre the gate sits. */
.mv .gate .lbl span{display:block;font:400 .9375rem/1.3 var(--util);color:#A8432E}
.mv .gate:focus-visible .lbl{outline:3px solid var(--aizome);outline-offset:2px}
.mv .gate b,.mv .beyond b{display:block;font:700 1rem/1.25 var(--util)}
.mv .beyond span{display:block;font:400 .9375rem/1.3 var(--util);color:var(--stone)}
.mv .beyond{background:none;border:0;text-align:center;padding:8px;min-height:56px}

/* ---- the offer: one sheet, whatever opened it ---- */
.sheetwrap{position:fixed;inset:0;z-index:20}
.sheetwrap.inframe{position:absolute}
.sheetwrap .dim{position:absolute;inset:0;background:#14131266}
.sheetwrap .mv-sheet{position:absolute;left:0;right:0;bottom:0;max-height:92%;overflow-y:auto;background:var(--bone);
  border-radius:16px 16px 0 0;padding:22px 18px 24px;max-width:560px;margin:0 auto;outline:none;box-sizing:border-box}
.mv .offer-body{display:flex;flex-direction:column;gap:12px}
.mv .offer-body :is(p,h2){margin:0}
.mv .offer-body .core{font-size:1.0625rem;line-height:1.55}
.mv .offer-body .price{font-family:var(--util);font-weight:700;font-size:1rem}

/* The editor's preview of the library (library.html?preview): a lesson no member can
   open yet is marked on its stone and across the top of the lesson. */
.mv .node .stat{background:#FBF7ECE6;padding:2px 8px;border-radius:4px;font-family:var(--util);
  font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--stone);font-weight:700}
.mv .node .stat.on{color:var(--aizome)}
/* Level with its own stone, on the side away from the bend (like the flag), so it
   never reaches the stone above or below. Live filled, anything else outlined. */
/* Wraps rather than runs off the screen when the phone's text is large. */
.mv .node .stat{position:absolute;top:50%;left:calc(100% + 10px);transform:translateY(-50%);width:max-content;max-width:6.5rem;
  background:#fff;border:1.5px solid currentColor;padding:1px 7px}
.mv .node .stat.l{left:auto;right:calc(100% + 10px)}
.mv .node .stat.on{background:var(--aizome);border-color:var(--aizome);color:#fff}
.mv .draftstrip{background:#FDF3EF;border-bottom:2px solid #8A3C1E;color:#8A3C1E;
  font-family:var(--util);font-weight:700;font-size:.9375rem;padding:9px 14px}

/* ---- the editor's edit layer (Roy, 2026-09-23: one screen, an edit layer) ----
   In the editor this page IS the phone. Edit mode draws on top of the member's own
   screen: every block outlined with a pencil, a way to add a section between any two,
   and every stone a way into its lesson. Student mode is the same page without it. */
.mv .node.pick{cursor:pointer}
.mv .node.pick:hover .stone{box-shadow:0 0 0 5px #25455C1F}
.mv .node.editing .stone{border-color:#6E5F38;box-shadow:0 0 0 5px #B4832E33}
.mv .node.editing .cap{font-weight:700}
.mv.editing .blk[data-bi]{position:relative;padding-top:24px;outline:2px dashed #2F6F8F80;outline-offset:6px;border-radius:2px;cursor:pointer}
.mv.editing .blk[data-bi].sel{outline:3px solid #2F6F8F}
.mv.editing .ed-pen{position:absolute;top:-18px;right:-8px;z-index:2;min-height:36px;padding:4px 12px;border-radius:999px;
  border:0;background:#2F6F8F;color:#fff;font:700 .875rem/1 var(--util);cursor:pointer}
.mv.editing .ed-title{position:relative;padding-right:84px}
.mv.editing .ed-title .ed-pen{top:50%;transform:translateY(-50%);right:0}
.mv.editing .ed-add{display:block;width:100%;min-height:44px;margin:10px 0;border:2px dashed #2F6F8F;border-radius:8px;
  background:#E3EEF3;color:#1F4E66;font:700 .9375rem/1.2 var(--util);cursor:pointer}
.mv.editing .ed-add:hover{background:#D3E4EC}
.mv.editing [data-mv="finish"],.mv.editing [data-mv="finish-note"]{display:none}
.mv .mv-note.todo{font-style:italic}
/* Edit mode: the lesson's status and its next step, under its name. */
.mv.editing .draftstrip{display:none}
.mv .ed-status{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px;padding:10px;
  border:2px dashed #2F6F8F80;border-radius:8px;background:#F4F8FA}
.mv .ed-status .pill{padding:4px 10px;border-radius:999px;font:700 .8125rem/1.2 var(--util);letter-spacing:.04em;
  text-transform:uppercase;border:2px solid currentColor}
.mv .ed-status .pill.draft{color:#8A3C1E}
.mv .ed-status .pill.review{color:#6E5F38}
.mv .ed-status .pill.published{color:#2E6B3F}
.mv .ed-status button{min-height:40px;padding:6px 12px;border:2px solid #2F6F8F;border-radius:6px;background:#fff;
  color:#1F4E66;font:700 .875rem/1.2 var(--util);cursor:pointer}
.mv .ed-status button:disabled{opacity:.45;cursor:not-allowed}
.mv .ed-status p{flex-basis:100%;margin:2px 0 0;font:.875rem/1.35 var(--util);color:#8A3C1E}
.mv .ed-status .ed-more{margin-left:auto}
.mv .ed-status .ed-more summary{min-height:40px;display:flex;align-items:center;padding:0 6px;cursor:pointer;
  font:700 .875rem/1.2 var(--util);color:#1F4E66}
.mv .ed-status .ed-more[open]{flex-basis:100%;margin-left:0}
.mv .ed-status .ed-more button{margin-top:6px;border-color:#8A3C1E;color:#8A3C1E}