/* maslow.css — consensor multi-select · the effect · v1.1.0
   Finder marquee → floating frame; words shimmer to purple; icons get the selected tile; glass pill on the frame.
   Follows the viewer's theme (prefers-color-scheme / data-theme). */

:root {
  --maslow-font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --maslow-purple: #b45cf6;            /* the border, the pill button */
  --maslow-purple-rgb: 180, 92, 246;
  --maslow-ink-a: #8e4dff;             /* the letters: lilac → pink → purple */
  --maslow-ink-b: #c07dff;
  --maslow-ink-c: #ef8dff;
  --maslow-head: #f6a0ff;              /* the processing head: pink, blurred */
  --maslow-glass: rgba(255, 255, 255, .74);
  --maslow-glass-line: rgba(255, 255, 255, .7);
  --maslow-text: #1d1a26;
  --maslow-text-2: #6c6580;
  --maslow-toast-bg: #1d1a26;
  --maslow-toast-fg: #fff;
  --maslow-z: 2147483000;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --maslow-purple: #c67cff; --maslow-purple-rgb: 198, 124, 255; --maslow-ink-a: #b48cff; --maslow-ink-b: #d4a6ff; --maslow-ink-c: #f2b0ff; --maslow-head: #ffb3ff;
    --maslow-glass: rgba(34, 30, 46, .74); --maslow-glass-line: rgba(255, 255, 255, .14); --maslow-text: #f3f0fa; --maslow-text-2: #aaa2bd;
    --maslow-toast-bg: #f3f0fa; --maslow-toast-fg: #1d1a26;
  }
}
:root[data-theme="dark"] {
  --maslow-purple: #c67cff; --maslow-purple-rgb: 198, 124, 255; --maslow-ink-a: #b48cff; --maslow-ink-b: #d4a6ff; --maslow-ink-c: #f2b0ff; --maslow-head: #ffb3ff;
  --maslow-glass: rgba(34, 30, 46, .74); --maslow-glass-line: rgba(255, 255, 255, .14); --maslow-text: #f3f0fa; --maslow-text-2: #aaa2bd;
  --maslow-toast-bg: #f3f0fa; --maslow-toast-fg: #1d1a26;
}

/* ── page state ──────────────────────────────────────────────────────── */
html.maslow-dragging { touch-action: none; }   /* only while a frame is drawn: touch scrolling keeps working while Maslow is on */
html.maslow-pressing, html.maslow-pressing * { user-select: none !important; -webkit-user-select: none !important; }   /* a press on empty space draws a frame, not a selection */
html.maslow-cursor-on, html.maslow-cursor-on * { cursor: none !important; }
html.maslow-dragging, html.maslow-dragging * { user-select: none !important; -webkit-user-select: none !important; }

.maslow-ui { font-family: var(--maslow-font); color: var(--maslow-text); -webkit-font-smoothing: antialiased; box-sizing: border-box; }
.maslow-ui *, .maslow-ui *::before, .maslow-ui *::after { box-sizing: border-box; }

/* ── the marquee (Finder) ────────────────────────────────────────────── */
.maslow-layer { position: fixed; inset: 0; z-index: var(--maslow-z); pointer-events: none; }
.maslow-marquee {
  position: fixed; border-radius: 3px;
  background: rgba(var(--maslow-purple-rgb), .10);
  border: 1px solid rgba(var(--maslow-purple-rgb), .9);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}
.maslow-hit { position: fixed; background: rgba(var(--maslow-purple-rgb), .18); border-radius: 3px; }
.maslow-tile { position: fixed; background: rgba(70, 25, 120, .22); border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }

/* ── the floating frame ──────────────────────────────────────────────── */
.maslow-frame {
  position: fixed; pointer-events: none; border-radius: 9px;
  border: 1.5px solid var(--maslow-purple);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .45) inset, 0 0 0 4px rgba(var(--maslow-purple-rgb), .10), 0 0 28px rgba(var(--maslow-purple-rgb), .26);
  z-index: calc(var(--maslow-z) - 1);
  transition: opacity .18s ease, box-shadow .5s ease;
}
.maslow-frame.is-new { box-shadow: 0 0 0 1px rgba(255, 255, 255, .45) inset, 0 0 0 0 rgba(var(--maslow-purple-rgb), 0), 0 0 0 rgba(var(--maslow-purple-rgb), 0); }
.maslow-frame.is-out { opacity: 0; }
.maslow-corner { position: absolute; width: 11px; height: 11px; border: 2px solid var(--maslow-purple); }
.maslow-corner.tl { left: -4px; top: -4px; border-right: 0; border-bottom: 0; border-top-left-radius: 4px; }
.maslow-corner.tr { right: -4px; top: -4px; border-left: 0; border-bottom: 0; border-top-right-radius: 4px; }
.maslow-corner.bl { left: -4px; bottom: -4px; border-right: 0; border-top: 0; border-bottom-left-radius: 4px; }
.maslow-corner.br { right: -4px; bottom: -4px; border-left: 0; border-top: 0; border-bottom-right-radius: 4px; }

/* tiles inside the frame: images, icons, buttons, fields */
.maslow-frame .maslow-tile { position: absolute; }
.maslow-tile.is-set {
  background: rgba(70, 25, 120, .20);
  box-shadow: inset 0 0 0 1px rgba(var(--maslow-purple-rgb), .6), inset 0 0 0 2px rgba(255, 255, 255, .22);
  animation: maslow-tile .6s ease var(--d, 0ms) both;
}
@keyframes maslow-tile { 0% { opacity: 0; } 40% { opacity: 1; background: rgba(var(--maslow-purple-rgb), .38); } 100% { opacity: 1; } }

/* ── the words: processing wave → gradient letters (Writing Tools) ──── */
.maslow-ink {
  background-image: linear-gradient(90deg, var(--maslow-ink-a), var(--maslow-ink-b), var(--maslow-ink-c), var(--maslow-ink-b), var(--maslow-ink-a));
  background-size: calc(var(--mw, 600px) * 2) 100%;
  background-position: calc(-1 * var(--mo, 0px)) 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: maslow-proof .9s cubic-bezier(.3, .6, .2, 1) var(--d, 0ms) both, maslow-drift 9s linear calc(var(--d, 0ms) + .9s) infinite;
}
@keyframes maslow-proof {
  0%   { -webkit-text-fill-color: currentColor; filter: blur(0); opacity: 1; }
  40%  { -webkit-text-fill-color: var(--maslow-head); filter: blur(2.2px); opacity: .55; }
  100% { -webkit-text-fill-color: transparent; filter: blur(0); opacity: 1; }
}
@keyframes maslow-drift {
  from { background-position: calc(-1 * var(--mo, 0px)) 0; }
  to   { background-position: calc(-1 * var(--mo, 0px) - var(--mw, 600px) * 2) 0; }
}

/* ── the pill: glass, floats on the frame ────────────────────────────── */
.maslow-pill {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); pointer-events: auto;
  display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 6px 0 12px; white-space: nowrap; max-width: calc(100vw - 32px);
  border-radius: 999px; background: var(--maslow-glass); border: 1px solid var(--maslow-glass-line);
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  box-shadow: 0 10px 32px rgba(60, 20, 120, .20), 0 1px 2px rgba(0, 0, 0, .06), inset 0 1px 0 rgba(255, 255, 255, .5);
  font-size: 13px; line-height: 1; color: var(--maslow-text);
  animation: maslow-pop .32s cubic-bezier(.2, .8, .2, 1.2) var(--d, 700ms) both;
}
.maslow-pill.at-bottom { top: 100%; }
.maslow-pill.inside { top: 12px; transform: translate(-50%, 0); }
@keyframes maslow-pop { from { opacity: 0; transform: translate(-50%, -50%) scale(.92); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.maslow-pill.inside { animation-name: maslow-pop-in; }
@keyframes maslow-pop-in { from { opacity: 0; transform: translate(-50%, 0) scale(.92); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
.maslow-pbrand { display: flex; align-items: center; gap: 7px; font-weight: 600; letter-spacing: -.01em; }
.maslow-pbrand svg { width: 18px; height: 18px; display: block; overflow: visible; }
.maslow-pbrand .mc-light, .maslow-pbrand .mc-light2 { display: none; }
.maslow-pcount { color: var(--maslow-text-2); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.maslow-pbtn {
  appearance: none; font: inherit; font-size: 13px; font-weight: 600; line-height: 1; height: 28px; padding: 0 12px; border-radius: 999px;
  border: 0; background: transparent; color: var(--maslow-text); cursor: pointer;
}
.maslow-pbtn:hover { background: rgba(var(--maslow-purple-rgb), .12); }
.maslow-pbtn.primary { background: var(--maslow-purple); color: #fff; }
.maslow-pbtn.primary:hover { filter: brightness(.94); background: var(--maslow-purple); }
.maslow-pbtn:focus-visible { outline: 2px solid var(--maslow-purple); outline-offset: 2px; }
html.maslow-cursor-on .maslow-pill, html.maslow-cursor-on .maslow-pill *, html.maslow-cursor-on .maslow-panel, html.maslow-cursor-on .maslow-panel * { cursor: none !important; }
.maslow-pill.is-thinking .maslow-pcount { color: transparent; background: linear-gradient(90deg, var(--maslow-ink-a), var(--maslow-ink-c), var(--maslow-ink-a)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: maslow-think 1.6s linear infinite; }

/* ── the meaning: a glass panel under the frame ─────────────────────── */
.maslow-panel {
  position: absolute; left: 0; top: 100%; margin-top: 12px; width: clamp(300px, 100%, 480px); max-width: calc(100vw - 32px); pointer-events: auto;
  padding: 12px 14px 10px; border-radius: 16px; background: var(--maslow-glass); border: 1px solid var(--maslow-glass-line);
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  box-shadow: 0 14px 40px rgba(60, 20, 120, .20), 0 1px 2px rgba(0, 0, 0, .06), inset 0 1px 0 rgba(255, 255, 255, .5);
  color: var(--maslow-text); font-size: 14px; line-height: 1.45; user-select: text; -webkit-user-select: text;
  animation: maslow-panel .32s cubic-bezier(.2, .8, .2, 1.1) both;
}
.maslow-panel.above { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 30px; }
.maslow-panel.side { top: 0; left: 100%; margin-top: 0; margin-left: 12px; width: 320px; }
@keyframes maslow-panel { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.maslow-peyebrow { margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--maslow-text-2); }
.maslow-meaning { margin: 0; white-space: pre-wrap; word-break: break-word; max-height: 40vh; overflow: auto; }
.maslow-meaning.is-thinking {
  color: transparent; background: linear-gradient(90deg, var(--maslow-ink-a), var(--maslow-ink-c), var(--maslow-ink-a)); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: maslow-think 1.6s linear infinite; font-weight: 500;
}
@keyframes maslow-think { to { background-position: -200% 0; } }
.maslow-note { margin-top: 8px; font-size: 12.5px; color: var(--maslow-text-2); }
.maslow-pfoot { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.maslow-pfoot:empty, .maslow-pfoot:not(:has(:not([hidden]))) { display: none; }

/* ── cursor (only when Maslow draws it) ──────────────────────────────── */
.maslow-cursor { position: fixed; left: 0; top: 0; width: 36px; height: 36px; pointer-events: none; z-index: calc(var(--maslow-z) + 10); will-change: transform; transition: opacity .15s ease; }
.maslow-cursor.is-hidden { opacity: 0; }
.maslow-cursor svg { width: 36px; height: 36px; display: block; overflow: visible; }
.maslow-cursor .mc-press { transform-origin: 20.5% 20.5%; transition: transform .12s ease; }
.maslow-cursor.is-hover .mc-press { transform: scale(1.06); }
.maslow-cursor.is-down .mc-press { transform: scale(.88); }
.maslow-cursor .mc-breathe { transform-origin: 50% 50%; animation: maslow-breathe 4.8s ease-in-out infinite; }
.maslow-cursor .mc-light { stroke-dasharray: 24 68; animation: maslow-orbit 6.4s linear infinite; }
.maslow-cursor .mc-light2 { stroke-dasharray: 12 80; animation: maslow-orbit 9s linear infinite reverse; }
@keyframes maslow-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes maslow-orbit { to { stroke-dashoffset: -184; } }

/* ── toast ───────────────────────────────────────────────────────────── */
.maslow-toast {
  position: fixed; z-index: calc(var(--maslow-z) + 6); background: var(--maslow-toast-bg); color: var(--maslow-toast-fg); font-size: 12px;
  padding: 6px 11px; border-radius: 999px; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .18s ease, transform .18s ease; white-space: nowrap;
}
.maslow-toast.show { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .maslow-ink { animation: none; }
  .maslow-tile.is-set, .maslow-pill { animation-duration: .01s; animation-delay: 0s; }
  .maslow-cursor * { animation: none !important; }
}