/* ============ HOW TO START — the three steps (#how) ============
   Sits between the hero and #discover. Deliberately quiet: no reveal, no
   scroll-driven motion. The hero already spends the page's most expensive
   attention, and this block's job is a fast "you do almost nothing", not a
   second show. Cards are plain white on the shared paper, same shell as the
   rest of the .faq sections. */
/* While the demo runs, the hero owns the whole screen. Its "Далі: …" pill and
   "Пропустити демо" are position:fixed near the viewport floor, and .hero is
   capped at min(85vh,660px) — so on a 1080px screen ~320px of whatever came
   next shared that band and read as part of the demo (owner, 05.09). There is
   no real scroll lock any more, so this is the only thing keeping the two
   apart. Reverts the moment the demo ends: exitDemo() drops .home-live before
   it measures #how, so the scroll target is read after the hero shrinks. */
/* desktop only: below 921px .hero is deliberately min-height:auto with its own
   padding, and a forced full screen there strands the browser mock mid-page.
   2026-09-23, desktop slides: no longer gated on .home-live — the demo is the
   hero from the first paint now (no PLAY), its step controls ride the bottom of
   this 100vh box (#d-deck), and one fixed height across every step is what
   keeps the page below from jumping as the visitor moves between them. */
@media (min-width: 921px) { .hero { min-height: 100vh; } }
/* owner call 2026-09-05: dropped the bespoke padding override — #how now
   takes the shared .faq clamp(90px,12vh,140px), same as every other block */
/* .hl-am is styled only inside #hero — the accent has to be re-declared here */
#how .faq-title .hl-am { color: var(--amber-deep); }
/* the shared .faq-head is 660px — too narrow here, the accent phrase broke
   across two lines and dropped a single word onto the second */
#how .faq-head { max-width: 780px; }
#how .faq-title { text-wrap: balance; }

.how-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  max-width: 1240px;
  margin: 0 auto;
}
.how-step {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px 24px;
}
.how-n { font-family: var(--mono); font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: .22em; color: var(--amber-deep); }
.how-t { font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin-top: 10px; }
.how-s { color: var(--ink-70); font-size: var(--fs-body-lg); line-height: 1.5; margin-top: 8px; }

/* margin-top:auto pins every slot to the card floor, so the three CTAs /
   pills / sample line sit on one line across cards of unequal text length */
.how-slot { margin-top: auto; padding-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* One band for the three demos. They used to be 80 / 89 / 64px tall and start
   at three different heights (521 / 501 / 537), so the row read as three
   unrelated cards rather than one sequence. A fixed band with the content
   centred inside it lands every demo on the same top AND the same floor —
   which matters more here than usual, because the eye is meant to travel
   01 → 02 → 03 and see the same word move across. */
.how-store-frame, .how-save-pop, .how-line, .how-yt { box-sizing: border-box; min-height: 108px; }
.how-save-pop { justify-content: center; }
.how-line-t { display: block; }

.how-cta {
  display: none;                      /* .d-only / .m-only decide which one shows */
  align-items: center;
  gap: 9px;
  background: var(--ink);
  color: #f7f6f3;
  border: 0;
  border-radius: var(--r-pill);
  min-height: var(--cta-h);
  padding: 0 var(--cta-px);
  font-family: var(--sans);
  font-size: var(--fs-read);
  font-weight: 600;
  cursor: pointer;
  transition: background-color .2s ease, transform var(--dur-1) ease;
}
.how-cta:hover { background: var(--ink-2); transform: translateY(-1px); }
.how-cta--share svg { width: 16px; height: 16px; flex: none; }
/* .d-only/.m-only set `display:block` unconditionally (see line ~593) — the
   pill needs inline-flex, so each side re-states it inside its own breakpoint,
   exactly like .btn-install.d-only does. */
@media (min-width: 921px) { .how-cta.d-only { display: inline-flex; } }
@media (max-width: 920px) { .how-cta.m-only { display: inline-flex; } }

.how-slot--line { display: block; }
/* step 04 is a tiny browser window, not a grey quote: the copy promises the word
   comes back "in the next articles", so the picture has to read as any website.
   Bar values copied from the hero's .browser .bbar/.bdots/.url (lantern-v3.css)
   at a smaller scale — own classes, because .browser drags hero-only rules in.
   The column flex holds two blocks (bar, text); the sentence itself stays inside
   .how-line-t so its inline word is never split into flex items (see above). */
.how-line {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-70);
}
.how-page-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px;
  background: #faf9f7; border-bottom: 1px solid var(--line);
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.how-page-dots { display: flex; gap: 4px; flex: none; }
.how-page-dots i { width: 7px; height: 7px; border-radius: var(--r-circle); display: block; }
.how-page-dots i:nth-child(1) { background: #ff5f57; }
.how-page-dots i:nth-child(2) { background: #febc2e; }
.how-page-dots i:nth-child(3) { background: #28c840; }
.how-page-url {
  flex: 1; min-width: 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 1px 8px;
  font-family: var(--mono); font-size: 10px; line-height: 1.5; color: var(--ink-45);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* margin:auto centres the sentence in the space under the bar without making
   .how-line-t a flex container */
.how-line .how-line-t { margin: auto 0; padding: 9px 13px; }
/* The saved-word mark, matched to the shipped extension rather than invented:
   word-highlight.css paints --lui-word-saved (#bfdbfe) as a band BEHIND the word
   and leaves the text the page's own colour, at --lui-radius-sm (4px). The old
   rule here also recoloured the text (#2f6fd6), which the product never does —
   and that stray blue was the page's only other blue besides the store button
   in step 01, two different blues meaning two different things in one row. */
.how-w { color: var(--ink); }
.how-w--v { position: relative; background: #bfdbfe; color: var(--ink); border-radius: var(--r-xs); padding: 0 2px 1px; cursor: pointer; }
.how-w--v:focus { outline: none; }
.how-w--v:focus-visible { outline: 2px solid var(--amber-deep); outline-offset: 2px; }
/* the pill itself: same recipe as .lantern-word-tooltip in the extension —
   --lui-neutral-900 on --lui-neutral-0, 11px, 3px 9px, --lui-radius-md (8px) */
.how-tip {
  position: absolute; left: 50%; bottom: calc(100% + 7px);
  transform: translateX(-50%) translateY(3px);
  background: var(--ink-tooltip); color: #fff;
  font-size: var(--fs-caption); line-height: 1.35; font-weight: 500; letter-spacing: 0;
  padding: 3px 9px; border-radius: var(--r-sm); white-space: nowrap;
  pointer-events: none; opacity: 0; z-index: 3;
  transition: opacity .16s ease, transform .16s ease;
  transition-delay: var(--dur-1);
}
.how-w--v:hover .how-tip, .how-w--v:focus-visible .how-tip { opacity: 1; transform: translateX(-50%) translateY(0); }
.how-line { overflow: visible; }

/* step 04: a schematic podcast that plays (the talker's waves move, the
   progress runs, the subtitle changes) until the cursor stops on the idiom
   and it pauses. The subtitle is the extension's line: an idiom carries a
   dashed underline before any hover, the hover pill is step 03's .how-tip.
   lantern-how-yt.js runs the loop. */
.how-slot--yt { display: block; }
.how-yt {
  position: relative; overflow: hidden; border-radius: var(--r-md);
  background: linear-gradient(180deg, #2b241c, #17130f); color: #fff;
}
.how-yt-scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.how-yt-p { opacity: .72; transition: opacity .3s ease; }
.how-yt-spot { opacity: 0; transition: opacity .4s ease; }
.how-yt[data-who="a"] .how-yt-p--a,
.how-yt[data-who="b"] .how-yt-p--b,
.how-yt[data-who="a"] .how-yt-spot--a,
.how-yt[data-who="b"] .how-yt-spot--b { opacity: 1; }
.how-yt-wave { fill: var(--amber-bright, #f0b453); opacity: 0; transition: opacity .2s ease; }
.how-yt-wave rect { transform-box: fill-box; transform-origin: center; animation: how-yt-talk .5s ease-in-out infinite alternate; }
.how-yt-wave rect:nth-child(2) { animation-delay: .15s; }
.how-yt-wave rect:nth-child(3) { animation-delay: .3s; }
.how-yt[data-who="a"] .how-yt-wave--a,
.how-yt[data-who="b"] .how-yt-wave--b { opacity: .9; }
@keyframes how-yt-talk { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
.how-yt-pause {
  position: absolute; left: 8px; top: 8px; width: 22px; height: 22px;
  border-radius: 50%; background: rgba(0,0,0,.6); opacity: 0; transform: scale(.8);
  transition: opacity .2s ease, transform .2s ease;
}
.how-yt-pause::before, .how-yt-pause::after {
  content: ""; position: absolute; top: 6px; width: 3px; height: 10px; background: #fff; border-radius: 1px;
}
.how-yt-pause::before { left: 7px; }
.how-yt-pause::after { right: 7px; }
.how-yt-sub { position: absolute; left: 0; right: 0; bottom: 20px; display: flex; justify-content: center; }
.how-yt-cue {
  position: absolute; bottom: 0; white-space: nowrap;
  background: rgba(10,10,10,.82); border-radius: 3px; padding: 1px 7px;
  font: 400 12.5px/1.5 Roboto, Arial, sans-serif;
  opacity: 0; transition: opacity .25s ease;
}
.how-yt-cue.on { opacity: 1; }
.how-yt-w {
  position: relative; border-radius: 2px; cursor: pointer;
  border-bottom: 1px dashed rgba(255,255,255,.65); transition: background .15s ease;
}
.how-yt-w:focus { outline: none; }
.how-yt-w:focus-visible { outline: 2px solid var(--amber-deep); outline-offset: 2px; }
.how-yt.paused .how-yt-w { background: #78350f; border-bottom-color: transparent; }
.how-yt.paused .how-yt-w .how-tip { opacity: 1; transform: translateX(-50%) translateY(0); transition-delay: 0s; }
/* the drag clip: words light up as the cursor passes, the pill opens over the
   whole run on release */
.how-yt-run { position: relative; }
.how-yt-dw { border-radius: 2px; transition: background .12s ease; }
.how-yt-dw.lit { background: #78350f; }
.how-yt-run.open .how-tip { opacity: 1; transform: translateX(-50%) translateY(0); transition-delay: 0s; }
.how-yt-bar { position: absolute; left: 8px; right: 10px; bottom: 6px; height: 10px; display: flex; align-items: center; gap: 8px; }
/* play/pause glyph: two bars while it plays, a triangle once paused */
.how-yt-pp { position: relative; width: 8px; height: 9px; flex: none; }
.how-yt-pp::before, .how-yt-pp::after { content: ""; position: absolute; top: 0; width: 2.5px; height: 9px; background: #fff; border-radius: 1px; }
.how-yt-pp::before { left: 0; }
.how-yt-pp::after { right: 0; }
.how-yt.paused .how-yt-pp::before { width: 0; height: 0; background: none; border-radius: 0; border-left: 8px solid #fff; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
.how-yt.paused .how-yt-pp::after { display: none; }
.how-yt-track { position: relative; flex: 1; height: 2px; background: rgba(255,255,255,.22); }
.how-yt-track i { position: absolute; inset: 0; background: #f00; transform-origin: left; transform: scaleX(0); }
.how-yt-track i.run { animation: how-yt-prog var(--clip, 5s) linear forwards; }
@keyframes how-yt-prog { from { transform: scaleX(.04); } to { transform: scaleX(1); } }
.how-yt.paused .how-yt-wave rect, .how-yt.paused .how-yt-track i { animation-play-state: paused; }
.how-yt.paused .how-yt-pause { opacity: 1; transform: none; }
.how-yt-cur {
  position: absolute; left: 0; top: 0; width: 17px; height: 17px; opacity: 0; pointer-events: none; z-index: 4;
  transition: transform .8s cubic-bezier(.3,0,.2,1), opacity .3s ease;
}
.how-yt-cur.show { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .how-yt-wave rect, .how-yt-track i { animation: none; }
  .how-yt-track i { transform: scaleX(.6); }
}

/* step 01's store preview — see the markup comment for why it isn't a button */
.how-store { width: 100%; }
.how-store-frame {
  position: relative; display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 20px 14px; overflow: hidden;
}
.how-store-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: #0b57d0; color: #fff; border-radius: var(--r-pill);
  padding: 9px 18px; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
  animation: how-store-press 4.2s var(--ease-soft) infinite;
}
.how-store-cursor {
  position: absolute; left: 50%; top: 50%; width: 15px; height: 15px;
  color: var(--ink); opacity: 0;
  animation: how-store-cursor 4.2s var(--ease-soft) infinite;
}
@keyframes how-store-press {
  0%, 54% { transform: none; filter: none; }
  59%     { transform: scale(.94); filter: brightness(.86); }
  66%     { transform: none; filter: none; }
}
@keyframes how-store-cursor {
  0%   { transform: translate(30px, 34px); opacity: 0; }
  12%  { opacity: 1; }
  48%  { transform: translate(6px, 7px); opacity: 1; }
  59%  { transform: translate(4px, 5px) scale(.86); opacity: 1; }
  68%  { transform: translate(6px, 7px); opacity: 1; }
  88%  { transform: translate(6px, 7px); opacity: 1; }
  100% { transform: translate(30px, 34px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .how-store-btn, .how-store-cursor { animation: none; }
  .how-store-cursor { opacity: 1; transform: translate(6px, 7px); }
  .how-tip { transition: none; transition-delay: 0s; }
}

/* step 2's onboarding skeleton — mirrors #discover's own pill language
   (.disc-pill / .disc-pill.on) just below on the page: unselected = light
   bordered pill, selected = solid ink. No copy needed, purely shape/rhythm,
   so it reads as "a level + topic picker" at a glance without overclaiming
   what onboarding actually looks like. */
/* step 02's save demo — replaced the grey chip skeleton 05.09. Shapes come
   from the extension's word popup: light card, the word, its gloss, and the
   real save button (popup_addToDictionary = "Зберегти" / "Save word", white
   pill with a card shadow, 6px 16px, --lui-radius-md). The bookmark turning
   amber on the press is the product's own [data-saved="true"] switch. */
/* 60% of the slot, centred (owner call 06.09): this is a demonstration of the
   save popup, not a window that has to match the frames either side of it.
   The width is a look, not a limit — measured, the head row `legacy спадок`
   needs 96px and has 149px at 1440px, still 113px at 980px, so «спадок» has
   ~50px of slack and never ellipsises. (The earlier note here claimed a 1px
   margin at this width; that was wrong, and it read as a floor nobody could
   go below.) */
.how-save { width: fit-content; min-width: 60%; margin-inline: auto; }
.how-save-pop {
  position: relative; display: flex; flex-direction: column; gap: 9px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 12px 13px 13px; box-shadow: var(--shadow-1);
}
.how-save-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.how-save-w { font-size: var(--fs-body-lg); font-weight: 600; color: var(--ink); }
.how-save-g { font-size: var(--fs-eyebrow); color: var(--ink-45); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* centred, not flush-left: the head row above it is the widest thing in the card,
   so a left-hugging pill under it left a lopsided gap on the right. Padding is
   down from 14px to 10px, which is as narrow as this can honestly go — the label
   alone measures 55px of the button's 102px, so anything past ~90px starts
   eating «Зберегти» itself. */
.how-save-btn {
  align-self: center; display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px; border-radius: var(--r-sm); background: #fff;
  /* tier 1 = a resting surface. The second layer is a 1px inset RING, not an
     elevation — rings stay off the shadow scale on purpose. */
  box-shadow: var(--shadow-1), 0 0 0 1px var(--line) inset;
  font-size: var(--fs-eyebrow); font-weight: 500; color: var(--ink); white-space: nowrap;
  animation: how-save-press 4.2s var(--ease-soft) 1.4s infinite;
}
.how-save-ico { width: 13px; height: 13px; color: var(--ink-45); animation: how-save-ico 4.2s linear 1.4s infinite; }
.how-save-cursor {
  /* follows the button to the centre. Anchored off 50% rather than a fixed left,
     so it keeps pointing at the pill whatever the label's width does; the offset
     lands the tip over the bookmark, which is the thing that turns amber.
     Can't be folded into transform — the keyframes below own that property. */
  position: absolute; left: 50%; margin-left: -30px; bottom: 12px; width: 15px; height: 15px;
  color: var(--ink); opacity: 0;
  animation: how-save-cursor 4.2s var(--ease-soft) 1.4s infinite;
}
@keyframes how-save-press {
  0%, 54% { transform: none; }
  59%     { transform: scale(.95); }
  66%     { transform: none; }
}
@keyframes how-save-ico {
  0%, 58%   { color: var(--ink-45); }
  59%, 100% { color: var(--amber-deep); }
}
@keyframes how-save-cursor {
  0%   { transform: translate(26px, 26px); opacity: 0; }
  12%  { opacity: 1; }
  48%  { transform: translate(2px, 2px); opacity: 1; }
  59%  { transform: translate(0, 0) scale(.86); opacity: 1; }
  68%  { transform: translate(2px, 2px); opacity: 1; }
  88%  { transform: translate(2px, 2px); opacity: 1; }
  100% { transform: translate(26px, 26px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .how-save-btn, .how-save-ico, .how-save-cursor { animation: none; }
  .how-save-ico { color: var(--amber-deep); }
  .how-save-cursor { opacity: 1; transform: translate(2px, 2px); }
}

/* the seam into #discover, drawn instead of spoken: the old line said "…and
   what exactly to read", which is the next section's own header repeated a
   screen early (owner call 05.09). Desktop: one hand-drawn swoosh starting
   at step 3 (rightmost card) and running almost horizontal down-left into
   "Что читати?" below, so it reads as a connector, not a floating arrow
   over dead space (owner note 05.09). Mobile: cards stack single-column, so
   step 3 already sits directly above the label — keep the old vertical
   loop pointing straight down. */
/* absolutely positioned (owner call 2026-09-05): the arrow used to sit in
   normal flow right after .how-steps, eating into the section's own
   padding-bottom with ink — any part of it inside #how's box, even dipping
   past the edge by a few px, still reads as "the bottom gap has something
   in it" next to a top gap that's totally empty. top:100% puts the ENTIRE
   arrow below #how's own bottom edge — none of it is inside #how's padding
   box at all, so the light section's own whitespace is clean both sides. */
#how { position: relative; }
.how-arrow { color: var(--amber); position: absolute; bottom: -16px; }
.how-arrow--desktop { right: calc((100% - var(--maxw)) / 2 + var(--gut)); }
.how-arrow--desktop svg { width: clamp(150px, 20vw, 220px); height: auto; opacity: .9; }
.how-arrow--mobile { left: 50%; transform: translateX(-50%); }
.how-arrow--mobile svg { width: 64px; height: 106px; opacity: .9; }
@media (min-width: 921px) { .how-arrow--desktop.d-only { display: block; } }

@media (min-width: 921px) and (max-width: 1180px) {
  .how-steps { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
}

@media (max-width: 920px) {
  /* symmetric, on-token seam — every mobile section now opens and closes on the
     same 48px so the page has one rhythm instead of a per-section guess */
  #how { padding: var(--sp-7) 0; }
  .how-steps { grid-template-columns: 1fr; gap: 10px; }
  .how-yt { aspect-ratio: 240 / 108; min-height: 0; }
  .how-step { padding: 18px 16px; }
  /* 18px, not 16px: mobile body copy (.how-s) is 14px, and a 16px title left the
     step name only a 2px step above its own paragraph — not a full scale step. */
  .how-t { font-size: var(--fs-lead); margin-top: 9px; }
  .how-s { font-size: var(--fs-body); margin-top: 7px; }
  .how-slot { padding-top: 14px; }
  .how-arrow--mobile.m-only { display: block; }
  .how-arrow--mobile svg { width: 48px; height: 80px; }
}

/* ============ SEND-TO-DESKTOP SHEET ============
   The page's own share sheet, opened by every [data-m-share] button — see the
   markup comment in index.html for why it replaced the OS sheet + mailto pair.
   Bottom-anchored, which is where a hand already expects a sheet on a phone;
   capped and centred so the one share button that also shows on a wide screen
   gets a normal dialog rather than a stretched band.

   [hidden] needs re-stating on both the wrapper and the options: the UA rule is
   `display:none` at user-agent origin, and any author `display:` below would
   otherwise win over it and paint the sheet on load. */
.m-sheet { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: flex-end; justify-content: center; }
.m-sheet[hidden] { display: none; }
html.m-sheet-open { overflow: hidden; }
.m-sheet-scrim {
  position: absolute; inset: 0;
  background: rgba(var(--ink-rgb), .5);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.m-sheet-card {
  position: relative; width: 100%; max-width: 420px; margin: 0 10px 10px;
  background: var(--card); border-radius: var(--r-lg);
  box-shadow: var(--shadow-3); padding: 18px 14px 12px;
  animation: m-sheet-in .22s var(--ease-out) both;
}
@keyframes m-sheet-in { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .m-sheet-card { animation: none; } }
.m-sheet-t { margin: 0 0 12px; padding: 0 4px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-70); }
/* the four channels: one choice made four ways, so they share a row-pair rather
   than each taking a full bar. Icon over label keeps every tile the same width
   whatever the brand name's length. */
.m-sheet-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 8px; }
.m-sheet-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  padding: 14px 4px 12px; border-radius: var(--r-md); background: var(--paper-2);
  font-family: var(--sans); font-size: var(--fs-caption); font-weight: 600;
  color: var(--ink); text-decoration: none; text-align: center;
  transition: background-color .18s ease;
}
.m-sheet-tile:hover, .m-sheet-tile:active { background: rgba(var(--ink-rgb), .11); }
.m-sheet-tile svg { width: 24px; height: 24px; flex: none; }
/* the envelope is the only glyph without a brand colour — give it the ink tone
   so it reads as one of the set rather than as a disabled tile. */
#m-sheet-mail svg { color: var(--ink-70); }
@media (max-width: 360px) { .m-sheet-grid { grid-template-columns: repeat(2, 1fr); } }
.m-sheet-opt {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: var(--cta-h); padding: 0 16px; margin-bottom: 8px;
  background: var(--paper-2); border: 0; border-radius: var(--r-md);
  font-family: var(--sans); font-size: var(--fs-read); font-weight: 600;
  color: var(--ink); text-align: left; text-decoration: none; cursor: pointer;
  transition: background-color .18s ease;
}
.m-sheet-opt[hidden] { display: none; }
.m-sheet-opt svg { width: 20px; height: 20px; flex: none; }
/* --paper-2 is roughly this same ink tint over the card, so pressing just
   deepens it by one step rather than introducing a fourth surface colour. */
.m-sheet-opt:hover, .m-sheet-opt:active { background: rgba(var(--ink-rgb), .11); }
/* copied: the button confirms in place — a sheet that is about to close has no
   room for a toast, and the label is the only thing the eye is already on. */
.m-sheet-copy-done { display: none; }
#m-sheet-copy.is-done { background: rgba(var(--amber-rgb), .18); color: var(--amber-deep); }
#m-sheet-copy.is-done .m-sheet-copy-idle { display: none; }
#m-sheet-copy.is-done .m-sheet-copy-done { display: inline; }
.m-sheet-x {
  display: block; width: 100%; margin-top: 4px; padding: 12px 0;
  background: none; border: 0; font-family: var(--sans); font-size: var(--fs-sm);
  color: var(--ink-45); cursor: pointer;
}
.m-sheet-x:hover { color: var(--ink); }