/* steps/map.css: the Priority map as lanes (opt 2, 2026-10-28). A triage board: one lane for the screen (room for three
   under the pinned hero) and one lane per way a block waits one step away; fills not boxes, 6px cards in 12px lanes
   (12 = 6 + 6 padding), pills on the Generator's own controls. Every class is mp- so no other step's styles reach it.
   2026-11-06: the full width, lanes of your own and the + that adds one, the Ideas lane, each lane's picture on its name
   and its animation on the info button, "what" on every card, free room said in words, "Drop here" only while dragging. */
main[data-step="map"] { padding-bottom: 24px; }
.view.mp { max-width: none; } .mp { height: calc(100vh - 60px - 28px - 24px); min-height: 560px; font-size: 12.5px; --fill-4: rgba(255,255,255,.14); --ink-50: rgba(255,255,255,.5); }
.mp h1 { font-size: 22px; line-height: 1.3; }
.mp .label { color: var(--ink-50); }
.mp :focus-visible, .mp-menu :focus-visible, .mp-board :focus-visible { outline: 1.5px solid rgba(90,170,255,.9); outline-offset: 0; }
.mp-head { display: flex; align-items: flex-end; gap: 16px; flex: none; }
.mp-head .grow { min-width: 0; }
/* the attachment the map was read from, where the eye looks for it: beside the question */
.mp-atts { display: flex; align-items: center; gap: 6px; flex: none; }
.mp-att { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 5px; border-radius: 999px; background: var(--fill); cursor: default; max-width: 320px; }
.mp-att img { width: 44px; height: 30px; border-radius: 999px; object-fit: cover; object-position: top left; flex: none; }
.mp-ai { width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; background: var(--fill-2); color: var(--ink-85); flex: none; }
.mp-an { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.mp-an b { font-weight: 500; color: var(--ink-100); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-an span { color: var(--ink-50); font-size: 11px; white-space: nowrap; }
/* the board: the screen lane wider, a lane per way of waiting and per lane of your own, then the 44px + column */
.mp-board { --fill-4: rgba(255,255,255,.14); --ink-50: rgba(255,255,255,.5); flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(var(--rest, 5), minmax(0, 1fr)) 44px; gap: 8px; font-size: 12.5px; }
.mp-lane { background: var(--fill); border-radius: 12px; padding: 6px; display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow: auto; scrollbar-width: none; transition: background-color .15s; }
.mp-lane::-webkit-scrollbar { display: none; }
.mp-lane.mp-over { background: var(--fill-2); }
.mp-lh { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 2px 0 6px; color: var(--ink-70); flex: none; }
.mp-lh b { font-weight: 500; color: var(--ink-100); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mp-lh b[data-ex] { cursor: help; }
.mp-c { margin-left: auto; color: var(--ink-50); font-variant-numeric: tabular-nums; padding-right: 4px; }
/* the info button plays the lane's animation; the x takes away an empty lane of your own (both round, 24px) */
.mp-info, .mp-rm { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border: 0; padding: 0; border-radius: 999px; background: none; color: var(--ink-50); cursor: pointer; transition: background-color .15s, color .15s; }
.mp-info:hover, .mp-rm:hover { background: var(--fill-2); color: var(--ink-100); }
.mp-rm { margin-left: -4px; }
.mp-warn { color: var(--down) !important; }
.mp-card { position: relative; width: 100%; text-align: left; border: 0; border-radius: 6px; background: var(--fill-2); color: var(--ink-85); padding: 10px 10px 11px; display: flex; flex-direction: column; align-items: stretch; gap: 4px; cursor: grab; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color .15s, opacity .15s; flex: none; font: inherit; }
.mp-card:hover { background: var(--fill-3); }
.mp-card b { font-weight: 500; color: var(--ink-100); line-height: 1.4; padding-right: 18px; }
/* what the block is, in one plain line (2026-11-06), then why it sits there */
.mp-wh { color: var(--ink-70); font-size: 11.5px; line-height: 1.4; }
.mp-why { color: var(--ink-50); font-size: 11.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mp-grip { position: absolute; right: 6px; top: 8px; color: var(--ink-50); opacity: 0; transition: opacity .15s; touch-action: none; }
.mp-card:hover .mp-grip, .mp-card:focus-visible .mp-grip { opacity: 1; }
@media (hover: none) { .mp-grip { opacity: 1; padding: 4px; margin: -4px; } }
.mp-lifted { opacity: .3; }
.mp-landed { animation: mp-land .5s var(--ease); }
@keyframes mp-land { from { background: var(--fill-4); } }
/* a block read off the data: the shell's from chip, then the real columns it uses */
.mp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 3px; }
.mp-meta .from { height: 18px; padding: 0 7px; font-size: 10.5px; gap: 4px; max-width: 100%; min-width: 0; }
/* a long source (a file name and where on it) stays one line, its whole text in the tip, so it never runs over the card */
.mp-meta .from .ft { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-col { height: 18px; display: inline-flex; align-items: center; padding: 0 6px; border-radius: 4px; background: rgba(255,255,255,.06); color: var(--ink-70); font-style: normal; font-size: 10.5px; font-variant-numeric: tabular-nums; }
.mp-act { align-self: flex-start; margin-top: 4px; height: 24px; display: inline-flex; align-items: center; gap: 5px; padding: 0 10px; border-radius: 999px; background: var(--ink-100); color: #000; font-size: 11.5px; font-weight: 500; }
.mp-hero { background: var(--fill-3); cursor: default; padding: 12px; gap: 6px; }
.mp-hero:hover { background: var(--fill-3); }
.mp-k { display: flex; align-items: center; gap: 6px; color: var(--ink-70); font-size: 11.5px; }
.mp-hero b { font-size: 14px; padding-right: 0; }
.mp-hero .mp-why { -webkit-line-clamp: 3; }
/* room left on the screen, said in words; a lane's drop place shows only while a card is dragged (2026-11-06, Savva at
   19:47: "an empty slot here is weird") */
.mp-free { flex: none; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; border-radius: 6px; background: rgba(255,255,255,.025); color: var(--ink-50); font-size: 11.5px; }
.mp-drop { display: none; flex: 1; min-height: 56px; border-radius: 6px; justify-content: center; align-items: flex-start; gap: 5px; padding-top: 12px; color: var(--ink-50); font-size: 11.5px; transition: box-shadow .15s, color .15s; }
.mp-dragging .mp-drop { display: flex; }
.mp-drop.mp-warn { display: flex; flex: none; min-height: 0; padding: 6px 0; align-items: center; }
.mp-over .mp-drop { box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); color: var(--ink-85); }
.mp-over .mp-free { color: var(--ink-85); background: rgba(255,255,255,.05); }
.mp-ghost { position: fixed; z-index: 60; pointer-events: none; margin: 0; background: #222224; box-shadow: 0 10px 30px rgba(0,0,0,.5); transform-origin: 0 0; cursor: grabbing; font-size: 12.5px; }
.mp-ghost .mp-grip { opacity: 1; }
.mp-mark { height: 2px; border-radius: 2px; background: var(--ink-100); flex: none; margin: -4px 4px; }
/* the + column, and the Ideas lane (new blocks wait here until dragged to a lane) */
.mp-addlane { border: 0; border-radius: 12px; background: var(--fill); color: var(--ink-50); display: flex; flex-direction: column; align-items: center; padding-top: 10px; gap: 8px; cursor: pointer; font: inherit; transition: background-color .15s, color .15s; }
.mp-addlane:hover { background: var(--fill-2); color: var(--ink-100); }
.mp-addlane span { display: none; }
.mp-ideas { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.mp-ideas .mp-lh svg { color: var(--accent); }
.mp-idea { background: var(--fill-2); }
.mp-fit { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; color: var(--ink-70); font-size: 11px; }
/* the bottom bar: new ideas on the left, back and on to the look on the right */
.mp-bar { flex: none; background: var(--fill); border-radius: 12px; padding: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; row-gap: 8px; }
.mp-bar .btn { height: 32px; padding: 0 14px; white-space: nowrap; }
.mp-new .ring { width: 12px; height: 12px; }
.mp-status { color: var(--ink-50); font-size: 11.5px; min-width: 120px; }
.mp-status.err { color: #f0a0a0; }
/* the tip, the lane pictures and the move menu live on the body */
.mp-tip { position: fixed; z-index: 70; pointer-events: none; max-width: 300px; padding: 7px 10px; border-radius: 8px; background: rgba(20,20,22,.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 0 1px rgba(255,255,255,.07); color: var(--ink-85); font-size: 11.5px; line-height: 1.45; white-space: pre-line; opacity: 0; transform: translateY(2px); transition: opacity .15s, transform .15s; }
.mp-tip.on { opacity: 1; transform: none; }
/* a lane's picture: 12 = 6 (the picture's own corners) + 6 (padding) */
.mp-expop { position: fixed; z-index: 68; width: 212px; padding: 6px; border-radius: 12px; background: #0f0f10; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 16px 40px rgba(0,0,0,.6); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; font-size: 11.5px; }
.mp-expop.on { opacity: 1; transform: none; }
.mp-expop.play { pointer-events: auto; }
.mp-exv { border-radius: 6px; background: rgba(255,255,255,.03); display: grid; place-items: center; padding: 12px 0; color: var(--ink-100); }
.mp-exv svg { width: 176px; height: 110px; display: block; }
.mp-expop p { margin: 8px 6px 4px; color: var(--ink-62); line-height: 1.45; }
.mp-expop p b { display: block; color: var(--ink-100); font-weight: 500; margin-bottom: 2px; }
.mp-menu { position: fixed; z-index: 65; min-width: 210px; padding: 4px; border-radius: 12px; background: #0f0f10; box-shadow: 0 0 0 1px rgba(255,255,255,.08); display: none; font-size: 12.5px; }
.mp-menu.on { display: block; animation: mp-menu .15s var(--ease); }
@keyframes mp-menu { from { opacity: 0; transform: translateY(-4px); } }
.mp-mh { padding: 6px 10px 4px; color: rgba(255,255,255,.5); font-size: 11px; }
.mp-menu button { width: 100%; height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 0; border-radius: 8px; /* 8 = 12 − 4 */ background: none; color: var(--ink-85); cursor: pointer; text-align: left; white-space: nowrap; font: inherit; }
.mp-menu button:hover, .mp-menu button:focus-visible { background: var(--fill-2); color: var(--ink-100); outline: 0; }
.mp-ck { margin-left: auto; color: var(--ink-100); display: inline-flex; }
.mp-menu hr { border: 0; height: 1px; background: var(--hair); margin: 4px 6px; }
/* naming a lane of your own: a pill field and its button inside the 12px menu (both full pills: 4px gap all round) */
.mp-newlane { display: flex; gap: 4px; padding: 2px 0 0; width: 260px; }
.mp-newlane input { flex: 1; min-width: 0; height: 32px; border: 0; border-radius: 999px; background: var(--fill-2); color: var(--ink-100); font: inherit; padding: 0 12px; outline: none; }
.mp-newlane input:focus { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); }
.mp-menu .mp-newlane .btn { width: auto; height: 32px; padding: 0 14px; border-radius: 999px; background: var(--ink-100); color: #000; justify-content: center; }
.mp-menu .mp-newlane .btn:hover { background: rgba(255,255,255,.88); color: #000; }
.mp-mnote { margin: 6px 8px 4px; color: rgba(255,255,255,.5); font-size: 11px; line-height: 1.4; max-width: 250px; }
/* the lane animations (3.6 s): the pointer reaches what opens the part, presses it at about a third, the part opens,
   holds, closes and the loop starts again */
.mp-expop .an * { transform-box: fill-box; }
.mp-expop.play .an .cur { animation: an-cur-tab 3.6s var(--ease-kit) infinite; }
.mp-expop.play .an .cur circle { animation: an-press 3.6s linear infinite; transform-origin: center; }
@keyframes an-press { 0%, 29%, 37%, 100% { transform: scale(1); } 33% { transform: scale(.6); } }
@keyframes an-cur-tab { 0% { transform: translate(52px, 34px); opacity: 0; } 6% { opacity: 1; } 28%, 80% { transform: translate(22.5px, 13px); opacity: 1; } 90%, 100% { transform: translate(22.5px, 13px); opacity: 0; } }
.mp-expop.play .an-tab .hl { animation: an-tab-hl 3.6s var(--ease-kit) infinite; }
.mp-expop.play .an-tab .ca { animation: an-out 3.6s ease infinite; }
.mp-expop.play .an-tab .cb { animation: an-in 3.6s ease infinite; }
.an-tab .cb, .an-pop .ov, .an-pop .dl { opacity: 0; }
@keyframes an-tab-hl { 0%, 34% { transform: translateX(0); } 44%, 84% { transform: translateX(13px); } 94%, 100% { transform: translateX(0); } }
@keyframes an-out { 0%, 36% { opacity: 1; } 44%, 86% { opacity: 0; } 94%, 100% { opacity: 1; } }
@keyframes an-in { 0%, 36% { opacity: 0; } 44%, 86% { opacity: 1; } 94%, 100% { opacity: 0; } }
.mp-expop.play .an-side .cur { animation-name: an-cur-side; }
@keyframes an-cur-side { 0% { transform: translate(24px, 32px); opacity: 0; } 6% { opacity: 1; } 28%, 36% { transform: translate(53.5px, 14.5px); opacity: 1; } 48%, 100% { transform: translate(53.5px, 14.5px); opacity: 0; } }
.an-side .pn { transform: translateX(24px); }
.mp-expop.play .an-side .pn { animation: an-side-pn 3.6s var(--ease-kit) infinite; }
.mp-expop.play .an-side .ma { animation: an-side-ma 3.6s var(--ease-kit) infinite; transform-origin: left center; }
@keyframes an-side-pn { 0%, 35% { transform: translateX(24px); } 48%, 82% { transform: translateX(0); } 94%, 100% { transform: translateX(24px); } }
@keyframes an-side-ma { 0%, 35% { transform: scaleX(1); } 48%, 82% { transform: scaleX(.61); } 94%, 100% { transform: scaleX(1); } }
.mp-expop.play .an-pop .cur { animation-name: an-cur-pop; }
@keyframes an-cur-pop { 0% { transform: translate(52px, 16px); opacity: 0; } 6% { opacity: 1; } 28%, 36% { transform: translate(32px, 31px); opacity: 1; } 46%, 100% { transform: translate(32px, 31px); opacity: 0; } }
.mp-expop.play .an-pop .ov { animation: an-pop-ov 3.6s ease infinite; }
.mp-expop.play .an-pop .dl { animation: an-pop-dl 3.6s var(--ease-kit) infinite; transform-origin: center; }
@keyframes an-pop-ov { 0%, 35% { opacity: 0; } 46%, 82% { opacity: .5; } 92%, 100% { opacity: 0; } }
@keyframes an-pop-dl { 0%, 35% { opacity: 0; transform: scale(.85); } 48%, 82% { opacity: 1; transform: scale(1); } 92%, 100% { opacity: 0; transform: scale(.94); } }
.mp-expop.play .an-next .cur { animation-name: an-cur-next; }
@keyframes an-cur-next { 0% { transform: translate(46px, 18px); opacity: 0; } 6% { opacity: 1; } 28%, 36% { transform: translate(15px, 31px); opacity: 1; } 42%, 100% { transform: translate(15px, 31px); opacity: 0; } }
.mp-expop.play .an-next .strip { animation: an-next 3.6s var(--ease-kit) infinite; }
@keyframes an-next { 0%, 36% { transform: translateX(0); } 52%, 82% { transform: translateX(-64px); } 96%, 100% { transform: translateX(0); } }
.mp-expop.play .an-menu .cur { animation-name: an-cur-menu; }
@keyframes an-cur-menu { 0% { transform: translate(30px, 30px); opacity: 0; } 6% { opacity: 1; } 28%, 36% { transform: translate(56px, 5.5px); opacity: 1; } 50% { transform: translate(50px, 13px); } 64% { transform: translate(50px, 18px); } 78% { transform: translate(50px, 22.6px); opacity: 1; } 88%, 100% { transform: translate(50px, 22.6px); opacity: 0; } }
.an-menu .dd { transform: scaleY(0); opacity: 0; }
.mp-expop.play .an-menu .dd { animation: an-menu-dd 3.6s var(--ease-kit) infinite; transform-origin: top center; }
.mp-expop.play .an-menu .it { animation: an-menu-it 3.6s var(--ease-kit) infinite; }
@keyframes an-menu-dd { 0%, 35% { transform: scaleY(0); opacity: 0; } 44%, 84% { transform: scaleY(1); opacity: 1; } 92%, 100% { transform: scaleY(0); opacity: 0; } }
@keyframes an-menu-it { 0%, 46% { transform: translateY(0); } 56%, 62% { transform: translateY(5px); } 72%, 100% { transform: translateY(9.5px); } }
/* the board in the Result's side panel: the lanes one under another */
.mp-board.mp-side { grid-template-columns: minmax(0, 1fr); flex: none; min-height: 0; }
.mp-side .mp-lane { overflow: visible; min-height: 0; }
.mp-side .mp-addlane, .mp-side .mp-addlane:hover { flex-direction: row; justify-content: center; height: 40px; padding: 0; }
.mp-side .mp-addlane span { display: inline; }
@media (prefers-reduced-motion: reduce) { .mp *, .mp-board *, .mp-menu, .mp-tip, .mp-expop { animation-duration: .001s !important; transition-duration: .001s !important; } }
@media (max-width: 1100px) { .mp { height: auto; min-height: 0; } .mp-board { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mp-lane { min-height: 160px; } .mp-addlane { flex-direction: row; justify-content: center; padding: 0; min-height: 44px; } .mp-addlane span { display: inline; } }
@media (max-width: 760px) {
  main[data-step="map"] { padding: 20px 16px 24px; }
  .mp h1 { font-size: 19px; }
  .mp-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .mp-atts { flex-wrap: wrap; } .mp-att { max-width: 100%; }
  .mp-board { grid-template-columns: 1fr; }
  .mp-lane { min-height: 0; overflow: visible; }
  .mp-dragging .mp-drop:not(.mp-warn) { display: none; }
  .mp-bar { padding: 10px; }
  .mp-status { flex-basis: 100%; order: 2; min-width: 0; }
  .mp-status:empty { display: none; }
  .mp-new { order: 1; } .mp-back, .mp-go { order: 3; }
  .mp-go { flex: 1; justify-content: center; }
}