/* Mosaic: bone ground, deep brown ink, terracotta accents. */
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/mosaic/fonts/instrument-serif.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/mosaic/fonts/instrument-serif-italic.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/mosaic/fonts/geist.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("/mosaic/fonts/geist-mono.woff2") format("woff2"); }

:root {
  --bone: #f1efea; --card: #fbfaf7; --paper: #fbfbf9; --ink: #261a12; --ink-2: #5a4a3e; --muted: #6f6157;
  --line: rgba(38, 26, 18, 0.12); --clay: #a05332; --deep: #7c3b22; --sand: #e6ddd0; --tint: #efe8de; --tint-2: #f1ebe2;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bone); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--deep); } a:hover { color: var(--ink); }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--deep); outline-offset: 2px; }
[hidden] { display: none !important; }
.mz-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- frame ---------- */
.mz { min-height: 100vh; }
.mz-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; max-width: 1360px; margin: 0 auto; padding: 20px 32px; }
.mz-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.mz-brand span { font: 400 34px/1 var(--serif); }
.mz-brand circle { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.mz-brand circle.mz-accent { stroke: var(--clay); }
.mz-account { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.mz-tag { padding: 6px 12px; border-radius: 999px; border: 1px dashed rgba(38, 26, 18, 0.4); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.mz-main { max-width: 1360px; margin: 0 auto; padding: 0 32px 40px; display: flex; flex-direction: column; gap: 56px; }
.mz-foot { max-width: 1360px; margin: 0 auto; padding: 24px 32px 56px; font-size: 13px; color: var(--muted); }
.mz-loading { padding: 80px 0; font: 400 28px var(--serif); color: var(--ink-2); }
@media (max-width: 720px) { .mz-top, .mz-main, .mz-foot { padding-left: 16px; padding-right: 16px; } }

/* ---------- type, cards, controls ---------- */
.mz-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.mz-h1 { font: 400 clamp(44px, 5.6vw, 78px)/0.98 var(--serif); letter-spacing: -0.01em; }
.mz-h2 { font: 400 clamp(32px, 3.6vw, 48px)/1.05 var(--serif); }
.mz-h3 { font: 400 30px/1.1 var(--serif); }
.mz-tagline { font: italic 400 22px var(--serif); color: var(--clay); }
.mz-lede { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); max-width: 720px; }
.mz-small { font-size: 13px; line-height: 1.5; color: var(--muted); }
.mz-serif { font-family: var(--serif); font-weight: 400; }
.mz-mono { font-family: var(--mono); }
.mz-head { display: flex; flex-direction: column; gap: 8px; }
.mz-headrow { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.mz-card { background: var(--card); border: 1px solid rgba(38, 26, 18, 0.1); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 420px), 100%), 1fr)); gap: 20px; align-items: start; }
.mz-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mz-confirm { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid rgba(38, 26, 18, 0.1); padding-top: 12px; }
.mz-scroll { overflow-x: auto; }
.mz-btn, .mz-btn2 { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 999px; font-size: 14.5px; font-weight: 600; text-decoration: none; }
.mz-btn { border: 0; background: var(--ink); color: var(--card); }
.mz-btn:hover { color: var(--card); background: #3b2a1f; }
.mz-btn2 { border: 1px solid rgba(38, 26, 18, 0.22); background: transparent; color: var(--ink); }
.mz-pill { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(38, 26, 18, 0.18); background: var(--card); font-size: 13.5px; font-weight: 600; }
.mz-pill.is-yes { background: #e3eee5; border-color: #9cc3a7; color: #1c4a2b; }
.mz-pill.is-no { background: #f5e3dc; border-color: #d9a493; color: #6b2414; }
.mz-pill.is-mid { background: #f4ecd8; border-color: #d4bd85; color: #5c4513; }
.mz-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--c, var(--ink)); }

/* ---------- hero ---------- */
.mz-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap: 24px; }
.mz-portrait { display: flex; flex-direction: column; gap: 20px; padding-top: 14px; }
.mz-portrait-text { font: 400 clamp(22px, 2.2vw, 28px)/1.38 var(--serif); color: #3b2c22; text-wrap: pretty; }
.mz .v3-stage { background: transparent; }
.mz-picture { padding: 0 8px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mz-rosette { position: relative; }
.mz-rosette .v3-label { transition: opacity 0.25s; }
.mz-rosette .v3-label.is-hoverable { cursor: pointer; }
.mz-rosette.has-focus .v3-label:not(.is-lit) { opacity: 0.35; }
.mz-picture-cap { min-height: 1.5em; text-align: center; }
.mz-picture-foot { justify-content: center; gap: 6px 10px; font-size: 14px; }
.mz-picture-foot .mz-big { font-size: 44px; }
.mz-nudge-inline { color: var(--ink-2); }
.mz-arch { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; border-left: 3px solid var(--clay); background: var(--tint); border-radius: 0 14px 14px 0; }
.mz-arch-name { font: italic 400 30px/1.1 var(--serif); }
.mz-big { font: 400 60px/1 var(--serif); }
/* ---------- patterns ---------- */
.mz-patterns-head { align-items: flex-end; }
.mz-switch { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 8px; border-radius: 999px; border: 1px solid rgba(38, 26, 18, 0.16); background: var(--card); font-size: 14px; font-weight: 600; }
.mz-trk { position: relative; width: 36px; height: 22px; border-radius: 11px; background: #d9cfc2; transition: background 0.2s; }
.mz-trk::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--card); box-shadow: 0 1px 2px rgba(38, 26, 18, 0.25); transition: transform 0.2s; }
.mz-switch[aria-checked="true"] .mz-trk { background: var(--ink); }
.mz-switch[aria-checked="true"] .mz-trk::after { transform: translateX(14px); }
.mz-tile-area { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.mz-tile-status { font-size: 12px; font-weight: 500; color: var(--muted); }
.mz-tile-why { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid rgba(38, 26, 18, 0.12); font-size: 12.5px; line-height: 1.45; }
.mz-tile-why b { font-weight: 600; }
.mz-tile-why q { font: italic 400 16px/1.35 var(--serif); color: #3b2c22; quotes: none; }
.mz-tile-note { color: var(--ink-2); }
.mz-tile-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.mz-why { min-height: 40px; padding: 0; border: 0; background: transparent; font-size: 13px; font-weight: 600; color: inherit; text-decoration: underline; text-decoration-color: rgba(38, 26, 18, 0.28); text-underline-offset: 4px; }
.mz-blind { display: grid; align-content: start; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 20px; padding: 26px; border-radius: 24px; background: #f6efe4; }
.mz-blind-title { font-size: 32px; line-height: 1.1; }
.mz-hypo { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; border-radius: 16px; border: 1px dashed rgba(124, 59, 34, 0.45); background: var(--card); transition: opacity 0.2s; }
.mz-hypo.is-dim { opacity: 0.55; }
.mz-hypo-text { font: 400 23px/1.25 var(--serif); text-wrap: pretty; }
/* ---------- sources ---------- */
.mz-cov { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); column-gap: 28px; }
.mz-cov li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 10px 4px; border-top: 1px solid rgba(38, 26, 18, 0.08); }
.mz-cov b { font-size: 14px; font-weight: 600; }
.mz-cov span { font-size: 12.5px; color: var(--ink-2); }
.mz-cov .mz-mono { font-size: 12.5px; text-align: right; }

/* ---------- control ---------- */
.mz-review { display: flex; flex-direction: column; max-height: 520px; overflow-y: auto; }
.mz-review li { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 12px 4px; border-top: 1px solid rgba(38, 26, 18, 0.08); }
.mz-review li.is-out { opacity: 0.55; }
.mz-review b { font-size: 14px; font-weight: 600; display: block; }
.mz-review p { font-size: 13px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mz-notice { padding: 14px 16px; border-radius: 12px; background: #f5e3dc; color: #6b2414; font-size: 14px; }

/* ---------- building your Mosaic ---------- */
.mz.is-building
.mz-build { display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 18px; text-align: center; }
.mz-build .mz-h1 { max-width: 860px; text-wrap: balance; }
.mz-build .mz-lede { max-width: 620px; }
.mz-build-sheet { width: min(100%, 900px); }
.mz-build-list { width: 100%; max-width: 720px; text-align: left; }
.mz-build-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 4px; border-top: 1px solid var(--line); transition: opacity 0.3s; }
.mz-build-list b { font-size: 15.5px; font-weight: 600; }
.mz-build-list li.is-waiting { opacity: 0.55; }
.mz-build-state { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.is-read .mz-build-state { color: #1c4a2b; }
.is-reading .mz-build-state { color: var(--deep); }
.mz-run { position: relative; overflow: hidden; display: block; width: 72px; height: 4px; border-radius: 2px; background: rgba(38, 26, 18, 0.12); }
.mz-run::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; border-radius: 2px; background: var(--clay); animation: mz-run 1.2s ease-in-out infinite; }
@keyframes mz-run { from { left: -40%; } to { left: 100%; } }
.mz-first { width: 100%; max-width: 720px; margin-top: 10px; padding: 26px 28px; border-radius: 24px; text-align: left; display: flex; flex-direction: column; gap: 16px; box-shadow: inset 0 0 0 1px rgba(38, 26, 18, 0.08); animation: mz-in 0.6s ease-out both;
  background: radial-gradient(120% 110% at 0% 0%, color-mix(in srgb, var(--c) 19%, transparent) 0%, transparent 58%), radial-gradient(80% 70% at 100% 100%, color-mix(in srgb, var(--c) 11%, transparent) 0%, transparent 62%), var(--card); }
.mz-first-text { font: 400 clamp(30px, 4vw, 40px)/1.02 var(--serif); letter-spacing: -0.012em; text-wrap: balance; }
.mz-build-note { max-width: 620px; animation: mz-in 0.6s ease-out both; }
.mz-build-cta { justify-content: center; padding-top: 8px; }
@keyframes mz-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.mz-link { min-height: 44px; padding: 0; border: 0; background: transparent; font-size: 14px; font-weight: 600; color: var(--ink-2); text-decoration: underline; text-underline-offset: 4px; }
.mz-deck { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 56px; align-items: start; padding-top: 18px; }
.mz-deck-side { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.mz-answered { width: 100%; }
.mz-answered li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(38, 26, 18, 0.08); font-size: 14px; line-height: 1.35; }
.mz-answered li span:last-child { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
.mz-deck-main { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.mz-deck-stack { display: grid; width: min(100%, 580px); }
.mz-deck-card { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 540px; padding: 34px 36px; border-radius: 28px; box-shadow: 0 10px 30px rgba(38, 26, 18, 0.1);
  background: radial-gradient(120% 110% at 0% 0%, color-mix(in srgb, var(--c) 19%, transparent) 0%, transparent 58%), radial-gradient(80% 70% at 100% 100%, color-mix(in srgb, var(--c) 11%, transparent) 0%, transparent 62%), var(--card); }
.mz-deck-card.b1 { transform: rotate(2.5deg) translate(12px, 4px); }
.mz-deck-card.b2 { transform: rotate(5deg) translate(26px, 10px); }
.mz-deck-card.is-front { position: relative; z-index: 1; box-shadow: 0 24px 60px rgba(38, 26, 18, 0.18), inset 0 0 0 1px rgba(38, 26, 18, 0.06); animation: mz-deal 0.35s ease-out; }
.mz-deck-card.is-end { --c: #a05332; justify-content: center; }
@keyframes mz-deal { from { transform: translateY(14px) rotate(-1deg); } }
.mz-deck-text { font: 400 clamp(40px, 4.6vw, 60px)/1 var(--serif); letter-spacing: -0.015em; text-wrap: balance; }
.mz-deck-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.mz-deck-actions .mz-btn, .mz-deck-actions .mz-btn2 { min-height: 52px; padding: 0 26px; font-size: 15px; }
@media (max-width: 900px) {
  .mz-deck { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .mz-deck-card { min-height: 0; padding: 26px 24px; }
  .mz-deck-card.is-behind { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mz-run::after { animation: none; left: 0; width: 60%; }
  .mz-first, .mz-build-note, .mz-deck-card.is-front { animation: none; }
}

/* ---------- six lines ---------- */
.mz-lines { display: flex; flex-direction: column; }
.mz-line { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 10px 28px; align-items: start; padding: 22px 12px; border-top: 1px solid var(--line); border-radius: 4px; transition: background 0.2s, opacity 0.2s; }
.mz-line:last-child { border-bottom: 1px solid var(--line); }
.mz-line.is-lit { background: color-mix(in srgb, var(--c) 9%, transparent); }
.mz-line.is-dim { opacity: 0.55; }
.mz-line-area { display: inline-flex; align-items: center; gap: 8px; padding-top: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.mz-line-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mz-line-text { font: 400 clamp(26px, 2.6vw, 34px)/1.1 var(--serif); letter-spacing: -0.01em; text-wrap: pretty; }
.mz-line-text.is-blank { font-size: 20px; color: var(--muted); }
.mz-line-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
@media (max-width: 820px) {
  .mz-line { grid-template-columns: minmax(0, 1fr); padding: 18px 4px; }
  .mz-line-area { padding-top: 0; }
  .mz-line-side { align-items: flex-start; }
}

/* ---------- questions and blind spots ---------- */
.mz-ask { align-items: stretch; }
.mz-qs { display: flex; flex-direction: column; gap: 12px; }
.mz-q { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 1px rgba(38, 26, 18, 0.08), inset 4px 0 0 var(--c); transition: box-shadow 0.2s; }
.mz-q.is-lit { box-shadow: inset 0 0 0 1.5px var(--c), inset 4px 0 0 var(--c); }
.mz-q.is-done { opacity: 0.75; }
.mz-q-text { font: 400 24px/1.2 var(--serif); text-wrap: pretty; }
.mz-answer { width: 100%; padding: 12px 14px; border: 1px solid rgba(38, 26, 18, 0.18); border-radius: 12px; background: var(--paper); font: 15px/1.5 var(--sans); color: var(--ink); resize: vertical; }
.mz-sources summary { cursor: pointer; padding: 8px 0; font-size: 14px; font-weight: 600; }
.mz-sources[open] { display: flex; flex-direction: column; gap: 12px; }

/* ---------- atlas ---------- */
.mz-map-stats { display: flex; gap: 28px; }
.mz-map-stats > div { display: flex; flex-direction: column; align-items: flex-end; }
.mz-map-big { font: 400 64px/0.95 var(--serif); font-variant-numeric: tabular-nums; }
.mz-map-card { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 18px; padding: 14px; border-radius: 24px; background: var(--card); box-shadow: inset 0 0 0 1px rgba(38, 26, 18, 0.08); }
.mz-map-frame { position: relative; overflow: hidden; border-radius: 16px; background: #e9eef0; touch-action: none; }
.mz-map { display: block; width: 100%; height: auto; cursor: grab; user-select: none; }
.mz-map:active { cursor: grabbing; }
.mz-map-land path { fill: #f7f3ec; stroke: #c9bdb0; stroke-width: 0.6px; vector-effect: non-scaling-stroke; transition: fill 0.25s; cursor: pointer; }
.mz-map-land path:hover { fill: #ecd2c1; }
.mz-map-land path.is-on { fill: var(--clay); stroke: var(--deep); }
.mz-map-land path.is-on:hover { fill: var(--deep); }
.mz-map-land path:focus, .mz-map-dot:focus { outline: none; }
.mz-map-land path:focus-visible { stroke: var(--ink); stroke-width: 2px; }
.mz-map-dot { fill: #f7f3ec; stroke: #a99a8b; stroke-width: 0.8px; vector-effect: non-scaling-stroke; cursor: pointer; transform-box: fill-box; transform-origin: center; transform: scale(calc(1 / var(--k, 1))); }
.mz-map-dot.is-on { fill: var(--clay); stroke: var(--deep); }
.mz-map-labels text { font: 600 calc(11px * var(--ls, 1) / var(--k, 1)) var(--sans); fill: var(--ink-2); text-anchor: middle; dominant-baseline: middle; pointer-events: none; paint-order: stroke; stroke: rgba(247, 243, 236, 0.85); stroke-width: calc(3px / var(--k, 1)); }
.mz-pop { fill: none; stroke: var(--clay); stroke-width: 2px; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; animation: mz-pop 0.85s ease-out forwards; pointer-events: none; }
@keyframes mz-pop { from { transform: scale(calc(1 / var(--k, 1))); opacity: 1; } to { transform: scale(calc(9 / var(--k, 1))); opacity: 0; } }
.mz-zooms { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; }
.mz-zoom { width: 40px; height: 40px; border: 1px solid rgba(38, 26, 18, 0.16); border-radius: 10px; background: var(--card); font-size: 18px; line-height: 1; }
.mz-map-hint { position: absolute; left: 12px; bottom: 10px; font-size: 12px; color: var(--muted); pointer-events: none; }
.mz-map-side { display: flex; flex-direction: column; gap: 14px; padding: 6px 4px; }
.mz-find { width: 100%; min-height: 44px; padding: 0 14px; border: 1px solid rgba(38, 26, 18, 0.18); border-radius: 999px; background: var(--paper); }
.mz-conts { display: flex; flex-wrap: wrap; gap: 6px; }
.mz-mine { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; max-height: 168px; overflow-y: auto; }
.mz-mine:empty { display: none; }
.mz-mine-x { font: inherit; font-size: 13px; min-height: 36px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--clay); background: transparent; color: var(--deep); cursor: pointer; }
.mz-mine-x span { color: var(--muted); }
.mz-mine-x:hover, .mz-mine-x:focus-visible { background: var(--clay); color: var(--card); }
.mz-mine-x:hover span, .mz-mine-x:focus-visible span { color: inherit; }
.mz-cont { padding: 6px 11px; border-radius: 999px; border: 1px dashed rgba(38, 26, 18, 0.3); font-size: 12.5px; color: var(--muted); transition: background 0.3s, color 0.3s; }
.mz-cont.is-on { border-style: solid; border-color: var(--clay); background: var(--clay); color: var(--card); }
.mz-map-toast { min-height: 3em; font: italic 400 21px/1.25 var(--serif); color: var(--deep); }
.mz-map-toast.is-on { animation: mz-in 0.4s ease-out both; }
.mz-map-stats .mz-map-big { transition: color 0.3s; }
/* Bigger map: stays on the page, spreads to the full width of the window and grows taller. */
.mz-map-card.is-full { width: var(--wide-w, 100%); margin-left: var(--wide-ml, 0); grid-template-columns: minmax(0, 1fr) 280px; }
.mz-map-card.is-full .mz-map { height: min(78vh, calc((100vw - 400px) * 0.55)); }
@media (max-width: 900px) {
  .mz-map-card.is-full { grid-template-columns: minmax(0, 1fr); }
  .mz-map-card.is-full .mz-map { height: 68vh; height: 68svh; }
}
.mz-map-tip { position: absolute; z-index: 2; padding: 4px 9px; border-radius: 8px; background: var(--ink); color: var(--card); font-size: 12.5px; font-weight: 600; white-space: nowrap; pointer-events: none; transform: translate(-50%, calc(-100% - 10px)); }
@media (max-width: 900px) {
  .mz-map-card { grid-template-columns: minmax(0, 1fr); padding: 8px; }
  .mz-map-big { font-size: 48px; }
  .mz-map-hint { display: none; }
}

/* ---------- tastes ---------- */
.mz-shelves { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 14px; }
.mz-shelf { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 1px rgba(38, 26, 18, 0.08); }
.mz-shelf-top { display: flex; justify-content: space-between; align-items: baseline; font: 400 24px/1.1 var(--serif); }
.mz-shelf-top b { font-size: 13px; font-weight: 500; color: var(--muted); }
.mz-shelf li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid rgba(38, 26, 18, 0.08); font-size: 14px; }
.mz-shelf em { font-style: normal; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .mz-pop, .mz-map-toast.is-on { animation: none; } }

/* The rosette stage is drawn at 1280px and scaled down, so its labels are set large to read at page size. */
.mz-rosette .ctxr { overflow: visible !important; }
.mz-rosette .v3-label-name { font: 400 34px/38px var(--serif); margin-top: -19px; color: var(--ink); }
.mz-rosette .v3-label-bar { gap: 10px; margin: 8px 0 6px; }
.mz-rosette .v3-label-track { width: 120px; height: 9px; border-radius: 5px; }
.mz-rosette .v3-label-track i { border-radius: 5px; background: var(--c, var(--ink)); box-shadow: none; }
.mz-rosette .v3-label-bar b { font: 500 19px/1 var(--mono); color: var(--ink-2); }
.mz-rosette .v3-label-cap { font: italic 400 18px/1.25 var(--serif); color: var(--muted); }
.mz-rosette .v3-label.is-lit .v3-label-name { color: var(--c, var(--ink)); }

/* ---------- add to your Mosaic ---------- */
.mz-add { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: 24px; background: var(--card); box-shadow: inset 0 0 0 1px rgba(38, 26, 18, 0.08); }
.mz-add-form { display: flex; flex-direction: column; gap: 14px; }
.mz-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.mz-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.mz-field input { min-height: 44px; padding: 0 14px; border: 1px solid rgba(38, 26, 18, 0.18); border-radius: 12px; background: var(--paper); font-size: 15px; font-weight: 400; color: var(--ink); }
.mz-add-status { min-height: 1.5em; color: var(--ink-2); }
.mz-btn:disabled, .mz-btn2:disabled { opacity: 0.55; cursor: progress; }

/* ---------- archetype ---------- */
.mz-arch { gap: 8px; }
.mz-arch.is-forming { border-left-style: dashed; }
.mz-arch-why { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mz-arch-why li { display: grid; grid-template-columns: minmax(0, 110px) 1fr; gap: 10px; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.mz-arch-src { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--clay); padding-top: 2px; }
.mz-linkbtn { border: 0; background: none; padding: 0 4px; min-height: 44px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--deep); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mz-arch-pick { display: flex; flex-direction: column; gap: 8px; }
.mz-arch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 8px; }
.mz-arch-opt { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); cursor: pointer; font: inherit; }
.mz-arch-opt b { font: italic 400 20px/1.15 var(--serif); }
.mz-arch-opt span { display: block; font-size: 12.5px; color: var(--muted); }
.mz-arch-opt:hover { border-color: var(--clay); }

/* ---------- blind card test ---------- */
.mz-compare { max-width: 1040px; }
.mz-compare-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mz-icard { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 22px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(38, 26, 18, .05); animation: mz-qin .35s ease both; }
.mz-icard.is-picked { box-shadow: inset 0 0 0 2px var(--ink); }
.mz-icard-title { margin: 0; font: italic 400 28px/1.1 var(--serif); }
.mz-icard-insight { margin: 0; font-size: 16px; line-height: 1.5; }
.mz-icard-q { margin: 0; font: italic 400 19px/1.3 var(--serif); color: var(--deep); }
.mz-icard-foot { margin-top: auto; justify-content: space-between; }
.mz-compare-note { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(38, 26, 18, .18); background: var(--paper); font: inherit; font-size: 15px; resize: vertical; }
@media (max-width: 720px) { .mz-compare-cards { grid-template-columns: 1fr; } }
.mz-icard .mz-linkbtn { align-self: flex-start; padding: 0; }

/* ---------- guided start ---------- */
.mz-onboard { max-width: 980px; justify-content: flex-start; }
.mz-steps { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; counter-reset: s; }
.mz-steps li { counter-increment: s; font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 6px 12px; border-radius: 999px; background: var(--tint); }
.mz-steps li::before { content: counter(s) "  "; }
.mz-steps li.is-now { background: var(--ink); color: var(--card); }
.mz-steps li.is-done { color: var(--deep); }
.mz-onboard-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--ink-2); }
.mz-onboard #atlas > .mz-headrow .mz-eyebrow { display: none; }
.mz-qprompt { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.12; }

/* ---------- tell me about myself ---------- */
.mz-readout.mz-head { display: flex; flex-direction: column; gap: 18px; }
.mz-readout-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 14px; }
.mz-readout-missing ul { margin: 6px 0 0; padding-left: 18px; color: var(--ink-2); line-height: 1.6; }
.mz-readout-verdict { display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
.mz-readout-verdict .mz-h3 { margin: 0; font: italic 400 24px/1.2 var(--serif); }

/* ---------- in your words ---------- */
.mz-select { min-height: 44px; padding: 0 44px 0 14px; border: 1px solid rgba(38, 26, 18, 0.18); border-radius: 12px; font-size: 15px; color: var(--ink); appearance: none; -webkit-appearance: none; background: var(--paper); }

/* ---------- v2: links step, types, words, archetype, values quiz ---------- */
.mz-add-links { display: flex; flex-direction: column; gap: 12px; }
.mz-add-links + .mz-add-links { padding-top: 22px; border-top: 1px solid var(--line); }
.mz-add-links .mz-h3 { font: italic 400 24px/1.15 var(--serif); }
.mz-starters { display: flex; flex-direction: column; gap: 6px; }
.mz-starters li { font: italic 400 21px/1.3 var(--serif); color: var(--ink-2); }
.mz-starters li::before { content: '· '; color: var(--clay); }
.mz-words-box { min-height: 160px; }
.mz-readout-slow { margin: -8px 0 0; }

.mz-arch { gap: 10px; padding: 18px 20px; }
.mz-arch.is-forming { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.mz-arch-top { display: flex; align-items: center; gap: 14px; }
.mz-arch-top > div { display: flex; flex-direction: column; gap: 2px; }
.mz-arch-emblem { flex: none; width: 56px; height: 56px; fill: none; stroke: var(--clay); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mz-arch-at { font: italic 400 21px/1.35 var(--serif); color: var(--ink); max-width: 60ch; }
.mz-arch-facets { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; font-size: 14.5px; line-height: 1.4; }
.mz-arch-facets dt { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--clay); padding-top: 3px; }
.mz-arch-facets dd { margin: 0; color: var(--ink-2); }
.mz-arch-redo { align-self: flex-start; font-size: 13px; color: var(--muted); }

.mz-picture { overflow-x: clip; }
.mz-rosette .v3-label-cap { overflow-wrap: anywhere; }

/* ---------- sign in ---------- */
.mz-gate { max-width: 520px; padding: 48px 0 24px; display: flex; flex-direction: column; gap: 18px; }
.mz-gate-form { display: flex; flex-direction: column; gap: 16px; }
.mz-gate-form .mz-field input { font-size: 16px; }
.mz-field-label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mz-field-saved { font-size: 12px; font-weight: 600; color: #3f6b3a; letter-spacing: 0.01em; }
.mz-field input.is-saved { border-color: rgba(63, 107, 58, 0.45); background: #f4f7f0; }
.mz-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--ink-2); cursor: pointer; }
.mz-consent input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--ink); }
.mz-gate-status:empty { display: none; }
.mz-gate > a { align-self: flex-start; }

/* ---------- guided start ---------- */
.mz-plan { list-style: none; margin: 0; padding: 0; counter-reset: p; display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.mz-plan li { counter-increment: p; display: grid; grid-template-columns: 28px 1fr; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.mz-plan li::before { content: counter(p); font: 500 13px/1.9 var(--mono); color: var(--clay); }
.mz-plan b { color: var(--ink); font-weight: 600; margin-right: 4px; }
.mz-onboard-foot { padding-top: 8px; gap: 14px; }
.mz-onboard .mz-prompts { max-width: 760px; }

/* ---------- what you've shared ---------- */
.mz-shared { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.mz-shared-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.mz-shared-mark { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(38, 26, 18, 0.22); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--card); }
.mz-shared-row.is-done .mz-shared-mark { background: var(--clay); border-color: var(--clay); }
.mz-shared-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mz-shared-body b { font: 400 22px/1.2 var(--serif); }
.mz-shared-body .mz-small { overflow-wrap: anywhere; }
.mz-shared-editor { grid-column: 2 / -1; padding: 12px 0 8px; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.mz-shared-editor .mz-h2 { font-size: 28px; }
@media (max-width: 560px) { .mz-shared-row { grid-template-columns: 28px minmax(0, 1fr); } .mz-shared-row > .mz-btn2 { grid-column: 2; justify-self: start; } .mz-shared-editor { grid-column: 1 / -1; } }

/* ---------- your read ---------- */
.mz-pending { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 16px; background: var(--tint); max-width: 720px; }
.mz-status-line { font-size: 17px; }

/* ---------- ask your AI ---------- */
.mz-prompts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.mz-prompt { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; border-radius: 16px; background: var(--paper); box-shadow: inset 0 0 0 1px rgba(38, 26, 18, 0.08); min-width: 0; }
.mz-prompt-top { display: flex; gap: 12px; align-items: baseline; }
.mz-prompt-top > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mz-prompt-num { font: 500 13px var(--mono); color: var(--clay); }
.mz-prompt-title { font: 400 24px/1.15 var(--serif); }
.mz-prompt-depth { font: italic 400 17px/1.3 var(--serif); color: var(--clay); }
.mz-prompt-ask { font-size: 14.5px; color: var(--ink-2); }
.mz-prompt-full { margin: 0; padding: 12px 14px; border-left: 3px solid var(--clay); background: var(--card); border-radius: 0 10px 10px 0; font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.mz-prompt .mz-linkbtn { padding: 0; }

/* ---------- values quiz ---------- */
.mz-quiz { max-width: 760px; margin: 0 auto; width: 100%; min-height: 70vh; padding: 32px 0 24px; display: flex; flex-direction: column; gap: 22px; justify-content: flex-start; }
.mz-onboard { max-width: 980px; }
.mz-qbars { display: flex; gap: 6px; }
.mz-qbars i { flex: 1; height: 3px; border-radius: 3px; background: var(--line); transition: background .3s; }
.mz-qbars i.is-on { background: var(--clay); }
.mz-qcard { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: clamp(22px, 5vw, 40px); display: flex; flex-direction: column; gap: 24px; animation: mz-qin .3s ease both; }
.mz-qnum { font: 500 12px var(--mono); color: var(--muted); letter-spacing: .06em; }
.mz-qtext { font: 400 clamp(26px, 4.4vw, 36px)/1.18 var(--serif); text-wrap: balance; }
.mz-scale { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.mz-scale-step { aspect-ratio: 1; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: transparent; display: grid; place-items: center; transition: transform .15s, background .2s, border-color .2s; }
.mz-scale-dot { width: calc(28% + var(--s) * 7%); aspect-ratio: 1; border-radius: 50%; background: var(--clay); opacity: calc(0.18 + var(--s) * 0.13); transition: opacity .2s; }
.mz-scale-step:hover { transform: scale(1.06); border-color: var(--clay); }
.mz-scale-step.is-picked { background: rgba(160, 83, 50, 0.14); border-color: var(--clay); }
.mz-scale-step.is-picked .mz-scale-dot { opacity: 1; }
.mz-qends { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted); }
.mz-qfoot { justify-content: space-between; gap: 12px; }
.mz-quiz-hero { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; }
.mz-quiz-end .mz-arch-emblem { width: 104px; height: 104px; stroke-width: 1.4; }
@keyframes mz-qin { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 560px) { .mz-scale { gap: 6px; } .mz-quiz-hero { grid-template-columns: 1fr; } .mz-qends { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .mz-scale-step, .mz-scale-dot, .mz-qcard { transition: none; animation: none; } }
.mz-selectwrap { position: relative; display: block; }
.mz-selectwrap .mz-select { width: 100%; }
.mz-selectwrap::after { content: ""; position: absolute; right: 18px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border-right: 1.6px solid var(--ink-2); border-bottom: 1.6px solid var(--ink-2); transform: rotate(45deg); pointer-events: none; }
.mz-onboard .mz-add-form .mz-btn { display: none; }
.mz-banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: var(--tint); font-size: 14px; color: var(--ink-2); max-width: 760px; }
.mz-banner .mz-run { flex: none; width: 48px; }
.mz-plan li > span { min-width: 0; }
.mz-picture { overflow-x: visible; padding-right: 48px; }
@media (max-width: 720px) { .mz-picture { overflow-x: clip; padding-right: 8px; } }
.mz-onboard [id^="words-"] .mz-btn2 { display: none; }

/* ---------- Mosaic's loading mark ---------- */
.mz-loader { width: 64px; height: 64px; flex: none; overflow: visible; }
.mz-loader.is-sm { width: 28px; height: 28px; }
.mz-loader.is-lg { width: 120px; height: 120px; }
.mz-loader circle { fill: var(--c, var(--clay)); fill-opacity: 0; stroke: var(--c, var(--clay)); stroke-width: .9; stroke-dasharray: 100; stroke-dashoffset: 100; mix-blend-mode: multiply;
  animation: mz-ring 3.2s cubic-bezier(.5, 0, .2, 1) infinite; animation-delay: calc(var(--i, 0) * .16s); transform-origin: 16px 16px; }
.mz-loader .l0 { --i: 0; --c: #2d67d1; } .mz-loader .l1 { --i: 1; --c: #e0573a; } .mz-loader .l2 { --i: 2; --c: #0e9b86; }
.mz-loader .l3 { --i: 3; --c: #8a5fd6; } .mz-loader .l4 { --i: 4; --c: #d2418f; } .mz-loader .l5 { --i: 5; --c: #a87400; }
@keyframes mz-ring {
  0% { stroke-dashoffset: 100; fill-opacity: 0; transform: rotate(0) scale(.92); }
  35% { stroke-dashoffset: 0; fill-opacity: 0; }
  55% { stroke-dashoffset: 0; fill-opacity: .22; transform: rotate(30deg) scale(1); }
  80% { stroke-dashoffset: 0; fill-opacity: .22; transform: rotate(30deg) scale(1); }
  100% { stroke-dashoffset: -100; fill-opacity: 0; transform: rotate(60deg) scale(.92); }
}
@media (prefers-reduced-motion: reduce) { .mz-loader circle { animation: none; stroke-dashoffset: 0; fill-opacity: .2; } }
.mz-loading { display: flex; justify-content: center; padding: 18vh 0; }
.mz-assemble { min-height: 62vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; text-align: center; animation: mz-qin .3s ease both; }
.mz-assemble .mz-h2 { font-style: italic; }
.mz-banner .mz-loader { width: 26px; height: 26px; }

/* ---------- round 2: from the first testers ---------- */
/* Step names are a progress line, not buttons. */
.mz-steps { gap: 4px 18px; }
.mz-steps li { padding: 4px 0; background: none; border-radius: 0; border-bottom: 2px solid transparent; }
.mz-steps li.is-now { background: none; color: var(--ink); border-bottom-color: var(--clay); }
.mz-steps li.is-done::before { content: "✓  "; color: var(--clay); }
.mz-plan li.is-done { color: var(--muted); }
.mz-plan li.is-done::before { content: "✓"; }
/* Continents fill in as you tap; they are a tally, not controls. */
.mz-cont { padding: 2px 0; border: 0; border-radius: 0; display: inline-flex; align-items: center; gap: 6px; }
.mz-cont::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(38, 26, 18, 0.3); }
.mz-cont.is-on { background: none; color: var(--deep); font-weight: 600; }
.mz-cont.is-on::before { background: var(--clay); border-color: var(--clay); }
.mz-conts { gap: 6px 14px; }
/* Phones: the tap's answer sits right under the map, and the zoom buttons leave the world alone. */
@media (max-width: 900px) {
  .mz-map-toast { order: -1; min-height: 1.4em; font-size: 18px; }
  .mz-zooms { position: static; flex-direction: row; justify-content: flex-end; padding: 8px; }
  .mz-zoom { width: 44px; height: 44px; }
}
/* Link fields: a typo gets its own line under the field. */
.mz-field-err { min-height: 0; font-size: 12.5px; font-weight: 500; color: #a1281a; }
.mz-field-err:empty { display: none; }
/* AI answers: a saved card says so. */
.mz-prompt.is-saved { box-shadow: inset 0 0 0 1px rgba(160, 83, 50, 0.35); }
.mz-prompt .mz-add-status { min-height: 1.2em; }
/* One heading per editor in "What you've shared": the row already names it. */
.mz-shared-editor #atlas .mz-headrow .mz-h2 { display: none; }
.mz-readout > .mz-linkbtn, .mz-readout > .mz-btn2 { align-self: flex-start; }
/* The picture's captions were too small to read; the line under it names the sources on hover or tap. */
.mz-rosette .v3-label-cap { display: none; }
/* Phones: a long area name wraps at the picture's edge instead of being cut off. */
@media (max-width: 720px) { .mz-rosette .v3-label { white-space: normal; } .mz-rosette .v3-label-name { line-height: 34px; } }
/* Quiz dots stay a comfortable tap on the narrowest phones. */
@media (max-width: 400px) { .mz-qcard { padding: 20px 14px; } }
.mz-rosette .v3-label-name { font-family: "Instrument Serif", "Iowan Old Style", Georgia, serif !important; }
.mz-shared-body .mz-small { white-space: pre-line; }
.mz-onboard .mz-add-form > .mz-row { display: none; }
.mz-find::-webkit-calendar-picker-indicator { opacity: 0; }
@media (max-width: 560px) { .mz-shared-row { align-items: start; } .mz-shared-mark { margin-top: 3px; } }
/* One column through the guided start: the quiz sits in the same column as the other steps. */
.mz-quiz.mz-onboard { max-width: 980px; }
.mz-quiz.mz-onboard .mz-qcard, .mz-quiz.mz-onboard .mz-qbars, .mz-quiz.mz-onboard .mz-qfoot, .mz-quiz.mz-onboard > .mz-lede { max-width: 760px; width: 100%; }
.mz-steps button { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.mz-steps button:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.mz-onboard [id^="words-"] { max-width: 760px; }
.mz-steps button { min-height: 36px; }
/* Phone quiz result: the emblem sits beside the name, as on the Mosaic card. */
@media (max-width: 560px) { .mz-quiz-hero { grid-template-columns: 56px 1fr; gap: 14px; align-items: start; } .mz-quiz-end .mz-quiz-hero .mz-arch-emblem { width: 56px; height: 56px; } .mz-steps { gap: 2px 12px; } .mz-steps li { font-size: 12px; } }
/* A saved AI card swaps its number for a tick, so titles stay aligned. */
.mz-prompt.is-saved .mz-prompt-num { font-size: 0; }
.mz-prompt.is-saved .mz-prompt-num::after { content: "✓"; font-size: 13px; }
@media (hover: none) { .mz-map-land path:hover { fill: #f7f3ec; } .mz-map-land path.is-on:hover { fill: var(--clay); } }
.mz-steps li { display: inline-flex; align-items: center; min-height: 36px; }
.mz-shared-editor [id^="words-"] .mz-btn2 { display: none; }
.mz-add-status:empty { display: none; }
.mz-build-sheet { overflow: visible; padding-right: 48px; }

/* Round 3: rail text on one baseline; short labels on phones */
.mz-steps li { padding: 0; border-bottom: 0; }
.mz-steps li > span, .mz-steps li > button { display: inline-flex; align-items: center; gap: 0.35em; min-height: 36px; }
.mz-steps li.is-now > span { text-decoration: underline 2px var(--clay); text-underline-offset: 6px; }
.mz-step-short { display: none; }
@media (max-width: 560px) { .mz-step-long { display: none; } .mz-step-short { display: inline; } .mz-steps { flex-wrap: nowrap; gap: 2px 14px; } }
/* Link buttons line up with their neighbours */
.mz-linkbtn { padding: 0; }
.mz-shared-row { align-items: start; }
.mz-shared-row > .mz-btn2 { align-self: center; }
.mz-shared-mark { margin-top: 1px; }
/* Your data: the open list gets the full width and no inner scroll */
.mz-card.is-wide { grid-column: 1 / -1; }
.mz-review { max-height: none; overflow: visible; }
.mz-steps li::before { margin-right: 0.3em; }
/* Round 4: on phones the six areas read as a list under the picture, where names stay legible */
.mz-legend { display: none; list-style: none; margin: 0; padding: 0; }
@media (max-width: 720px) {
  .mz-picture .mz-rosette .v3-label, .mz-picture .mz-rosette .v3-leaders { display: none !important; }
  .mz-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; width: 100%; }
  .mz-legend button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; border: 0; background: none; padding: 0; font: inherit; font-size: 14px; color: var(--ink); text-align: left; cursor: pointer; }
  .mz-legend button span:nth-child(2) { flex: 1; min-width: 0; line-height: 1.2; }
  .mz-legend b { font: 500 13px/1 var(--mono); color: var(--ink-2); }
  .mz-legend li.is-lit button { color: var(--c); }
}
.mz-pending.is-quiet { background: none; padding: 4px 0; gap: 10px; }
.mz-card .mz-headrow { align-items: center; }
.mz-steps button { padding: 0 8px; margin: 0 -8px; }
/* Animals: emblem beside the name, no explanation */
.mz-arch-grid { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); }
.mz-arch-opt { flex-direction: row; align-items: center; gap: 10px; min-height: 56px; }
.mz-arch-opt .mz-arch-emblem { width: 40px; height: 40px; }
.mz-arch-emblem { background: var(--tint); border-radius: 50%; }
.mz-arch-top .mz-arch-emblem { width: 84px; height: 84px; background: var(--card); }
.mz-arch-top .mz-arch-name { font-size: 34px; line-height: 1.1; }
.mz-legend[hidden] { display: none !important; }
.mz-legend button { min-height: 44px; }
#app.is-arriving { pointer-events: none; }
/* Stone-mosaic medallions sit straight on the cream, no frame */
.mz-arch-emblem.is-art { background: none; border-radius: 50%; object-fit: cover; display: block; }
.mz-arch-top .mz-arch-emblem.is-art { width: 112px; height: 112px; }
.mz-quiz-end .mz-quiz-hero .mz-arch-emblem.is-art { width: 168px; height: 168px; }
.mz-arch-opt .mz-arch-emblem.is-art { width: 52px; height: 52px; }
@media (max-width: 560px) {
  .mz-quiz-hero { grid-template-columns: 1fr; justify-items: start; }
  .mz-quiz-end .mz-quiz-hero .mz-arch-emblem.is-art { width: 132px; height: 132px; }
  .mz-arch-top .mz-arch-emblem.is-art { width: 96px; height: 96px; }
}

/* Your data with everything shown: the two smaller cards share a row under the list. */
.mz-pair { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: inherit; }
/* "Copied ✓" keeps the button's width so nothing beside it moves. */
.mz-copy { min-width: 9em; }

/* The animal arrives with a short settle. */
.mz-quiz-end .mz-quiz-hero .mz-arch-emblem { animation: mz-reveal 0.6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes mz-reveal { from { opacity: 0; transform: scale(0.86); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mz-quiz-end .mz-quiz-hero .mz-arch-emblem { animation: none; } }

/* A question's scale wakes up as it becomes tappable. */
.mz-quiz .mz-scale { animation: mz-ready 0.6s ease-out both; }
@keyframes mz-ready { from { opacity: 0.35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mz-quiz .mz-scale { animation: none; } }
/* Picker on a narrow phone: emblem above the name, so long names fit two to a row. */
@media (max-width: 430px) {
  .mz-arch-opt { flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 10px 6px; }
  .mz-arch-opt b { font-size: 18px; }
}

.mz-qtext, .mz-quiz-intro .mz-btn { -webkit-user-select: none; user-select: none; }
.mz-arch-opt b { min-width: 0; overflow-wrap: anywhere; }
/* The sign-in headline runs wider than the form so it sits on two even lines. */
.mz-gate .mz-h1 { width: min(780px, calc(100vw - 32px)); text-wrap: balance; }

/* ---------- in your words: a voice note or a doc under each box ---------- */
.mz-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.mz-tool { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 16px 0 12px; border: 1px solid rgba(38, 26, 18, 0.22); border-radius: 999px; background: transparent; color: var(--ink); font-size: 14px; font-weight: 500; }
.mz-tool:hover { border-color: var(--clay); color: var(--deep); }
.mz-tool svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mz-tool.is-on { background: var(--clay); border-color: var(--clay); color: #fffaf4; }
.mz-tool.is-on svg { animation: mz-listen 1.2s ease-in-out infinite; }
@keyframes mz-listen { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .mz-tool.is-on svg { animation: none; } }
.mz-box-lede { font-size: 15px; }
.mz-quiz-end #deep .mz-btn2 { display: none; }
.mz-banner-btn { padding: 0; min-height: 0; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; color: var(--deep); }
.mz-prompt-card { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; max-width: 760px; padding: 20px 22px; border-radius: 16px; background: var(--tint-2); border: 1px solid var(--line); }
.mz-prompt-card .mz-starters li { font-size: 19px; }
.mz-deep { display: flex; flex-direction: column; gap: 10px; max-width: 760px; width: 100%; }
.mz-deep #deep { display: flex; flex-direction: column; gap: 14px; }

/* ---------- types ---------- */
.mz-types { display: flex; flex-direction: column; gap: 14px; }
.mz-types-more { border-top: 1px solid var(--line); padding-top: 12px; }
.mz-types-more summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; min-height: 44px; cursor: pointer; list-style: none; }
.mz-types-more summary::-webkit-details-marker { display: none; }
.mz-types-more summary::before { content: '+'; width: 14px; color: var(--clay); font-weight: 600; }
.mz-types-more[open] summary::before { content: '−'; }
.mz-fields-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 6px; }
@media (max-width: 760px) { .mz-fields-5 { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); } }
.mz-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.mz-chip { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(38, 26, 18, 0.18); background: var(--paper); font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.mz-chip.is-on { border-color: var(--clay); background: var(--clay); color: #fffaf4; font-weight: 600; }

/* ---------- alpha evaluation box: the read, rated card by card ---------- */
.mz-evalbox { position: relative; padding: 34px 28px 28px; border: 2px dashed rgba(160, 83, 50, 0.55); border-radius: 24px; }
.mz-evalbox-tag { position: absolute; top: -11px; left: 22px; padding: 0 10px; background: var(--bone); font: 600 12px/22px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--clay); }
.mz-rate { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.mz-icard .mz-rate { margin-top: auto; } /* pinned to the card foot so ratings line up across a row */
.mz-rate .mz-row { gap: 8px; }
.mz-rate-count { font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .mz-evalbox { padding: 30px 14px 18px; } .mz-evalbox-tag { left: 12px; font-size: 11px; } .mz-rate .mz-pill { flex: 1; padding: 0 8px; } }

/* Tester fixes: tap targets, map spacing, no sideways scroll. */
body { overflow-x: clip; }
.mz-steps li, .mz-steps li > span, .mz-steps li > button, .mz-steps button { min-height: 44px; }
.mz-steps button { min-width: 44px; justify-content: center; }
.mz-chip { min-height: 44px; }
.mz-onboard-foot .mz-linkbtn, .mz-qfoot .mz-linkbtn, .mz-quiz .mz-row > .mz-linkbtn { padding: 0 10px; }
.mz-brand { min-height: 44px; }
@media (max-width: 900px) { .mz-map-toast { min-height: 0; } .mz-map-toast:empty { display: none; } }
@media (max-height: 520px) { .mz-map-card.is-full .mz-map { height: calc(100svh - 24px); } }

/* Tastes: favourites and the four quick ways to add more, after the read */
.mz-tastes { display: flex; flex-direction: column; gap: 18px; }
.mz-taste { display: flex; flex-direction: column; gap: 14px; }
.mz-taste-card { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; border-radius: 20px; background: var(--card); box-shadow: inset 0 0 0 1px rgba(38, 26, 18, 0.08); }
.mz-shelf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 14px 18px; }
.mz-shelf-edit { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mz-field-why input { min-height: 38px; font-size: 14px; background: transparent; border-style: dashed; }
.mz-shelf-edit:not(.has-picks) .mz-field-why { display: none; }
.mz-now { display: flex; flex-direction: column; gap: 18px; padding: 20px 22px; border-radius: 20px; background: var(--card); box-shadow: inset 0 0 0 1px rgba(38, 26, 18, 0.08); }
/* Where you live: search a city, it becomes a chip, and a star or a numbered pin lands on the map. */
.mz-city { display: flex; flex-direction: column; gap: 8px; }
.mz-city-q { font: 400 26px/1.15 var(--serif); color: var(--ink); }
.mz-city-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mz-city-chips:empty { display: none; }
.mz-city-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px 0 6px; border-radius: 999px; background: var(--tint); font-size: 15px; color: var(--ink); max-width: 100%; }
.mz-city-chip > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mz-city-mark { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--card); font: 600 13px/1 var(--sans); }
.mz-city-mark.is-star { background: #f2b84b; color: var(--ink); font-size: 16px; }
.mz-city-x { flex: none; width: 44px; height: 44px; margin: -2px 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; }
.mz-city-x:hover, .mz-city-x:focus-visible { background: rgba(38, 26, 18, 0.08); color: var(--ink); }
/* Quick-list chips have no pin mark, so the name gets an even inset either side of the ×. */
.mz-chiplist .mz-city-chip { gap: 0; padding: 0 2px 0 16px; }
.mz-chiplist .mz-city-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mz-chiplist .mz-city-x { width: 40px; }
.mz-city-box { position: relative; max-width: 460px; }
.mz-city-in { width: 100%; min-height: 48px; padding: 0 16px; border: 1px solid rgba(38, 26, 18, 0.18); border-radius: 999px; background: var(--paper); font-size: 16px; }
.mz-city-in:focus { border-color: var(--clay); outline: none; box-shadow: 0 0 0 3px rgba(160, 83, 50, 0.16); }
.mz-city-list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); max-height: 300px; overflow-y: auto; padding: 6px; border-radius: 16px; background: var(--card);
  box-shadow: 0 14px 40px rgba(38, 26, 18, 0.16), inset 0 0 0 1px rgba(38, 26, 18, 0.08); }
.mz-city-opt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-height: 44px; padding: 11px 12px; border-radius: 10px; font-size: 15px; cursor: pointer; }
.mz-city-opt b { font-weight: 600; }
.mz-city-where { font-size: 13px; color: var(--muted); }
.mz-city-opt.is-active { background: var(--tint); }
.mz-city-opt.is-typed { color: var(--ink-2); }
.mz-now > .mz-field { max-width: 640px; }
/* You, right now: each question names its answer, like a shelf name; one question per screen in onboarding. */
.mz-compass-card { gap: 22px; }
.mz-compass-card .mz-field-label { font-size: 15px; color: var(--ink); }
.mz-core-q { display: flex; flex-direction: column; gap: 8px; max-width: 640px; }
.mz-core-q textarea[name=approach], .mz-core-screen > textarea[name=approach] { min-height: 0; font-size: 14px; border-style: dashed; background: transparent; }
.mz-compass textarea, .mz-core-screen textarea { padding: 10px 14px; border: 1px solid rgba(38, 26, 18, 0.18); border-radius: 12px; background: var(--paper); font: inherit; font-size: 15px; line-height: 1.45; color: var(--ink); resize: vertical; }
.mz-core-screen { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.mz-core-screen > textarea:not([name=approach]) { min-height: 120px; font-size: 16px; }
textarea.is-missing, .mz-time.is-missing { border-color: #b4532a; box-shadow: 0 0 0 3px rgba(180, 83, 42, 0.12); }
.mz-core-progress { display: flex; align-items: center; gap: 12px; max-width: 640px; }
.mz-phase { flex: 1; display: flex; gap: 6px; }
.mz-phase i { flex: 1; height: 5px; border-radius: 9px; background: var(--line); }
.mz-phase i.is-on { background: var(--clay); }
.mz-time { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.mz-time-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) minmax(0, 1.3fr) 38px; gap: 10px; align-items: center; font-size: 14px; color: var(--ink); }
.mz-time-row input { width: 100%; accent-color: var(--clay); min-height: 32px; }
.mz-time-row b { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.mz-time-sw { width: 10px; height: 10px; border-radius: 3px; }
.mz-time-bar { display: flex; gap: 2px; height: 14px; border-radius: 999px; overflow: hidden; margin-top: 4px; }
.mz-time-bar.is-empty { background: var(--tint); }
.mz-time-work { background: #a05332; } .mz-time-own { background: #7c3b22; } .mz-time-people { background: #d9a07f; }
.mz-time-body { background: #6b7a3a; } .mz-time-learning { background: #3f6f8a; } .mz-time-making { background: #8a5a8f; } .mz-time-rest { background: #b9a48f; }
@media (max-width: 520px) { .mz-time-row { grid-template-columns: 10px minmax(0, 1fr) 38px; } .mz-time-row input { grid-column: 1 / -1; grid-row: 2; } }
.mz-map-pins { pointer-events: none; }
.mz-pin polygon { fill: #f2b84b; stroke: var(--ink); stroke-width: 1.4px; stroke-linejoin: round; }
.mz-pin.is-home text { font: 600 13px var(--sans); fill: var(--ink); text-anchor: start; paint-order: stroke; stroke: rgba(251, 250, 247, 0.92); stroke-width: 3.5px; stroke-linejoin: round; }
.mz-pin circle { fill: var(--ink); stroke: var(--card); stroke-width: 1.6px; }
.mz-pin text { font: 600 11px var(--sans); fill: var(--card); text-anchor: middle; dominant-baseline: central; }
.mz-pin.is-new > * { transform-box: fill-box; transform-origin: center; animation: mz-pin-drop 0.5s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes mz-pin-drop { from { transform: translateY(-14px) scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mz-pin.is-new > * { animation: none; } }
.mz-recommend { gap: 16px; }
.mz-field textarea { padding: 10px 14px; border: 1px solid rgba(38, 26, 18, 0.18); border-radius: 12px; background: var(--paper); font: inherit; font-size: 15px; font-weight: 400; color: var(--ink); resize: vertical; }
.mz-taste-ways { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px; align-items: start; }
.mz-taste-way { border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 1px rgba(38, 26, 18, 0.08); min-width: 0; }
.mz-taste-way[open] { grid-column: 1 / -1; }
.mz-taste-way > summary { display: flex; flex-direction: column; gap: 3px; padding: 16px 20px; cursor: pointer; list-style: none; min-height: 44px; }
.mz-taste-way > summary::-webkit-details-marker { display: none; }
.mz-taste-way > summary b { font-size: 15px; }
.mz-taste-way > summary b::after { content: " +"; color: var(--clay); }
.mz-taste-way[open] > summary b::after { content: " –"; }
.mz-taste-way > :not(summary) { padding: 0 20px 18px; }
.mz-taste-way .mz-add { padding: 0 20px 18px; background: none; box-shadow: none; border-radius: 0; }
.mz-taste-way .mz-starters li { font-size: 17px; }
.mz-taste-steps { display: flex; flex-direction: column; gap: 4px; margin: 0; padding-left: 18px; font-size: 14px; color: var(--ink-2); }
.mz-taste-way input[type=file] { max-width: 100%; font-size: 14px; }

/* No fill meters or percentages on the picture (Timour, 21 Oct): they read as a progress bar to complete. */
.mz-rosette .v3-label-bar { display: none !important; }

/* Alpha feedback 18 Oct: what the animal means (shown with it; the other seven one tap away), and adding your own notes files */
.mz-arch-meaning { font-size: 15px; }
.mz-arch-meaning > summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; color: var(--clay); font-weight: 600; }
.mz-arch-meaning[open] > summary { margin-bottom: 6px; }
.mz-arch-meaning p { margin: 6px 0 0; }
.mz-arch-all { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.mz-arch-all .mz-arch-opt { cursor: default; flex-direction: row; align-items: flex-start; text-align: left; gap: 12px; min-height: 0; padding: 12px; }
.mz-arch-all .mz-arch-opt > div { min-width: 0; }
.mz-arch-all .mz-arch-opt p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.mz-arch-story { margin: 4px 0 0; font: 400 18px/1.5 var(--serif); color: var(--ink); text-wrap: pretty; max-width: 62ch; }
.mz-arch-all .mz-arch-opt:hover { border-color: var(--line); }
/* "Not quite": each animal stacked over its archetype and what it longs for, so long names never break mid-word. */
.mz-arch-pick .mz-arch-opt { flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 12px 8px; }
.mz-arch-pick .mz-arch-opt b { overflow-wrap: normal; }
.mz-arch-pick .mz-arch-longs { margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: var(--ink-2); text-wrap: pretty; }
.mz-arch-vibe { margin: 2px 0 0; font: italic 400 19px/1.4 var(--serif); color: var(--ink); text-wrap: pretty; }
.mz-quiz-about { font-size: 14px; margin-top: 6px; }
.mz-quiz-about > summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; color: var(--clay); font-weight: 600; }
.mz-quiz-about p { margin: 4px 0 0; }
.mz-onboard > .mz-tagline { margin: 0 0 -6px; }
.mz-field-wide { grid-column: 1 / -1; }
.mz-field-wide input { width: 100%; box-sizing: border-box; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); font: inherit; color: var(--ink); }

/* Your people: two medallions side by side, then the one thing you two could do, set like the read's own voice. */
.mz-people-list { display: flex; flex-direction: column; gap: 14px; }
.mz-person { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 22px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.mz-person.is-mutual { box-shadow: inset 0 0 0 2px #9cc3a7; }
.mz-person-top { display: flex; align-items: center; gap: 14px; }
.mz-person-top p { margin: 0; }
.mz-pair { display: flex; flex: none; }
.mz-pair > * { width: 52px; height: 52px; border-radius: 50%; background: var(--tint); box-shadow: 0 0 0 3px var(--paper); }
.mz-pair > * + * { margin-left: -14px; }
.mz-pair .mz-arch-emblem { width: 52px; height: 52px; }
.mz-person-name { font-weight: 600; font-size: 15px; color: var(--ink); }
.mz-person-line { margin: 0; font-family: var(--serif); font-size: clamp(22px, 5.4vw, 27px); line-height: 1.22; color: var(--ink); max-width: 34ch; }
.mz-person-why { margin: 0; max-width: 60ch; }
.mz-person-meet { margin: 0; font-size: 14.5px; color: #1c4a2b; }
.mz-person-meet a { display: inline-block; max-width: 100%; padding: 12px 0; color: inherit; font-weight: 600; overflow-wrap: anywhere; }
.mz-people-off { display: flex; flex-direction: column; gap: 8px; }

/* Taste, one app at a time: a grid of logos; a tap drops a panel under its group. */
.mz-src { display: flex; flex-direction: column; gap: 16px; }
.mz-src-group { display: flex; flex-direction: column; gap: 8px; }
.mz-src-label { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.mz-src-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.mz-src-tile { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border: 0; border-radius: 999px;
  background: var(--paper); box-shadow: inset 0 0 0 1px rgba(38, 26, 18, 0.1); font: inherit; color: var(--ink); cursor: pointer; transition: box-shadow 0.15s, transform 0.15s; }
@media (hover: hover) { .mz-src-tile:hover { box-shadow: inset 0 0 0 1px var(--brand); } }
.mz-src-tile:active { transform: scale(0.97); }
.mz-src-tile.is-open { box-shadow: inset 0 0 0 2px var(--brand); }
.mz-src-tile:focus-visible { outline: 2px solid var(--deep); outline-offset: 2px; }
.mz-src-logo { width: 20px; height: 20px; fill: var(--brand); flex: none; }
.mz-src-mono { display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; background: var(--brand); color: #fff; font-size: 12px; font-weight: 700; }
.mz-src-name { font-size: 14px; font-weight: 600; line-height: 1.2; }
.mz-src-tick { font-size: 13px; font-weight: 700; color: #3f6b3a; }
.mz-src-tick:empty { display: none; }
.mz-src-tile.is-done { background: #f4f7f0; }
.mz-src-panel { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; border-radius: 16px; background: var(--paper); box-shadow: inset 0 0 0 1px rgba(38, 26, 18, 0.1), inset 0 3px 0 var(--brand); min-width: 0; }
.mz-src-head { display: flex; align-items: center; gap: 10px; }
.mz-src-head b { font-size: 16px; flex: 1; }
.mz-src-close { min-width: 44px; min-height: 44px; margin: -10px -12px -10px 0; border: 0; background: none; font-size: 24px; line-height: 1; color: var(--muted); cursor: pointer; }
.mz-src-panel > .mz-small { margin: 0; }
.mz-src-ais { display: flex; flex-wrap: wrap; gap: 6px; }
.mz-src-ai { min-height: 44px; padding: 0 11px; border: 1px solid rgba(38, 26, 18, 0.2); border-radius: 999px; background: transparent; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.mz-src-ai.is-on { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.mz-src-steps { margin: 0; padding-left: 20px; list-style: decimal; display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; line-height: 1.5; }
.mz-src-direct { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0; padding-top: 12px; border-top: 1px solid var(--line); }
.mz-src-file { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mz-src-file input[type=file] { max-width: 100%; font-size: 14px; }
.mz-src-file input[type=file]::file-selector-button, .mz-taste-way input[type=file]::file-selector-button { min-height: 40px; margin-right: 10px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }

.mz-src-steps a { display: inline-block; padding: 8px 4px; margin: -8px 0; }
.mz-src-more { align-self: flex-start; }

/* 21 Oct: the read's questions and gaps answered in place; ratings say Saved; links on the profile; quick lists as chips */
.mz-ask-wrap { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mz-ask { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; width: 100%; padding: 0; border: 0; background: none; text-align: left; color: inherit; cursor: pointer; }
.mz-ask-q { flex: 1 1 16em; min-width: 0; }
.mz-ask-mark { flex: none; font: 600 13px/1.4 var(--sans); font-style: normal; letter-spacing: .01em; color: var(--clay); white-space: nowrap; }
.mz-ask-mark::after { content: ' ›'; }
.mz-ask[aria-expanded="true"] .mz-ask-mark::after { content: ' ⌄'; }
.mz-ask-wrap.is-answered .mz-ask-mark { color: var(--muted); }
.mz-ask:hover .mz-ask-q, .mz-ask:focus-visible .mz-ask-q { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.mz-ask-body { display: flex; flex-direction: column; gap: 6px; }
.mz-ask-body .mz-compare-note { font-size: 15px; }
.mz-asks { margin: 8px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.mz-asks > li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.mz-asks .mz-ask { min-height: 44px; align-items: center; font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.mz-rate-saved { color: var(--muted); }
.mz-plinks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.mz-plink-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.mz-plink { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; max-width: 100%; padding: 0 14px 0 10px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-size: 14px; text-decoration: none; }
.mz-plink > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mz-plink:hover, .mz-plink:focus-visible { box-shadow: inset 0 0 0 1px var(--ink-2); }
.mz-plink-logo { flex: none; width: 18px; height: 18px; fill: currentColor; color: var(--ink-2); }
.mz-plink-mono { display: inline-grid; place-items: center; font: 700 12px/1 var(--mono); }
.mz-chipin { display: flex; flex-direction: column; gap: 8px; }
/* The shelf name leads; its prompt reads as a hint under it. */
.mz-shelf-edit .mz-field-label { font-size: 14px; color: var(--ink); }
.mz-shelf-cta { margin-top: -4px; font-weight: 400; color: var(--ink-2); }
/* "More shelves" gets its own row, so it never sits alone in a grid cell. */
.mz-shelf-grid > .mz-linkbtn { grid-column: 1 / -1; justify-self: start; }
.mz-src-upload input[type=file] { max-width: 100%; font-size: 15px; }
.mz-src-earlier summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; }
/* The save line keeps its height, so "Saving…" appearing on blur never moves the Next button mid-click. */
.mz-core-screen > .mz-add-status, .mz-compass-card > .mz-add-status { display: block; min-height: 1.45em; }
.mz-core-q > .mz-field-label { font-size: 15px; font-weight: 600; color: var(--ink); }
.mz-compass-card .mz-field-sub .mz-field-label { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.mz-compass textarea:focus, .mz-core-screen textarea:focus { outline: none; border-color: var(--ink-2); box-shadow: 0 0 0 3px rgba(38, 26, 18, 0.08); }
.mz-compass textarea.is-missing, .mz-core-screen textarea.is-missing { border-color: #b4532a; box-shadow: 0 0 0 3px rgba(180, 83, 42, 0.12); }
.mz-compass-card .mz-core-q { max-width: none; }
.mz-time-sum { margin: 0; min-height: 1.45em; }