/* The Rosenmehl Motiv Generator's look: the old page's steps on the platform's tokens, inside the Auto-Interview's
   frame (.ai-stage, .ai-box in styles.css) as the Adviser and Traumlabor are. Square panels with ink edges, one accent,
   the drawings in the platform's line manner; the three baker types keep the old page's colours as a dot each. Nothing
   here is wider than its column: no sideways scroll at 400 px. */

/* ---- the step drawings: ink on the surface, the accent once */
.mv-art{display:block;width:100%;height:auto}
.mv-art .ln{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mv-art .hl{fill:none;stroke:var(--ink-soft);stroke-width:1;stroke-linecap:round}
.mv-art .lnf{fill:var(--surface);stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.mv-art .lna{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mv-art .sla{fill:none;stroke:var(--accent);stroke-width:1.2;stroke-dasharray:3 4;stroke-linecap:round}
.mv-art .f-ac{fill:var(--accent)}

/* ---- the frame: the steps beside the title, the test mode's notice, the drawing */
.mv-title-row{display:grid;grid-template-columns:minmax(0,1fr) 150px;align-items:end;gap:var(--s-3) var(--s-5)}
.mv-titles{display:flex;flex-direction:column;gap:var(--s-2);min-width:0}
.mv-titles .ai-title{margin-bottom:var(--s-1)}
.mv-frame{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2);padding:var(--s-2) var(--s-3)}
@media (max-width:760px){.mv-title-row{grid-template-columns:minmax(0,1fr) 96px}.mv-frame{padding:var(--s-1) var(--s-2)}}
.mv-head-right{display:flex;align-items:center;gap:var(--s-3) var(--s-4);flex-wrap:wrap;min-width:0}
.mv-steps{display:flex;gap:2px var(--s-1);list-style:none;margin:0;padding:0;flex-wrap:wrap}
.mv-steps button{display:inline-flex;align-items:center;gap:var(--s-1);min-height:30px;padding:0 var(--s-2);border:0;border-radius:var(--r-full);background:none;cursor:pointer;
  font:400 11px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);white-space:nowrap}
.mv-steps button b{font-weight:400}
.mv-steps button:hover:not([disabled]){color:var(--ink);background:var(--paper-2)}
.mv-steps button[disabled]{cursor:default;opacity:.55}
.mv-steps li.done button{color:var(--ink-soft)}
.mv-steps li[aria-current="step"] button{color:var(--ink)}
.mv-steps li[aria-current="step"] b{color:var(--accent);font-weight:700}
@media (max-width:640px){.mv-steps li:not([aria-current="step"]) button span{display:none}}
.mv-testmode{font:400 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);border:1px solid var(--accent);border-radius:var(--r-full);padding:4px 10px;white-space:nowrap}

/* ---- a step: its hint, its options as cards, the arrows */
.mv-step{display:flex;flex-direction:column;gap:var(--s-4);min-width:0}
.mv-sub{margin:0;font:400 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}
.mv-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:var(--s-3)}
.mv-opt{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;padding:var(--s-3) var(--s-4);min-height:96px;background:var(--surface);color:var(--ink);
  border:1px solid var(--line-strong);border-radius:var(--r-2);cursor:pointer;font:inherit;transition:border-color .15s,background .15s}
.mv-opt:hover{border-color:var(--ink)}
.mv-opt[aria-pressed="true"]{border:2px solid var(--accent);padding:calc(var(--s-3) - 1px) calc(var(--s-4) - 1px);background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
.mv-ot{font:600 17px/1.2 var(--display);letter-spacing:-.005em}
.mv-od{font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
.mv-otag{margin-top:auto;font:400 10.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}
.mv-opt[aria-pressed="true"] .mv-otag{color:var(--ink)}
.mv-gate{background:var(--paper-2);border-left:3px solid var(--accent);padding:var(--s-3) var(--s-4)}
.mv-gate h3{margin:0 0 var(--s-2);font:400 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.mv-gate ul{margin:0;padding-left:1.1em;display:flex;flex-direction:column;gap:6px;font-size:14.5px;line-height:1.5}
.mv-nav{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);border-top:1px solid var(--line);padding-top:var(--s-4)}

/* ---- the result: the prompt, the picture, the values, the types, the notes */
.mv-box{gap:var(--s-5)}
.mv-sec{gap:var(--s-3)}
.mv-promptbox{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-2);padding:var(--s-3) var(--s-4);display:flex;flex-direction:column;gap:var(--s-2);min-width:0}
.mv-promptbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap}
.mv-lbl{font:400 10.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.mv-prompt{margin:0;font:400 13px/1.65 var(--mono);color:var(--ink);overflow-wrap:anywhere;white-space:pre-wrap;user-select:text}
#mv-copy.ok{border-color:var(--accent)}
/* the picture's column keeps its width whatever the format, so its prompt and its change request read at full width;
   an upright or square picture is narrower inside it */
.mv-picture{max-width:760px;min-width:0}
.mv-picture[data-size="hoch"] .pv-box{aspect-ratio:2/3;max-width:440px}
.mv-picture[data-size="quadrat"] .pv-box{aspect-ratio:1/1;max-width:560px}
.mv-paint-row{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.mv-exports{gap:var(--s-2)}
.mv-chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.mv-chip{font-size:13px;line-height:1.3;padding:6px 12px;border:1px solid var(--line-strong);border-radius:var(--r-full);background:var(--surface)}
.mv-types{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:var(--s-3)}
.mv-type{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2);padding:var(--s-3) var(--s-4);display:flex;flex-direction:column;gap:var(--s-2);min-width:0}
.mv-type-h{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.mv-type h4{margin:0;font:600 17px/1.2 var(--display);flex:1 1 auto;min-width:0}
.mv-type p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-soft)}
.mv-dot{width:10px;height:10px;border-radius:50%;background:var(--dot);flex:none}
.mv-verdict{font:400 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;border-radius:var(--r-full);border:1px solid var(--line-strong);color:var(--ink-soft);white-space:nowrap}
/* a hit, above v-mid's plain ink ring: a ground of the surface tinted with ink (apart from paper and surface in both
   modes) in a doubled ink ring, not inverted (decision 4.11) */
.mv-verdict.v-hit{background:color-mix(in srgb,var(--ink) 12%,var(--surface));border-color:var(--ink);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.mv-verdict.v-mid{border-color:var(--ink);color:var(--ink)}
.mv-verdict.v-out{border-style:dashed}
.mv-note{margin:0;font-size:14px;line-height:1.55;padding:var(--s-3) var(--s-4);border-left:3px solid var(--line-strong);background:var(--paper-2);max-width:86ch}
.mv-note.ok{border-left-color:var(--ok, #1D9E75)}
.mv-note.warn{border-left-color:var(--accent)}
.mv-end{display:flex;align-items:center;gap:var(--s-3) var(--s-4);flex-wrap:wrap;border-top:1px solid var(--line);padding-top:var(--s-4)}
.mv-summary{margin:0;font:400 11px/1.6 var(--mono);letter-spacing:.04em;color:var(--ink-mute);min-width:0;overflow-wrap:anywhere}