/* ── Missions Page ── */
/* Reuses --hr-* theme variables from home-redesign.css */

body.missions-page {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background: var(--hr-bg, #f4f8fc);
  color: var(--hr-color, #334155);
  overflow-x: hidden;
}

/* Navbar styles inherited from home-redesign.css via body.home-redesign class */

/* ── Sky Hero ── */
.ms-sky {
  position: relative;
  background: var(--hr-hero-grad, linear-gradient(180deg, #c5e4f7 0%, #daedf9 35%, #e0f0fa 65%, #eaf5fd 100%));
  padding: 7rem 2rem 8rem;
  overflow: hidden;
  text-align: center;
}
.ms-sky::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 60px;
  background: var(--hr-hero-edge, #f4f8fc);
  clip-path: polygon(0% 70%,3% 60%,6% 72%,9% 55%,12% 68%,15% 50%,18% 63%,21% 45%,24% 58%,27% 42%,30% 55%,33% 38%,36% 52%,39% 35%,42% 48%,45% 30%,48% 45%,51% 28%,54% 42%,57% 25%,60% 40%,63% 22%,66% 38%,69% 18%,72% 35%,75% 15%,78% 30%,81% 12%,84% 28%,87% 10%,90% 25%,93% 8%,96% 22%,100% 5%,100% 100%,0% 100%);
}

/* Stars (dark mode) */
.missions-page .hr-stars {
  display: none;
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 25% 45%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 40% 15%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 55% 35%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 70% 55%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 85% 25%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 90% 70%, rgba(255,255,255,0.4), transparent);
  pointer-events: none;
}

/* Clouds */
.ms-cloud { position: absolute; background: #fff; border-radius: 50px; }
.ms-cloud-1 { width: 300px; height: 100px; top: 6%; left: -40px; box-shadow: 45px -22px 0 15px #fff, 90px -5px 0 10px #fff, 130px -15px 0 5px #fff; opacity: 0.55; }
.ms-cloud-2 { width: 200px; height: 70px; top: 12%; right: 6%; border-radius: 35px; box-shadow: 30px -14px 0 10px #fff, 65px -3px 0 8px #fff; opacity: 0.4; }
.ms-cloud-3 { width: 140px; height: 50px; top: 40%; left: 8%; border-radius: 25px; box-shadow: 22px -10px 0 8px #fff, 48px 0 0 5px #fff; opacity: 0.3; }
.ms-cloud-4 { width: 100px; height: 36px; top: 8%; left: 45%; border-radius: 18px; box-shadow: 18px -8px 0 5px #fff, 38px 0 0 3px #fff; opacity: 0.25; }

.ms-sky-inner { position: relative; z-index: 2; }
.ms-sky h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  color: var(--hr-heading, #1a3a5c);
  margin-bottom: 0.4rem;
}
.ms-sky-sub {
  font-size: 1.1rem;
  color: var(--hr-muted, #5a7a9a);
  margin-bottom: 1.5rem;
}

/* ── Paper (torn-page cards, from the W4 handwritten modal) ── */
/* Also the public word counter's mission cards (light only, like the other public pages) */
body.missions-page, body.word-counter-page {
  --ms-paper: #fff;
  --ms-paper-shadow: 0 10px 30px rgba(0,80,160,0.12);
  --ms-ink: #1a3a5c;
  --ms-hand-easy: #3f8a43;
  --ms-hand-medium: #2e64b5;
  --ms-hand-hard: #c0336f;
  --ms-hand-pts: #c08a0c;
  --ms-hand-words: #5a7a9a;
  --ms-hand-dot: #b0c4d8;
  --ms-strike: #c2410c;
  --ms-pencil: #b7c7d6;
  --ms-red: #c2410c;
  --ms-red-soft: rgba(194,65,12,0.08);
  --ms-stamp: #3f8a43;
  --ms-dash: rgba(26,58,92,0.22);
  --ms-lines: rgba(139,184,216,0.35);
  --ms-warn: #b45309;
  --ms-warn-ink: #ffffff;
}

/* Torn top edge: an opaque strip above the sheet, cut with clip-path */
.ms-paper { position: relative; margin-top: 16px; background: var(--ms-paper); box-shadow: var(--ms-paper-shadow); border-radius: 0 0 16px 16px; }
.ms-paper::before {
  content: ''; position: absolute; left: 0; right: 0; top: -15px; height: 16px;
  background: var(--ms-paper);
  clip-path: var(--ms-tear, polygon(0% 85%, 4% 45%, 9% 72%, 14% 30%, 19% 60%, 25% 22%, 31% 55%, 37% 18%, 43% 50%, 49% 12%, 55% 46%, 61% 20%, 67% 52%, 73% 26%, 79% 58%, 85% 30%, 91% 62%, 96% 40%, 100% 70%, 100% 100%, 0% 100%));
}

/* Handwritten tags: difficulty · points · words */
.ms-tags {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.1rem 0.55rem;
  font-family: 'Caveat', cursive; font-size: 1.25rem; font-weight: 600; line-height: 1.1;
}
.ms-tag { display: inline-block; }
.ms-tag:nth-child(1) { transform: rotate(-2deg); text-transform: capitalize; }
.ms-tag:nth-child(3) { transform: rotate(1.2deg); }
.ms-tag:nth-child(5) { transform: rotate(-0.6deg); }
.ms-tag.easy { color: var(--ms-hand-easy); }
.ms-tag.medium { color: var(--ms-hand-medium); }
.ms-tag.hard { color: var(--ms-hand-hard); }
.ms-tag.pts { color: var(--ms-hand-pts); }
.ms-tag.words { color: var(--ms-hand-words); }
.ms-tag-dot { font-family: 'Inter', sans-serif; font-size: 0.5rem; align-self: center; color: var(--ms-hand-dot); }
/* Draw cards are narrow: words go on their own line instead of wrapping after a stray dot */
.ms-card .ms-tag.words { flex-basis: 100%; }
.ms-card .ms-tags > :nth-child(4) { display: none; }

/* ── Mission Cards ── */
.ms-cards-row { display: flex; gap: 1.4rem; justify-content: center; align-items: stretch; max-width: 1400px; margin: 0 auto 2rem; }

/* Tilt and lift use the individual rotate/translate properties so they don't fight the flip-in animation's transform */
.ms-card {
  flex: 1;
  max-width: 250px;
  padding: 0.9rem 1.2rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.55rem;
  rotate: -1.6deg;
  transition: rotate 0.3s ease, translate 0.3s ease;
}
.ms-card:nth-child(3n+2) {
  rotate: 0.6deg;
  --ms-tear: polygon(0% 60%, 5% 30%, 10% 64%, 16% 20%, 22% 52%, 28% 14%, 34% 46%, 40% 24%, 46% 58%, 52% 18%, 58% 50%, 64% 10%, 70% 44%, 76% 22%, 82% 56%, 88% 28%, 94% 60%, 100% 38%, 100% 100%, 0% 100%);
}
.ms-card:nth-child(3n) {
  rotate: 1.4deg;
  --ms-tear: polygon(0% 72%, 6% 40%, 11% 68%, 17% 26%, 23% 58%, 29% 32%, 35% 62%, 41% 16%, 47% 48%, 53% 22%, 59% 56%, 65% 28%, 71% 60%, 77% 14%, 83% 46%, 89% 24%, 95% 54%, 100% 30%, 100% 100%, 0% 100%);
}
.ms-card:hover, .ms-card:focus-within { rotate: 0deg; translate: 0 -10px; }

.ms-card-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--hr-heading, #1a3a5c);
  line-height: 1.15;
}

.ms-card-btn {
  width: 100%;
  margin-top: auto;
  padding: 0.65rem;
  border: none;
  border-radius: 11px;
  font-size: 1rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: filter 0.2s;
}
.ms-card-btn.select { background: var(--ms-ink); color: #fff; }
.ms-card-btn.select:hover { filter: brightness(1.15); }

/* ── Below Sky ── */

/* ── Toast: a paper slip with a rubber stamp ── */
.ms-toast {
  position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(120px) rotate(-1deg);
  display: flex; align-items: center; gap: 0.9rem; max-width: calc(100vw - 2rem);
  background: var(--ms-paper); padding: 0.8rem 1.3rem 0.8rem 1rem; border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,40,80,0.2); z-index: 300;
  opacity: 0; transition: transform 0.4s ease, opacity 0.4s ease;
  pointer-events: none;
}
.ms-toast.is-visible { transform: translateX(-50%) translateY(0) rotate(-1deg); opacity: 1; }
.ms-toast p { margin: 0; display: grid; text-align: left; min-width: 0; }
.ms-toast p > span:first-child { font-weight: 700; font-size: 1rem; color: var(--hr-heading, #1a3a5c); }
.ms-toast-sub { font-family: 'Caveat', cursive; font-size: 1.2rem; font-weight: 600; color: var(--hr-muted, #5a7a9a); line-height: 1.1; }
.ms-stamp {
  flex: none; border: 2.5px solid var(--ms-stamp); color: var(--ms-stamp); border-radius: 5px;
  font: 800 0.78rem 'Inter', sans-serif; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.3rem 0.5rem; transform: rotate(-10deg);
  -webkit-mask-image: radial-gradient(circle at 30% 40%, #000 60%, rgba(0,0,0,0.75) 61%);
  mask-image: radial-gradient(circle at 30% 40%, #000 60%, rgba(0,0,0,0.75) 61%);
}
.ms-stamp.red { border-color: var(--ms-red); color: var(--ms-red); }

/* ── Dark Mode ── */
html.dark-theme body.missions-page,
html.dark-theme body.word-counter-page {
  --hr-bg: #0c1929;
  --hr-color: #c5d5e5;
  --hr-heading: #e0eaf4;
  --hr-muted: #8badc8;
  --hr-border: #1e3a55;
  --hr-card-bg: #132d47;
  --hr-card-shadow: 0 2px 12px rgba(0,0,0,0.2);
  --hr-hover-bg: #1a3a55;
  --hr-hero-grad: linear-gradient(180deg, #0c1929 0%, #162d4a 20%, #1e3f64 40%, #2a5a8c 60%, #3a7ab0 80%, #4a90c4 100%);
  --hr-hero-edge: #0c1929;
  --hr-nav-bg: rgba(12,25,41,0.6);
  --hr-nav-brand: #fff;
  --hr-nav-link: #8badc8;
  --ms-paper: #132d47;
  --ms-paper-shadow: 0 12px 34px rgba(0,0,0,0.45);
  --ms-ink: #2a5a8c;
  --ms-hand-easy: #6abf6e;
  --ms-hand-medium: #7aa8f2;
  --ms-hand-hard: #ec86b4;
  --ms-hand-pts: #e0b25a;
  --ms-hand-words: #8badc8;
  --ms-hand-dot: #4a6a8a;
  --ms-strike: #f08a5d;
  --ms-pencil: #3d5b78;
  --ms-red: #f08a5d;
  --ms-red-soft: rgba(240,138,93,0.1);
  --ms-stamp: #7fd083;
  --ms-dash: rgba(224,234,244,0.25);
  --ms-lines: rgba(139,184,216,0.14);
  --ms-warn: #e8a24a;
  --ms-warn-ink: #241605;
}
html.dark-theme .missions-page .hr-stars { display: block; }
html.dark-theme .ms-cloud { background: rgba(255,255,255,0.08); box-shadow: none; }

/* Auto dark mode */
@media (prefers-color-scheme: dark) {
  html:not(.light-theme) body.missions-page,
  html:not(.light-theme) body.word-counter-page {
    --hr-bg: #0c1929;
    --hr-color: #c5d5e5;
    --hr-heading: #e0eaf4;
    --hr-muted: #8badc8;
    --hr-border: #1e3a55;
    --hr-card-bg: #132d47;
    --hr-card-shadow: 0 2px 12px rgba(0,0,0,0.2);
    --hr-hover-bg: #1a3a55;
    --hr-hero-grad: linear-gradient(180deg, #0c1929 0%, #162d4a 20%, #1e3f64 40%, #2a5a8c 60%, #3a7ab0 80%, #4a90c4 100%);
    --hr-hero-edge: #0c1929;
    --hr-nav-bg: rgba(12,25,41,0.6);
    --hr-nav-brand: #fff;
    --hr-nav-link: #8badc8;
    --ms-paper: #132d47;
    --ms-paper-shadow: 0 12px 34px rgba(0,0,0,0.45);
    --ms-ink: #2a5a8c;
    --ms-hand-easy: #6abf6e;
    --ms-hand-medium: #7aa8f2;
    --ms-hand-hard: #ec86b4;
    --ms-hand-pts: #e0b25a;
    --ms-hand-words: #8badc8;
    --ms-hand-dot: #4a6a8a;
    --ms-strike: #f08a5d;
    --ms-pencil: #3d5b78;
    --ms-red: #f08a5d;
    --ms-red-soft: rgba(240,138,93,0.1);
    --ms-stamp: #7fd083;
    --ms-dash: rgba(224,234,244,0.25);
    --ms-lines: rgba(139,184,216,0.14);
    --ms-warn: #e8a24a;
    --ms-warn-ink: #241605;
  }
  html:not(.light-theme) .missions-page .hr-stars { display: block; }
  html:not(.light-theme) .ms-cloud { background: rgba(255,255,255,0.08); box-shadow: none; }
}

/* ── Responsive ── */
@media (max-width: 700px) {
  .ms-cards-row { flex-wrap: wrap; gap: 0.75rem; }
  .ms-card { max-width: 200px; min-width: 160px; }
  .ms-sky { padding: 5.5rem 1rem 7rem; }
}

/* ── v2: draw 3, pick 1 ── */
.missions-page [hidden] { display: none !important; }

/* Active mission: a pinned sheet of the same paper */
.ms-active {
  max-width: 540px;
  margin: 16px auto 2.25rem;
  padding: 0.8rem 1.6rem 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  rotate: -0.4deg;
  border-radius: 0 0 18px 18px;
  --ms-tear: polygon(0% 70%, 3% 40%, 7% 66%, 11% 28%, 15% 58%, 20% 22%, 25% 52%, 30% 18%, 35% 48%, 40% 26%, 45% 56%, 50% 14%, 55% 46%, 60% 24%, 65% 54%, 70% 20%, 75% 50%, 80% 30%, 85% 60%, 90% 34%, 95% 62%, 100% 42%, 100% 100%, 0% 100%);
}
.ms-active-head { width: 100%; display: flex; justify-content: flex-end; align-items: center; gap: 0.75rem; }
.ms-active-title {
  font-family: 'Playfair Display', serif; font-size: 1.6rem; font-weight: 800;
  color: var(--hr-heading, #1a3a5c); line-height: 1.15;
}
.ms-active-desc { margin: 0; max-width: 44ch; font-size: 1rem; line-height: 1.55; color: var(--hr-color, #334155); }
.ms-active .ms-btn-primary { background: var(--ms-ink); }
.ms-active .ms-btn-primary:hover { background: var(--ms-ink); filter: brightness(1.15); }

/* Checks: hand-drawn circles, crossed out once used */
.ms-checks { display: inline-flex; gap: 5px; align-items: center; font-family: 'Caveat', cursive; font-size: 1.1rem; font-weight: 600; color: var(--hr-muted, #5a7a9a); }
.ms-checks svg { width: 18px; height: 18px; }
.ms-checks .ring { fill: none; stroke: var(--ms-strike); stroke-width: 1.8; stroke-linecap: round; }
.ms-checks .cross { stroke: var(--ms-strike); stroke-width: 2; stroke-linecap: round; }
.ms-checks-left { margin-left: 2px; }

.ms-draw { margin-bottom: 1.5rem; }
.ms-draw-label {
  font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--hr-muted, #5a7a9a); margin-bottom: 0.75rem;
}
/* With a mission active, the heading itself is the swap warning, in handwriting */
.ms-draw-label.is-swap { font-family: 'Caveat', cursive; font-size: 1.5rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ms-warn); }
.ms-card-desc {
  margin: 0; font-size: 0.92rem; line-height: 1.45; color: var(--hr-color, #334155);
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.ms-card-drawn { cursor: default; animation: ms-flip-in 0.5s ease both; }
@keyframes ms-flip-in {
  from { opacity: 0; transform: perspective(800px) rotateY(90deg); }
  to { opacity: 1; transform: perspective(800px) rotateY(0); }
}

.ms-deck { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
/* Draw button: the top card of a small deck */
.ms-draw-btn { position: relative; margin: 0.4rem 0 0.2rem; padding: 0; border: none; background: none; cursor: pointer; border-radius: 12px; }
.ms-deck-card { position: absolute; inset: 0; background: var(--ms-paper); border-radius: 12px; box-shadow: var(--ms-paper-shadow); }
.ms-deck-card:nth-child(1) { rotate: -6deg; translate: -6px 4px; }
.ms-deck-card:nth-child(2) { rotate: 4deg; translate: 6px 2px; }
.ms-deck-face {
  position: relative; display: grid; justify-items: center; gap: 0.1rem;
  padding: 0.85rem 1.9rem 0.75rem; border-radius: 12px; border: 2px solid transparent;
  background: var(--ms-ink); color: #fff; box-shadow: 0 8px 20px rgba(26,58,92,0.25);
  transition: translate 0.2s;
}
.ms-deck-face b { font: 700 1.15rem 'Inter', sans-serif; font-variant-numeric: tabular-nums; }
.ms-deck-face span { font-family: 'Caveat', cursive; font-size: 1.15rem; font-weight: 600; opacity: 0.85; }
.ms-draw-btn:hover:not(:disabled) .ms-deck-face { translate: 0 -3px; }
/* One line each, so arming never changes the button's height (long titles are cut with …) */
.ms-deck-face b, .ms-deck-face span { max-width: min(300px, 80vw); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Draw with a mission active: two choices in the deck's place, the note first */
.ms-draw-choice { display: grid; justify-items: center; gap: 0.6rem; align-content: start; padding-top: 0.4rem; }
.ms-draw-choice-note {
  margin: 0; max-width: 34ch; text-wrap: balance;
  font-family: 'Caveat', cursive; font-size: 1.5rem; font-weight: 600; line-height: 1.15; color: var(--ms-warn);
}
.ms-draw-choice .ms-btn-warn { background: var(--ms-warn); color: var(--ms-warn-ink); padding: 0.75rem 1.3rem; border-radius: 12px; font-size: 1rem; font-weight: 700; box-shadow: 0 8px 20px rgba(180,83,9,0.25); }
.ms-draw-choice .ms-btn-warn:hover { filter: brightness(1.08); }
.ms-draw-choice .ms-btn-paper { background: var(--ms-paper); color: var(--hr-heading, #1a3a5c); padding: 0.75rem 1.3rem; border-radius: 12px; font-size: 1rem; font-weight: 700; box-shadow: var(--ms-paper-shadow); }
.ms-draw-choice .ms-btn-paper:hover { translate: 0 -2px; }
/* Cooling down: the top card goes blank */
.ms-draw-btn:disabled { cursor: default; }
.ms-draw-btn:disabled .ms-deck-face { background: var(--ms-paper); color: var(--hr-muted, #5a7a9a); border-color: var(--ms-dash); border-style: dashed; box-shadow: var(--ms-paper-shadow); }
.ms-draw-btn:focus-visible, .ms-btn:focus-visible, .ms-card-btn:focus-visible { outline: 3px solid #8bb8d8; outline-offset: 4px; }

/* Draws left as tally marks */
.ms-tally { position: relative; display: grid; justify-items: center; gap: 0.1rem; }

/* ⓘ and the rules card it opens */
.ms-info-btn {
  display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; margin-left: 0.2rem; padding: 0;
  border: 1.5px solid currentColor; border-radius: 50%; background: transparent; color: inherit; cursor: pointer;
  font: italic 700 0.8rem 'Playfair Display', serif; line-height: 1; vertical-align: 0.15em;
}
.ms-info-btn:hover, .ms-info-btn[aria-expanded="true"] { color: var(--hr-heading, #1a3a5c); }
.ms-info-btn:focus-visible { outline: 3px solid #8bb8d8; outline-offset: 2px; }
.ms-info {
  /* Opens upward: .ms-sky clips overflow, and the tally sits near its bottom edge */
  position: absolute; bottom: calc(100% + 10px); left: 50%; translate: -50% 0; z-index: 20;
  width: min(290px, 86vw); padding: 0.8rem 1.1rem 1rem; rotate: -0.6deg; text-align: left;
}
.ms-info-title { margin: 0 0 0.35rem; font-family: 'Caveat', cursive; font-size: 1.4rem; font-weight: 700; color: var(--hr-heading, #1a3a5c); }
.ms-info ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.35rem; font-size: 0.9rem; line-height: 1.45; color: var(--hr-color, #334155); }
.ms-info b { color: var(--hr-heading, #1a3a5c); }
/* backgroundstyle.css styles every `ul li` as an old nav item (white text, floated right, 200px wide); undo it here */
.ms-info ul li { float: none; width: auto; position: static; color: inherit; }
.ms-tally svg { width: 64px; height: 34px; }
.ms-tally path { fill: none; stroke-linecap: round; }
.ms-tally .used { stroke: var(--hr-heading, #1a3a5c); stroke-width: 2.6; }
.ms-tally .left { stroke: var(--ms-pencil); stroke-width: 2.2; stroke-dasharray: 3 3; }
.ms-deck-meta { margin: 0; font-family: 'Caveat', cursive; font-size: 1.3rem; font-weight: 600; color: var(--hr-muted, #5a7a9a); }

.ms-confirm-actions { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }
.ms-btn {
  font-family: 'Inter', sans-serif; font-size: 0.98rem; font-weight: 600;
  padding: 0.55rem 1.2rem; border-radius: 10px; border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none; display: inline-block;
}
.ms-btn-primary { background: #5a8f5c; color: #fff; }
.ms-btn-primary:hover { background: #4a7a4c; text-decoration: none; }
/* home-redesign.css forces `a { color: inherit !important }`; the navbar overrides it the same way */
body.missions-page a.ms-btn-primary,
body.missions-page a.ms-btn-primary:visited,
body.missions-page a.ms-btn-primary:hover { color: #fff !important; text-decoration: none; }
.ms-btn-ghost { background: transparent; color: var(--hr-heading, #1a3a5c); border-color: rgba(26,58,92,0.25); }
.ms-btn-ghost:hover { background: rgba(26,58,92,0.06); }
.ms-btn-danger { background: #c2410c; color: #fff; }
.ms-btn-danger:hover { background: #9a3412; }

/* Empty deck: a blank lined page */
.ms-empty {
  max-width: 320px; margin: 1.75rem auto 0; padding: 1.2rem 1.2rem 1.4rem; rotate: -1deg;
  background-image: repeating-linear-gradient(180deg, transparent 0 27px, var(--ms-lines) 27px 28px);
  background-origin: content-box;
}
.ms-empty p { margin: 0; font-family: 'Caveat', cursive; font-size: 1.45rem; font-weight: 600; line-height: 28px; color: var(--hr-heading, #1a3a5c); }
.ms-empty p + p { font-size: 1.25rem; color: var(--hr-muted, #5a7a9a); }

/* Errors: a red-pen note */
.ms-error {
  max-width: 460px; margin: 1rem auto 0; padding: 0.35rem 0.9rem; border-radius: 6px; rotate: -0.5deg;
  display: flex; gap: 0.5rem; align-items: center; justify-content: center;
  background: var(--ms-red-soft); color: var(--ms-red);
  font-family: 'Caveat', cursive; font-size: 1.35rem; font-weight: 600; line-height: 1.2;
}
.ms-error svg { width: 22px; height: 22px; flex: none; }
.ms-error path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

@media (prefers-reduced-motion: reduce) {
  .ms-card-drawn { animation: none; }
  .ms-card { transition: none; }
  .ms-deck-face, .ms-toast { transition: none; }
  .ms-card:hover, .ms-card:focus-within { translate: none; }
}

/* v2 dark mode (explicit toggle + system setting) */
html.dark-theme .ms-btn-ghost { color: #e0eaf4; border-color: rgba(224,234,244,0.3); }
html.dark-theme .ms-btn-ghost:hover { background: rgba(255,255,255,0.08); }
@media (prefers-color-scheme: dark) {
  html:not(.light-theme) .ms-btn-ghost { color: #e0eaf4; border-color: rgba(224,234,244,0.3); }
  html:not(.light-theme) .ms-btn-ghost:hover { background: rgba(255,255,255,0.08); }
}

@media (max-width: 700px) {
  .ms-active { padding: 0.8rem 1rem 1.1rem; }
  .ms-card { max-width: none; min-width: 0; flex: 1 1 100%; }
}