/* Sift — a concept for reviewing a whole spend project in the browser.
   Built on ORA's own system: lavender aurora ground, glass reserved for shell and temporary layers, icon marks
   instead of labels, ORA violet as the one accent, and the state of every number shown as a mark, not a word.
   Layout: header · icon rail · one stage · Ask Sift docked right · a focus sheet that slides over for detail. */
:root {
  --ground: #f4f1fa;
  --ink: #261d33;
  --ink-2: #43355a;
  --mute: #6f6580;
  --quiet: #9a90a3;
  --line: #e6ddef;
  --line-2: rgba(91, 65, 125, .14);
  --glass: rgba(255, 255, 255, .52);
  --glass-2: rgba(250, 248, 253, .94);
  --violet: #6d35c6;
  --violet-2: #5b21b6;
  --lav-50: #f7f5ff;
  --lav-100: #efeafe;
  --lav-200: #ddd6fe;
  --lav-300: #c4b5fd;
  --lav-400: #a78bfa;
  --lav-500: #8b5cf6;
  --grad: linear-gradient(120deg, #b59dfb 0%, #8e5cf6 44%, #6d28d9 100%);
  /* what a number's state is: one colour each, always with a mark */
  --s-val: #1d8d63;
  --s-ai: #8b5cf6;
  --s-cli: #3f86c9;
  --s-sug: #c4b5fd;
  --s-open: #d8d0e4;
  --pain: #c24f7e;
  --amber: #b7791f;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 16px;
  --shadow: 0 22px 56px -30px rgba(76, 29, 149, .38);
  --ease: cubic-bezier(.22, 1, .36, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 500 13px/1.45 var(--sans);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
}
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--lav-400); outline-offset: 2px; }
.ph, .ph-fill, .ph-duotone { line-height: 1; }

/* ORA's ground: two soft lights and a drifting glow */
.aurora {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(980px 620px at 8% -12%, rgba(201, 180, 255, .45), transparent 64%),
    radial-gradient(780px 520px at 96% 8%, rgba(179, 221, 255, .32), transparent 67%),
    radial-gradient(700px 600px at 70% 110%, rgba(236, 200, 255, .3), transparent 70%),
    linear-gradient(145deg, #f9f8fc 0%, #f0edf7 56%, #f8f8fb 100%);
}
.aurora::after {
  content: ""; position: absolute; width: 60vw; height: 60vw; left: 30%; top: 20%; border-radius: 50%;
  background: radial-gradient(circle, rgba(196, 181, 253, .22), transparent 65%);
  filter: blur(30px); animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate3d(-18%, 10%, 0) scale(1.1); } }

/* ---- header ---------------------------------------------------------------------------------------------------- */
.hdr {
  position: fixed; z-index: 40; top: 0; left: 0; right: 0; height: 58px;
  display: flex; align-items: center; gap: 14px;
  padding: 0 max(18px, env(safe-area-inset-right)) 0 max(18px, env(safe-area-inset-left));
  background: rgba(248, 247, 252, .82); border-bottom: 1px solid rgba(255, 255, 255, .8);
  box-shadow: 0 8px 30px rgba(53, 36, 76, .06); backdrop-filter: blur(18px) saturate(1.22);
}
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font: 800 21px/1 var(--serif); letter-spacing: -.02em; }
.brand-mark { width: 26px; height: 28px; overflow: visible; }
.brand:hover .bm-d1 { animation: fall 1.1s var(--ease); }
.brand:hover .bm-d2 { animation: fall 1.1s .12s var(--ease); }
.brand:hover .bm-d3 { animation: fall 1.1s .24s var(--ease); }
@keyframes fall { 0% { transform: translateY(-12px); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; } }
.proj {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0; border: 0; border-radius: 10px;
  background: transparent; padding: 6px 9px; cursor: pointer;
}
.proj:hover { background: rgba(255, 255, 255, .6); }
.proj i { color: var(--violet); font-size: 15px; }
.proj b { font: 750 13px var(--sans); }
.proj small { color: var(--mute); font: 600 11px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj .caret { color: var(--quiet); font-size: 10px; }
.hdr-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.quiet {
  position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 34px;
  border: 1px solid var(--line-2); border-radius: 10px; background: rgba(255, 255, 255, .55);
  padding: 0 12px 0 9px; font: 680 11.5px var(--sans); color: #43355a; cursor: pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.quiet:hover { background: #fff; border-color: rgba(100, 51, 167, .3); transform: translateY(-1px); }
.quiet i { color: var(--violet); font-size: 16px; }
.runs { position: relative; }
.runs-mark { display: inline-grid; place-items: center; width: 20px; height: 20px; }
.runs-mark .g { width: 22px; height: 22px; }
.runs.is-running .quiet { background: rgba(246, 240, 253, .95); border-color: rgba(112, 52, 181, .26); color: #4c1d95; }
.runs-bar { position: absolute; left: 10px; right: 10px; bottom: 4px; height: 2px; border-radius: 2px; background: transparent; overflow: hidden; }
.runs.is-running .runs-bar { background: rgba(124, 58, 237, .12); }
.runs-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: linear-gradient(90deg, #a78bfa, #7c3aed); transition: width .4s ease; }
.runs-dot { position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%; background: #7c3aed; border: 2px solid #f8f7fc; animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(.75); opacity: .55; } }
.people { display: flex; padding-left: 4px; }
.av {
  display: inline-grid; place-items: center; width: 28px; height: 28px; margin-left: -6px; border-radius: 50%;
  border: 2px solid #f8f7fc; font: 800 9.5px var(--sans); color: #fff; letter-spacing: .02em; position: relative;
}
.av-you { background: linear-gradient(135deg, #a78bfa, #6d28d9); }
.av-v { background: linear-gradient(135deg, #5fc79b, #1d8d63); }
.av-v::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; border: 2px solid #f8f7fc; }
.av-c { background: linear-gradient(135deg, #8fc1ee, #3f86c9); }
.av.sm { width: 20px; height: 20px; margin: 0; font-size: 7.5px; border-width: 1.5px; }

/* Ask Sift: the one filled control, with a soft light and one sweep when the page opens (ORA) */
.ask-trigger {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 7px; min-height: 34px;
  overflow: hidden; border: 0; border-radius: 999px; background: var(--grad); color: #fff; padding: 0 17px 0 13px;
  font: 760 12px var(--sans); text-shadow: 0 1px 1px rgba(58, 18, 118, .28); cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 6px 16px -6px rgba(109, 40, 217, .62), 0 0 24px -4px rgba(167, 139, 250, .6);
  transition: transform .18s ease, filter .22s ease;
}
.ask-trigger::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
  transform: translateX(-140%); animation: sheen 1.3s .6s ease both;
}
.ask-trigger:hover { transform: translateY(-1px); filter: saturate(1.08) brightness(1.04); }
.ask-trigger:hover::after { animation: sheen 1.05s ease forwards; }
.ask-trigger:hover i { animation: twinkle .9s ease; }
.ask-trigger[aria-pressed="true"] { filter: brightness(.95); box-shadow: inset 0 2px 6px rgba(40, 10, 90, .35); }
@keyframes sheen { from { transform: translateX(-140%); } to { transform: translateX(140%); } }
@keyframes twinkle { 45% { transform: scale(1.25) rotate(16deg); } }

/* ---- rail ------------------------------------------------------------------------------------------------------ */
.rail {
  position: fixed; z-index: 30; top: 70px; left: max(12px, env(safe-area-inset-left)); bottom: 14px; width: 52px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 0;
  border: 1px solid rgba(255, 255, 255, .8); border-radius: 18px; background: var(--glass);
  backdrop-filter: blur(18px) saturate(1.2); box-shadow: var(--shadow);
}
.rail a, .rail-key {
  position: relative; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 12px;
  background: transparent; color: #6f6580; cursor: pointer; transition: background .16s, color .16s, transform .16s;
}
.rail a i, .rail-key i { font-size: 20px; }
.rail a:hover, .rail-key:hover { background: rgba(255, 255, 255, .8); color: var(--violet); }
.rail a.on { background: #fff; color: var(--violet-2); box-shadow: 0 6px 16px -8px rgba(76, 29, 149, .45); }
.rail a.on::before { content: ""; position: absolute; left: -8px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--grad); }
.rail-n { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--pain); color: #fff; font: 800 9px/16px var(--sans); text-align: center; }
.rail-n:empty { display: none; }
.rail-gap { flex: 1; }

/* ---- stage ----------------------------------------------------------------------------------------------------- */
.stage {
  position: fixed; top: 58px; bottom: 0; left: 0; right: 0; overflow: auto;
  padding: 16px max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left));
  transition: right .38s var(--ease);
}
body.has-rail .stage { padding-left: calc(max(12px, env(safe-area-inset-left)) + 52px + 16px); }
body.ask-open .stage { right: 420px; }
.view { min-height: 100%; }
.panel { border: 1px solid rgba(255, 255, 255, .78); border-radius: 20px; background: var(--glass); backdrop-filter: blur(18px) saturate(1.2); box-shadow: var(--shadow); }

/* icon marks: a circular gradient mark leads a section instead of an eyebrow (ORA deliverable language) */
.mark { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--grad); color: #fff; flex: none; box-shadow: 0 6px 14px -6px rgba(109, 40, 217, .6); }
.mark i { font-size: 15px; }
.mark.soft { background: var(--lav-100); color: var(--violet); box-shadow: none; }
.h { display: flex; align-items: center; gap: 10px; margin: 0; font: 760 15px var(--sans); letter-spacing: -.01em; }
.h .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.muted { color: var(--mute); }
.num { font-variant-numeric: tabular-nums; }
.big { font: 700 30px/1 var(--serif); letter-spacing: -.02em; }

/* ---- state marks: the vocabulary ------------------------------------------------------------------------------- */
.st { display: inline-grid; place-items: center; width: 16px; height: 16px; flex: none; border-radius: 50%; font-size: 10px; color: #fff; }
.st.val { background: var(--s-val); }
.st.ai { background: var(--s-ai); }
.st.cli { background: var(--s-cli); }
.st.sug { background: #fff; border: 1.5px dashed var(--lav-500); color: var(--lav-500); }
.st.open { background: #fff; border: 1.5px solid #c9bfd8; }
.mk { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 6px; border-radius: 999px; font: 750 10px var(--sans); white-space: nowrap; }
.mk i { font-size: 12px; }
.mk.over { background: rgba(194, 79, 126, .1); color: var(--pain); }
.mk.unsure { background: rgba(139, 92, 246, .1); color: var(--violet); }
.mk.kos { background: rgba(194, 79, 126, .1); color: var(--pain); }
.mk.asked { background: rgba(183, 121, 31, .12); color: var(--amber); }
.mk.edit { background: rgba(109, 53, 198, .12); color: var(--violet-2); }
.split { width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(90deg, var(--s-ai) 50%, var(--pain) 50%); display: inline-block; }
.mixbar { display: flex; height: 6px; border-radius: 6px; overflow: hidden; background: rgba(216, 208, 228, .5); }
.mixbar span { display: block; height: 100%; }
.mixbar .val { background: var(--s-val); }
.mixbar .ai { background: var(--s-ai); }
.mixbar .cli { background: var(--s-cli); }
.mixbar .sug { background: repeating-linear-gradient(135deg, var(--lav-300) 0 3px, #fff 3px 5px); }
.mixbar .open { background: transparent; }

/* ---- home ------------------------------------------------------------------------------------------------------ */
.home { max-width: 1240px; margin: 0 auto; padding-top: 18px; }
.home-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 6px 4px 22px; flex-wrap: wrap; }
.home-top h1 { margin: 0; font: 800 clamp(28px, 4vw, 40px)/1.05 var(--serif); letter-spacing: -.03em; }
.home-top h1 span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.new-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; border: 0; border-radius: 12px; background: var(--violet-2); color: #fff; padding: 0 18px 0 14px; font: 750 13px var(--sans); cursor: pointer; box-shadow: 0 12px 24px -14px rgba(76, 29, 149, .9); transition: transform .16s, background .16s; }
.new-btn:hover { background: #4c1d95; transform: translateY(-1px); }
.new-btn i { font-size: 18px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 14px; }
.pcard {
  position: relative; display: grid; gap: 12px; padding: 16px; border: 1px solid rgba(255, 255, 255, .8); border-radius: 20px;
  background: var(--glass); backdrop-filter: blur(16px); cursor: pointer; text-align: left;
  transition: transform .2s var(--ease), box-shadow .2s, border-color .2s;
}
.pcard:hover { transform: translateY(-3px); border-color: rgba(124, 58, 237, .3); box-shadow: 0 26px 50px -30px rgba(76, 29, 149, .55); }
.pcard.live { grid-column: span 2; grid-template-columns: 1.1fr 1fr; align-items: stretch; background: rgba(255, 255, 255, .66); }
.pcard .code { display: flex; align-items: center; gap: 9px; font: 800 20px var(--serif); }
.pcard .ind { display: flex; align-items: center; gap: 6px; color: var(--mute); font-weight: 600; }
.pcard .ind i { color: var(--violet); }
.pcard .stats { display: flex; gap: 14px; flex-wrap: wrap; color: var(--ink-2); font-weight: 700; }
.pcard .stats span { display: inline-flex; align-items: center; gap: 5px; }
.pcard .stats i { color: var(--quiet); font-size: 15px; }
.pcard .thumb { position: relative; min-height: 130px; border-radius: 14px; overflow: hidden; background: rgba(239, 234, 254, .6); }
.pcard .thumb div { position: absolute; border: 1.5px solid rgba(255, 255, 255, .9); border-radius: 6px; }
.pcard .has { display: flex; gap: 8px; }
.pcard .has span { position: relative; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 20px; color: #b9aecb; background: rgba(243, 240, 247, .7); }
.pcard .has span:not(.on)::after { content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: 2px; border-radius: 2px; background: #c9bfd8; transform: rotate(-38deg); }
.pcard .has span.on { color: #fff; background: var(--violet-2); box-shadow: 0 8px 16px -10px rgba(76, 29, 149, .8); }
.pcard .live-dot { display: inline-flex; align-items: center; gap: 6px; color: var(--s-val); font: 750 11px var(--sans); }
.pcard .live-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 1.8s infinite; }
.flow { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-weight: 750; }
.flow i { color: var(--lav-400); }
.dots { display: flex; flex-wrap: wrap; gap: 3px; height: 40px; align-content: flex-start; overflow: hidden; }
.dots b { width: 6px; height: 6px; border-radius: 50%; background: var(--lav-300); }
.dots b:nth-child(5n) { background: var(--violet); }
.ring { --v: 0; width: 40px; height: 40px; border-radius: 50%; background: conic-gradient(var(--s-val) calc(var(--v) * 1turn), rgba(216, 208, 228, .6) 0); display: grid; place-items: center; flex: none; }
.ring::after { content: ""; width: 30px; height: 30px; border-radius: 50%; background: #fbfaff; }

/* ---- opening instrument (progress moves only as real requests resolve) ---------------------------------------- */
.opening { position: fixed; inset: 58px 0 0 0; z-index: 35; display: grid; place-items: center; background: rgba(244, 241, 250, .55); backdrop-filter: blur(6px); transition: opacity .5s ease; }
.opening.out { opacity: 0; pointer-events: none; }
.opening-card { width: min(560px, calc(100vw - 32px)); padding: 30px 30px 24px; border-radius: 28px; border: 1px solid rgba(255, 255, 255, .8); background: linear-gradient(145deg, rgba(255, 255, 255, .78), rgba(247, 244, 252, .5)); backdrop-filter: blur(26px) saturate(1.2); box-shadow: 0 34px 100px rgba(48, 29, 74, .16); }
.opening-card h2 { margin: 0 0 18px; font: 800 30px/1.1 var(--serif); letter-spacing: -.03em; }
.opening-steps { display: grid; gap: 6px; }
.ostep { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; color: var(--quiet); transition: background .3s, color .3s; }
.ostep .g { width: 38px; height: 38px; }
.ostep.on { background: rgba(255, 255, 255, .8); color: var(--ink); box-shadow: 0 8px 20px -14px rgba(76, 29, 149, .5); }
.ostep.done { color: var(--ink-2); }
.ostep b { font: 750 13px var(--sans); }
.ostep small { display: block; color: var(--mute); font-weight: 600; }
.ostep .ok { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: transparent; }
.ostep.done .ok { background: var(--s-val); animation: pop .4s var(--ease); }
@keyframes pop { from { transform: scale(.3); } }

/* ---- landscape ------------------------------------------------------------------------------------------------- */
.land { display: grid; grid-template-columns: minmax(0, 1fr) 330px; grid-template-rows: auto 1fr; gap: 14px; height: calc(100vh - 58px - 40px); min-height: 560px; }
.pulse { grid-column: 1 / -1; display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 22px; padding: 14px 18px; }
.pulse .spend { display: grid; gap: 6px; }
.pulse .facts { display: flex; gap: 14px; color: var(--mute); font-weight: 650; flex-wrap: wrap; }
.pulse .facts span { display: inline-flex; align-items: center; gap: 5px; }
.pulse .facts i { color: var(--lav-500); font-size: 15px; }
.donut { position: relative; width: 84px; height: 84px; cursor: pointer; }
.donut svg { width: 84px; height: 84px; transform: rotate(-90deg); overflow: visible; }
.donut circle { fill: none; stroke-width: 11; transition: stroke-width .2s; cursor: pointer; }
.donut circle:hover, .donut circle.on { stroke-width: 15; }
.donut .c { position: absolute; inset: 0; display: grid; place-items: center; font: 800 17px/1 var(--serif); letter-spacing: -.02em; pointer-events: none; }
.legend { display: grid; grid-template-columns: repeat(3, auto); gap: 4px 14px; }
.legend button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 3px 6px; border-radius: 8px; color: var(--ink-2); font-weight: 650; cursor: pointer; white-space: nowrap; }
.legend button:hover, .legend button.on { background: rgba(255, 255, 255, .85); }
.legend button.on { box-shadow: inset 0 0 0 1.5px var(--lav-300); }
.legend em { font-style: normal; color: var(--mute); font-weight: 650; }
.years { display: flex; align-items: flex-end; gap: 5px; height: 46px; }
.years div { display: grid; justify-items: center; gap: 3px; }
.years span { display: block; width: 16px; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, var(--lav-400), var(--lav-200)); transform-origin: bottom; animation: grow .7s var(--ease) both; }
.years small { color: var(--quiet); font: 700 9px var(--sans); }
@keyframes grow { from { transform: scaleY(0); } }
.marks { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.marks .mk { height: 28px; padding: 0 10px; font-size: 11.5px; border: 0; cursor: pointer; }
.marks .mk i { font-size: 15px; }
.marks .mk.on { box-shadow: inset 0 0 0 1.5px currentColor; }

.mapwrap { position: relative; display: grid; grid-template-rows: auto 1fr; gap: 10px; min-height: 0; }
.crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 32px; }
.crumb { display: inline-flex; align-items: center; gap: 6px; height: 30px; border: 1px solid rgba(255, 255, 255, .85); border-radius: 999px; background: var(--glass); padding: 0 12px 0 9px; color: var(--ink-2); font: 700 12px var(--sans); cursor: pointer; backdrop-filter: blur(10px); }
.crumb:hover { background: #fff; color: var(--violet); }
.crumb i { color: var(--violet); font-size: 14px; }
.crumb.here { background: #fff; color: var(--ink); box-shadow: 0 6px 16px -10px rgba(76, 29, 149, .5); cursor: default; }
.crumbs .sep { color: var(--quiet); font-size: 11px; }
.crumbs .spacer { flex: 1; }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .85); }
.seg button { display: inline-grid; place-items: center; min-width: 30px; height: 26px; border: 0; border-radius: 8px; background: transparent; color: var(--mute); cursor: pointer; padding: 0 8px; gap: 5px; grid-auto-flow: column; font-weight: 700; font-size: 11.5px; }
.seg button i { font-size: 15px; }
.seg button.on { background: #fff; color: var(--violet-2); box-shadow: 0 4px 12px rgba(76, 29, 149, .12); }

.map { position: relative; min-height: 0; border-radius: 20px; }
.tile {
  position: absolute; overflow: hidden; border-radius: 12px; cursor: pointer; padding: 10px 11px 14px;
  border: 1px solid rgba(255, 255, 255, .92); background: linear-gradient(160deg, rgba(255, 255, 255, .92), var(--tint, #efe7fd));
  box-shadow: 0 10px 26px -22px rgba(76, 29, 149, .6);
  transition: transform .22s var(--ease), box-shadow .22s, filter .22s, left .5s var(--ease), top .5s var(--ease), width .5s var(--ease), height .5s var(--ease);
  display: flex; flex-direction: column; gap: 3px;
}
.tile:hover { transform: translateY(-2px); z-index: 3; box-shadow: 0 0 0 2px rgba(196, 181, 253, .9), 0 22px 40px -22px rgba(76, 29, 149, .7); }
.tile .tn { font: 720 12.5px/1.25 var(--sans); color: var(--ink); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-wrap: balance; }
.tile .tv { font: 700 17px/1.1 var(--serif); color: var(--ink-2); letter-spacing: -.01em; }
.tile.l .tv { font-size: 26px; }
.tile .tm { position: absolute; left: 10px; bottom: 12px; display: flex; gap: 3px; }
.tile .top3 { display: grid; gap: 4px; margin-top: 8px; }
.tile .top3 div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; font: 600 11px var(--sans); color: var(--ink-2); }
.tile .top3 div span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile .top3 div em { font-style: normal; color: var(--mute); }
.tile .top3 i { grid-column: 1 / -1; height: 3px; border-radius: 3px; background: rgba(139, 92, 246, .28); margin-top: -1px; }
.tile.m .top3 div:nth-child(n+2) { display: none; }
.tile .tm .mk { height: 18px; padding: 0 5px; font-size: 9.5px; background: rgba(255, 255, 255, .85); }
.tile .mixbar { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; border-radius: 0; }
.tile.xs .tn, .tile.xs .tv, .tile.xs .tm, .tile.xs .top3 { display: none; }
.tile.s .tv, .tile.s .tm, .tile.s .top3 { display: none; }
.tile .tn { white-space: nowrap; text-overflow: ellipsis; display: block; }
.tile.s .tn { font-size: 10.5px; -webkit-line-clamp: 1; }
.tile.dim { filter: saturate(.3) opacity(.45); }
.tile.ent { --tint: #f4f0fc; }
.tile .ghost-n { position: absolute; right: 9px; bottom: 11px; display: flex; gap: 2px; }
.tile .ghost-n b { width: 5px; height: 5px; border-radius: 50%; background: var(--lav-400); }

.lens { display: grid; grid-template-rows: auto auto 1fr; min-height: 0; overflow: hidden; }
.lens-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 8px; }
.lens-head .h { flex: 1; min-width: 0; }
.lens-head .h span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search { display: flex; align-items: center; gap: 7px; margin: 0 12px 8px; height: 34px; padding: 0 10px; border-radius: 11px; background: rgba(255, 255, 255, .7); border: 1px solid var(--line-2); }
.search i { color: var(--quiet); font-size: 15px; }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; font: 600 12.5px var(--sans); color: var(--ink); outline: 0; }
.list { overflow: auto; padding: 0 8px 10px; }
.row {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 9px; row-gap: 4px;
  align-items: center; padding: 8px 8px; border-radius: 12px; cursor: pointer; transition: background .14s;
}
.row:hover { background: rgba(255, 255, 255, .8); }
.row.sel { background: #fff; box-shadow: 0 6px 16px -12px rgba(76, 29, 149, .6); }
.row .nm { font: 700 12.5px var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .v { font: 700 12px var(--sans); color: var(--ink-2); }
.row .bar { grid-column: 2 / 4; display: flex; align-items: center; gap: 6px; min-width: 0; }
.row .track { flex: 1; min-width: 0; }
.row .bar .mixbar { height: 4px; }
.row .meta { display: flex; gap: 3px; }
.row .meta .mk { height: 16px; padding: 0 4px; font-size: 9px; }
.vdots { display: inline-flex; gap: 2px; }
.vdots b { width: 4px; height: 4px; border-radius: 50%; background: var(--lav-400); }

/* ---- focus sheet ----------------------------------------------------------------------------------------------- */
.scrim { position: fixed; inset: 0; z-index: 50; background: rgba(38, 24, 61, .16); backdrop-filter: blur(3px); animation: fade .3s ease; }
@keyframes fade { from { opacity: 0; } }
.focus {
  position: fixed; z-index: 55; top: 10px; bottom: 10px; right: 10px; width: min(940px, calc(100vw - 20px));
  display: grid; grid-template-rows: auto 1fr auto; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .9); border-radius: 24px; background: rgba(250, 249, 253, .9);
  backdrop-filter: blur(24px) saturate(1.2); box-shadow: 0 32px 90px rgba(31, 20, 42, .28);
  animation: slidein .45s var(--ease);
}
body.ask-open .focus { right: 430px; width: min(860px, calc(100vw - 450px)); }
@keyframes slidein { from { transform: translateX(40px); opacity: 0; } }
.f-head { display: grid; grid-template-columns: 1fr auto; gap: 14px; padding: 20px 22px 14px; border-bottom: 1px solid rgba(124, 58, 237, .08); background: rgba(255, 255, 255, .5); }
.f-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.f-title h2 { margin: 0; font: 800 26px/1.1 var(--serif); letter-spacing: -.02em; overflow-wrap: anywhere; }
.f-sub { display: flex; align-items: center; gap: 14px; margin-top: 10px; flex-wrap: wrap; color: var(--mute); font-weight: 650; }
.f-sub span { display: inline-flex; align-items: center; gap: 5px; }
.f-sub i { color: var(--lav-500); font-size: 15px; }
.f-close { display: flex; gap: 6px; align-items: flex-start; }
.icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line-2); border-radius: 10px; background: rgba(255, 255, 255, .6); color: var(--ink-2); cursor: pointer; transition: background .15s, transform .15s; }
.icon:hover { background: #fff; transform: translateY(-1px); color: var(--violet); }
.icon i { font-size: 16px; }
.f-body { overflow: auto; padding: 16px 22px 24px; display: grid; gap: 14px; align-content: start; }
.blk { display: grid; gap: 10px; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .9); }
.blk > .h { font-size: 13.5px; }
.blk > .h .mark { width: 26px; height: 26px; }
.blk > .h .mark i { font-size: 13px; }
.blk > .h .spacer { flex: 1; }
.spark { display: flex; align-items: flex-end; gap: 4px; height: 38px; }
.spark span { width: 14px; border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, var(--lav-400), var(--lav-200)); transform-origin: bottom; animation: grow .6s var(--ease) both; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  position: relative; display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-height: 32px; padding: 4px 10px 4px 6px;
  border-radius: 10px; background: #fff; border: 1px solid var(--line); font: 650 12px var(--sans); color: var(--ink);
  transition: transform .16s, box-shadow .16s, border-color .16s; cursor: default;
}
.chip .w { display: inline-block; height: 20px; min-width: 4px; border-radius: 5px; background: var(--lav-200); }
.chip em { font-style: normal; color: var(--mute); font-weight: 650; }
.chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip.ghost { background: rgba(255, 255, 255, .4); border: 1.5px dashed rgba(194, 79, 126, .55); color: var(--ink-2); cursor: pointer; }
.chip.ghost:hover { border-color: var(--pain); transform: translateY(-1px); }
.chip.twin { border: 1.5px dashed var(--lav-400); background: rgba(247, 245, 255, .6); cursor: pointer; }
.chip.twin:hover { border-color: var(--violet); transform: translateY(-1px); }
.chip.twin i, .chip.ghost i { font-size: 14px; }
.chip.twin i { color: var(--violet); }
.chip.ghost i { color: var(--pain); }
.chip.add { border-style: dashed; color: var(--violet); background: transparent; cursor: pointer; }
.path { display: flex; align-items: center; gap: 0; flex-wrap: wrap; row-gap: 8px; }
.node {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--line);
  background: #fff; font: 700 12.5px var(--sans); color: var(--ink); cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s;
}
.node:hover { border-color: var(--lav-400); transform: translateY(-1px); box-shadow: 0 8px 18px -12px rgba(76, 29, 149, .6); }
.node i { color: var(--violet); }
.link { width: 22px; height: 2px; background: linear-gradient(90deg, var(--lav-300), var(--lav-200)); }
.path.ai .node { border: 1.5px dashed var(--lav-400); background: rgba(247, 245, 255, .7); color: var(--violet-2); }
.path.ai .link { background: repeating-linear-gradient(90deg, var(--lav-300) 0 4px, transparent 4px 7px); }
.path.sug .node { border: 1.5px dashed var(--lav-300); background: rgba(247, 245, 255, .5); color: var(--ink-2); }
.path .who { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 8px; border-radius: 50%; }
.path.final .who { background: var(--ink); color: #fff; }
.path.ai .who { background: var(--lav-100); color: var(--violet); }
.path.cli .who { background: rgba(63, 134, 201, .14); color: var(--s-cli); }
.path.sug .who { background: var(--lav-50); color: var(--lav-500); border: 1.5px dashed var(--lav-300); }
.path .adopt { margin-left: 10px; }
.why { display: grid; gap: 8px; }
details.more > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; color: var(--violet); font-weight: 700; cursor: pointer; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary i { transition: transform .2s; }
details.more[open] > summary i.ph-caret-right { transform: rotate(90deg); }
.quote { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(247, 245, 255, .9); border-left: 3px solid var(--lav-400); color: var(--ink-2); font-weight: 520; line-height: 1.55; }
.quote.ink { background: rgba(38, 29, 51, .04); border-left-color: var(--ink); }
.quote.cli { background: rgba(63, 134, 201, .07); border-left-color: var(--s-cli); }
.conf { display: inline-flex; gap: 3px; vertical-align: middle; }
.conf b { width: 7px; height: 7px; border-radius: 50%; background: var(--violet); }
.conf.lo b:nth-child(n+2) { background: transparent; box-shadow: inset 0 0 0 1.5px var(--lav-300); }
.f-dock { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid rgba(124, 58, 237, .08); background: rgba(255, 255, 255, .55); }
.f-dock .spacer { flex: 1; }
.act {
  display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 14px 0 11px; border-radius: 12px; border: 1px solid var(--line-2);
  background: #fff; color: var(--ink-2); font: 720 12.5px var(--sans); cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s;
}
.act:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -14px rgba(76, 29, 149, .6); }
.act i { font-size: 17px; }
.act.go { border: 0; background: var(--s-val); color: #fff; box-shadow: 0 10px 20px -12px rgba(29, 141, 99, .9); }
.act.pri { border: 0; background: var(--violet-2); color: #fff; }
.act.ai { border: 0; background: var(--grad); color: #fff; }
.act kbd, .kbd { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 5px; background: rgba(0, 0, 0, .08); font: 700 10px var(--sans); color: inherit; opacity: .8; }
.act.go kbd, .act.pri kbd, .act.ai kbd { background: rgba(255, 255, 255, .22); }

/* thread */
.thread { display: grid; gap: 10px; }
.msg { display: grid; grid-template-columns: 26px 1fr; gap: 9px; align-items: start; }
.msg .av { margin: 0; width: 26px; height: 26px; font-size: 8.5px; }
.msg p { margin: 2px 0 0; color: var(--ink-2); line-height: 1.5; }
.msg small { color: var(--quiet); font-weight: 650; }
.compose-mini { display: flex; gap: 8px; align-items: center; padding: 6px 6px 6px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.compose-mini input { flex: 1; border: 0; outline: 0; background: transparent; font: 600 12.5px var(--sans); }

/* ---- sheet: the client's file exactly, plus Sift's columns (Jarvis VGrid) -------------------------------------- */
.sheet { display: grid; grid-template-rows: auto auto 1fr; gap: 10px; height: calc(100vh - 58px - 40px); }
.sheet-top { display: flex; align-items: center; gap: 12px; padding: 10px 14px; flex-wrap: wrap; }
.sheet-top .file { display: flex; align-items: center; gap: 9px; font-weight: 750; }
.sheet-top .file i { font-size: 22px; color: #1d7a46; }
.sheet-top .file small { color: var(--mute); font-weight: 650; }
.sheet-top .count { display: flex; gap: 12px; color: var(--ink-2); font-weight: 750; }
.sheet-top .count span { display: inline-flex; gap: 5px; align-items: center; }
.sheet-top .count i { color: var(--lav-500); font-size: 15px; }
.sheet-top .search { margin: 0 0 0 auto; width: min(320px, 100%); }
.filters { display: flex; gap: 6px; flex-wrap: wrap; min-height: 0; }
.fchip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 10px; border-radius: 999px; background: #fff; border: 1px solid var(--lav-200); font: 700 11.5px var(--sans); color: var(--violet-2); }
.fchip button { display: grid; place-items: center; width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--lav-100); color: var(--violet); cursor: pointer; font-size: 10px; }
.vg { position: relative; overflow: auto; border-radius: 14px; border: 1px solid rgba(91, 65, 125, .14); background: #fff; contain: strict; }
.vg table { border-collapse: separate; border-spacing: 0; font: 500 12px/20px var(--sans); table-layout: fixed; }
.vg td, .vg th { height: 28px; padding: 3px 9px; border-right: 1px solid #efe9f5; border-bottom: 1px solid #efe9f5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.vg thead th { position: sticky; z-index: 2; background: #f6f2fb; color: #8a7f96; font: 600 11px/20px var(--sans); text-align: center; cursor: pointer; }
.vg thead tr.letters th { top: 0; }
.vg thead tr.names th { top: 28px; background: #efe6fb; color: var(--ink); font-weight: 700; text-align: left; }
.vg thead th:hover { color: var(--violet); background: #eadcf6; }
.vg thead th.sift { background: linear-gradient(180deg, #f1e8fd, #ebe0fb); color: var(--violet-2); }
.vg thead tr.names th.sift::before { content: "✦ "; color: var(--lav-500); }
.vg thead th.seam, .vg td.seam { border-left: 3px solid var(--lav-300); }
.vg thead th.on { color: var(--violet-2); box-shadow: inset 0 -2px var(--violet); }
.vg th.rn, .vg td.rn { position: sticky; left: 0; z-index: 1; width: 64px; background: #f6f2fb; color: #9a90a3; font: 600 11px/20px var(--sans); text-align: right; cursor: default; }
.vg thead th.rn { z-index: 3; }
.vg td.n { text-align: right; }
.vg tbody tr:hover td { background: #faf6ff; }
.vg tbody tr:hover td.rn { background: #efe6fb; color: var(--violet); }
.vg tbody tr.sel td { background: #f3ecfd; }
.vg td.sift { background: rgba(247, 243, 255, .65); color: var(--ink-2); }
.vg td.hit { outline: 2px solid var(--violet); outline-offset: -2px; background: #f1e8fd; }
.vg td.glow { animation: cellglow 1.8s ease-out; }
@keyframes cellglow { 15% { background: #e9dafc; box-shadow: inset 0 0 0 2px var(--lav-400); } }
.vg .stc { display: inline-flex; align-items: center; gap: 5px; }
.vg .stc .st { width: 12px; height: 12px; font-size: 8px; }
.vg .spacer td { border: 0; padding: 0; background: transparent; }
.facet { width: 320px; max-height: 420px; display: grid; grid-template-rows: auto auto 1fr; }
.facet .fv { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 9px; cursor: pointer; }
.facet .fv:hover { background: var(--lav-50); }
.facet .fv.on { background: var(--lav-100); }
.facet .fv .bx { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--lav-300); display: grid; place-items: center; color: #fff; font-size: 10px; }
.facet .fv.on .bx { background: var(--violet); border-color: var(--violet); }
.facet .fv .t { min-width: 0; display: grid; gap: 3px; }
.facet .fv .t span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.facet .fv .t i { display: block; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--lav-400), var(--lav-200)); }
.facet .fv em { font-style: normal; color: var(--mute); font-weight: 700; font-size: 11px; }
.facet .flist { overflow: auto; padding: 4px; }

/* ---- groups (OpenRefine clustering, shown as cards) ------------------------------------------------------------ */
.groups { max-width: 1280px; margin: 0 auto; display: grid; gap: 14px; }
.g-top { display: flex; align-items: center; gap: 14px; padding: 12px 16px; flex-wrap: wrap; }
.g-top .h { flex: 1; }
.ccards { columns: 3 330px; column-gap: 14px; }
.ccard { break-inside: avoid; margin-bottom: 14px; padding: 14px; border-radius: 18px; background: var(--glass); border: 1px solid rgba(255, 255, 255, .85); backdrop-filter: blur(14px); box-shadow: var(--shadow); display: grid; gap: 10px; transition: transform .3s var(--ease), opacity .3s; }
.ccard.done { opacity: .5; transform: scale(.97); }
.ccard .ch { display: flex; align-items: center; gap: 8px; }
.ccard .ch .v { margin-left: auto; font: 700 16px var(--serif); }
.mem { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; background: rgba(255, 255, 255, .75); cursor: pointer; }
.mem + .mem.newgrp { margin-top: 6px; position: relative; }
.mem.newgrp::before { content: ""; position: absolute; left: 10px; right: 10px; top: -5px; height: 0; border-top: 2px dashed rgba(194, 79, 126, .45); }
.mem .tg { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--lav-300); display: grid; place-items: center; color: #fff; font-size: 10px; background: #fff; }
.mem.in .tg { background: var(--violet); border-color: var(--violet); }
.mem .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.mem .nm small { display: block; color: var(--quiet); font-weight: 600; font-size: 10.5px; }
.mem .w { height: 5px; border-radius: 5px; background: var(--lav-300); margin-top: 3px; }
.mem em { font-style: normal; color: var(--mute); font-weight: 700; font-size: 11px; }
.newname { display: flex; gap: 6px; align-items: center; }
.newname input { flex: 1; min-width: 0; height: 34px; border-radius: 10px; border: 1px solid var(--line); padding: 0 10px; font: 700 12px var(--sans); background: #fff; }

/* ---- queue: one decision at a time ----------------------------------------------------------------------------- */
.queue { max-width: 980px; margin: 0 auto; display: grid; gap: 16px; padding-top: 6px; }
.q-top { display: flex; align-items: center; gap: 16px; padding: 12px 16px; flex-wrap: wrap; }
.q-top .bigring { --v: 0; width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(var(--s-val) calc(var(--v) * 1turn), var(--s-ai) 0 calc((var(--v) + var(--a)) * 1turn), rgba(216, 208, 228, .55) 0); display: grid; place-items: center; transition: --v .6s; }
.q-top .bigring span { width: 50px; height: 50px; border-radius: 50%; background: #fbfaff; display: grid; place-items: center; font: 800 13px var(--serif); }
.q-kinds { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.q-kinds button { display: inline-flex; align-items: center; gap: 6px; height: 32px; border: 1px solid rgba(255, 255, 255, .9); border-radius: 999px; background: rgba(255, 255, 255, .6); padding: 0 12px 0 9px; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.q-kinds button.on { background: #fff; box-shadow: inset 0 0 0 1.5px var(--lav-300); color: var(--violet-2); }
.q-kinds button i { font-size: 16px; color: var(--violet); }
.stack { position: relative; height: 520px; }
.qcard {
  position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto; gap: 14px; padding: 22px 24px;
  border-radius: 26px; border: 1px solid rgba(255, 255, 255, .95); background: rgba(255, 255, 255, .8); backdrop-filter: blur(20px);
  box-shadow: 0 30px 70px -36px rgba(76, 29, 149, .55); transition: transform .45s var(--ease), opacity .45s, filter .45s;
}
.qcard.back1 { transform: translateY(14px) scale(.965); opacity: .7; filter: blur(.5px); pointer-events: none; }
.qcard.back2 { transform: translateY(28px) scale(.93); opacity: .4; filter: blur(1px); pointer-events: none; }
.qcard.gone-l { transform: translateX(-120%) rotate(-8deg); opacity: 0; }
.qcard.gone-r { transform: translateX(120%) rotate(8deg); opacity: 0; }
.qcard.gone-u { transform: translateY(-60%) scale(.9); opacity: 0; }
.qh { display: flex; align-items: center; gap: 12px; }
.qh h3 { margin: 0; font: 800 24px/1.15 var(--serif); letter-spacing: -.02em; overflow-wrap: anywhere; }
.qh .v { margin-left: auto; text-align: right; }
.qh .v b { display: block; font: 700 22px var(--serif); }
.qbody { display: grid; gap: 14px; align-content: start; overflow: auto; }
.vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; }
.vs .side { display: grid; gap: 10px; align-content: start; padding: 14px; border-radius: 18px; background: rgba(247, 245, 255, .8); border: 1.5px dashed var(--lav-300); }
.vs .side.fin { background: rgba(38, 29, 51, .035); border: 1.5px solid rgba(38, 29, 51, .12); }
.vs .side .who { display: flex; align-items: center; gap: 8px; font-weight: 750; color: var(--ink-2); }
.vs .side .lvl { display: grid; gap: 5px; }
.vs .side .lvl div { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.vs .side .lvl div::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .5; flex: none; }
.vs .side .lvl div:nth-child(2) { padding-left: 12px; }
.vs .side .lvl div:nth-child(3) { padding-left: 24px; }
.vs .side .lvl div.diff { color: var(--pain); }
.vs .or { display: grid; place-items: center; color: var(--quiet); font-size: 20px; }
.qacts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.qacts .spacer { flex: 1; }
.qempty { display: grid; place-items: center; height: 100%; text-align: center; gap: 10px; color: var(--mute); }

/* ---- history: the versions rail -------------------------------------------------------------------------------- */
.hist { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.hist-list { position: relative; display: grid; gap: 2px; padding: 8px; }
.hist-list::before { content: ""; position: absolute; top: 24px; bottom: 24px; left: 26px; width: 1.5px; background: linear-gradient(#d9cbf0, #ece5f7); }
.hitem { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 8px; border-radius: 14px; }
.hitem:hover { background: rgba(255, 255, 255, .7); }
.hitem .hm { z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 2px solid var(--lav-200); color: var(--violet); }
.hitem.undone { opacity: .45; }
.hitem.undone .what { text-decoration: line-through; }
.hitem .what { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.hitem .what small { display: block; color: var(--mute); font-weight: 600; }
.arrow { color: var(--quiet); margin: 0 4px; }

/* ---- Ask Sift -------------------------------------------------------------------------------------------------- */
.ask {
  position: fixed; z-index: 45; top: 68px; right: 10px; bottom: 10px; width: 410px; display: grid; grid-template-rows: auto 1fr auto;
  border: 1px solid rgba(255, 255, 255, .9); border-radius: 22px; background: rgba(250, 248, 253, .9); backdrop-filter: blur(24px) saturate(1.2);
  box-shadow: 0 30px 80px -30px rgba(42, 25, 65, .45); animation: slidein .4s var(--ease); overflow: hidden;
}
.ask-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid rgba(124, 58, 237, .08); }
.ask-head b { font: 800 17px var(--serif); }
.ask-t { flex: 1; display: grid; gap: 1px; min-width: 0; }
.ask-t small { color: var(--quiet); font: 650 11px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ask-t small.busy { color: var(--violet); }
.orb { width: 32px; height: 32px; }
.ask-thread { overflow: auto; padding: 14px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; }
.am { display: grid; gap: 8px; max-width: 100%; animation: rise .45s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); filter: blur(3px); } }
.am.me { display: block; width: fit-content; justify-self: end; max-width: 85%; overflow-wrap: anywhere; padding: 9px 12px; border-radius: 14px 14px 4px 14px; background: var(--violet-2); color: #fff; font-weight: 600; }
.am.sift { padding: 2px 0; }
.am.sift p { margin: 0; color: var(--ink-2); line-height: 1.55; font-weight: 520; }
.am.sift p::before { content: "✦"; color: var(--lav-500); margin-right: 6px; }
.am .chips { gap: 5px; }
.am .chip { cursor: pointer; min-height: 28px; font-size: 11.5px; }
.am .chip:hover { border-color: var(--lav-400); }
.sugs { display: grid; gap: 6px; }
.sug { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .95); background: rgba(255, 255, 255, .7); text-align: left; cursor: pointer; font-weight: 650; color: var(--ink-2); transition: transform .15s, background .15s; }
.sug:hover { background: #fff; transform: translateX(2px); }
.sug i { color: var(--violet); font-size: 17px; }
.change { display: grid; gap: 10px; padding: 12px; border-radius: 16px; background: #fff; border: 1px solid var(--lav-200); }
.change .cp { display: grid; gap: 5px; }
.change .cp div { display: flex; align-items: center; gap: 6px; font-weight: 650; font-size: 12px; flex-wrap: wrap; }
.change .cp .from { color: var(--quiet); text-decoration: line-through; }
.change .cp .to { color: var(--violet-2); }
.change .row2 { display: flex; gap: 8px; align-items: center; }
.change.applied { border-color: rgba(29, 141, 99, .4); }
.mergecard { display: grid; gap: 6px; padding: 10px; border-radius: 14px; background: #fff; border: 1px solid var(--line); cursor: pointer; }
.mergecard:hover { border-color: var(--lav-400); }
.mergecard .mh { display: flex; align-items: center; gap: 6px; font-weight: 750; }
.mergecard .mh .v { margin-left: auto; color: var(--mute); }
.mergecard .mm { display: flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 11.5px; font-weight: 600; }
.mergecard .mm .sw { width: 8px; height: 8px; border-radius: 3px; }
.ask-compose { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: end; margin: 10px; padding: 8px 8px 8px 12px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 30px -20px rgba(76, 29, 149, .5); }
.ask-compose textarea { border: 0; outline: 0; resize: none; font: 600 13px/1.4 var(--sans); color: var(--ink); max-height: 120px; padding: 6px 0; background: transparent; }
.ask-compose .icon { width: 34px; height: 34px; border-radius: 11px; }
.ask-compose .send { background: var(--grad); color: #fff; border: 0; }
.ask-compose .send.stop { background: var(--ink-2); }
/* the copilot's answer: steps, a line of thinking, the answer, cards, files */
.am.sift .think { display: flex; gap: 6px; align-items: baseline; color: var(--quiet); font: italic 600 11.5px var(--sans); }
.am.sift .think span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am.sift .steps { border-radius: 12px; background: rgba(255, 255, 255, .6); border: 1px solid var(--line); }
.am.sift .steps summary { display: flex; align-items: center; gap: 8px; padding: 6px 10px; cursor: pointer; list-style: none; font: 700 11.5px var(--sans); color: var(--ink-2); }
.am.sift .steps summary::-webkit-details-marker { display: none; }
.am.sift .steps .n { display: inline-flex; align-items: center; gap: 5px; flex: none; }
.am.sift .steps .n i { color: var(--violet); }
.am.sift .steps .now { color: var(--mute); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am.sift .steps ol { margin: 0; padding: 0 10px 8px 12px; list-style: none; display: grid; gap: 3px; font: 600 11.5px var(--sans); color: var(--mute); }
.am.sift .steps li { display: flex; gap: 6px; align-items: baseline; }
.am.sift .steps li i { color: var(--s-val); }
.am.sift .steps li.failed i { color: var(--pain); }
.am.sift .steps li.running i { color: var(--violet); }
.spin { display: inline-block; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.am.sift .ans { color: var(--ink-2); line-height: 1.55; font-weight: 520; font-size: 13px; }
.am.sift .ans p { margin: 0 0 6px; }
.am.sift .ans p::before { content: none; }
.am.sift .ans > p:first-child::before { content: "✦"; color: var(--lav-500); margin-right: 6px; }
.am.sift .ans ul, .am.sift .ans ol { margin: 0 0 6px; padding-left: 18px; }
.am.sift .ans code { font: 600 11.5px ui-monospace, monospace; background: var(--lav-100); padding: 0 4px; border-radius: 4px; }
.mdt { border-collapse: collapse; font-size: 11.5px; margin: 4px 0 8px; width: 100%; }
.mdt th, .mdt td { text-align: left; padding: 3px 6px; border-bottom: 1px solid var(--line); }
.mdt th { color: var(--mute); font-weight: 700; }
.am.sift .tfoot { color: var(--quiet); font: 650 10.5px var(--sans); }
.am.sift .files { display: flex; flex-wrap: wrap; gap: 5px; }
.ask-note { display: flex; gap: 6px; align-items: baseline; color: var(--mute); font: 600 12px var(--sans); }
.ask-note.err { color: var(--pain); }
.pcard { display: grid; gap: 8px; padding: 12px; border-radius: 16px; background: #fff; border: 1px solid var(--lav-200); box-shadow: 0 10px 26px -20px rgba(76, 29, 149, .6); }
.pcard .ph-h { display: flex; gap: 8px; align-items: center; font-weight: 750; }
.pcard .ph-h i { color: var(--violet); font-size: 18px; }
.pcard .why { color: var(--mute); font: 600 12px/1.45 var(--sans); }
.pcard .prows { display: grid; gap: 3px; font: 600 11.5px var(--sans); }
.pcard .prows > div { display: flex; gap: 5px; align-items: baseline; min-width: 0; overflow: hidden; }
.pcard .prows .nm { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pcard .prows .from { color: var(--quiet); text-decoration: line-through; white-space: nowrap; }
.pcard .prows .to { color: var(--violet-2); white-space: nowrap; }
.pcard .prows em { margin-left: auto; font-style: normal; color: var(--mute); }
.pcard .prows .more { color: var(--quiet); }
.pcard .row2 { display: flex; gap: 8px; align-items: center; }
.pcard .row2 .st { display: inline-flex; gap: 5px; align-items: center; color: var(--s-val); font-weight: 700; font-size: 12px; min-width: 0; }
.pcard .row2 .st, .pcard .row2 .muted { flex: 1; }
.pcard.applied { border-color: rgba(29, 141, 99, .4); }
.pcard.dismissed { opacity: .65; }

/* ---- popovers, menus, modal, toast ----------------------------------------------------------------------------- */
.menu, .pop {
  position: fixed; z-index: 70; min-width: 220px; padding: 8px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .92);
  background: var(--glass-2); backdrop-filter: blur(22px) saturate(1.12); box-shadow: 0 22px 54px rgba(42, 25, 65, .22); animation: rise .25s var(--ease);
}
.runs-panel { position: absolute; top: calc(100% + 8px); right: 0; width: min(420px, calc(100vw - 24px)); display: grid; gap: 8px; }
.start-run { display: flex; width: 100%; min-height: 40px; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 11px; background: var(--violet-2); color: #fff; font: 750 12.5px var(--sans); cursor: pointer; box-shadow: 0 10px 20px -12px rgba(76, 29, 149, .8); }
.start-run:hover { background: #4c1d95; }
.start-run i { font-size: 16px; }
.act-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.act-item .g { width: 36px; height: 36px; }
.act-item b { display: block; font: 750 12.5px var(--sans); }
.act-item small { color: var(--mute); font-weight: 600; }
.act-item .okc { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--s-val); color: #fff; font-size: 11px; }
.act-item .bar2 { grid-column: 2 / 4; height: 3px; border-radius: 3px; background: var(--lav-100); overflow: hidden; }
.act-item .bar2 i { display: block; height: 100%; width: var(--p, 0%); background: linear-gradient(90deg, #a78bfa, #7c3aed); transition: width .4s; }
.act-item.backlog { border: 1.5px dashed var(--lav-300); background: rgba(247, 245, 255, .7); }
.pop-h { display: flex; align-items: center; gap: 8px; padding: 4px 6px 8px; font-weight: 750; }
.pop-list { display: grid; gap: 2px; max-height: 340px; overflow: auto; }
.pop-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 9px; border-radius: 9px; border: 0; background: transparent; text-align: left; cursor: pointer; }
.pop-item:hover { background: rgba(112, 57, 183, .08); }
.pop-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.pop-item small { color: var(--quiet); font-weight: 650; }
.pop-item .p { color: var(--quiet); font-weight: 600; font-size: 10.5px; display: block; }
.key { display: grid; gap: 8px; width: 270px; }
.key div { display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 8px; font-weight: 650; color: var(--ink-2); }

.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(38, 24, 61, .2); backdrop-filter: blur(5px); animation: fade .3s; padding: 16px; }
.wiz { width: min(1080px, 100%); height: min(760px, calc(100vh - 32px)); display: grid; grid-template-rows: auto 1fr auto; border-radius: 28px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .9); background: rgba(250, 249, 253, .94); backdrop-filter: blur(26px); box-shadow: 0 40px 120px rgba(31, 20, 42, .32); animation: rise .45s var(--ease); }
.wiz.fly { transition: transform .7s cubic-bezier(.6, 0, .2, 1), opacity .7s, border-radius .7s; }
.wiz-steps { display: flex; align-items: center; gap: 6px; padding: 16px 20px; border-bottom: 1px solid rgba(124, 58, 237, .08); }
.wiz-steps .ws { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 6px; border-radius: 999px; color: var(--quiet); font-weight: 750; }
.wiz-steps .ws .n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: rgba(124, 58, 237, .08); color: var(--violet); font-size: 13px; }
.wiz-steps .ws.on { background: #fff; color: var(--ink); box-shadow: 0 6px 16px -10px rgba(76, 29, 149, .5); }
.wiz-steps .ws.on .n { background: var(--grad); color: #fff; }
.wiz-steps .ws.done .n { background: var(--s-val); color: #fff; }
.wiz-steps .line { width: 18px; height: 2px; background: var(--line); }
.wiz-steps .spacer { flex: 1; }
.wiz-body { overflow: auto; padding: 20px 22px; min-height: 0; }
.wiz-foot { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid rgba(124, 58, 237, .08); }
.wiz-foot .spacer { flex: 1; }
.drop { display: grid; place-items: center; gap: 12px; height: 100%; min-height: 360px; border: 1.5px dashed var(--lav-300); border-radius: 22px; background: rgba(255, 255, 255, .5); text-align: center; transition: background .2s, border-color .2s; }
.drop.over { background: rgba(239, 234, 254, .9); border-color: var(--violet); }
.drop .g { width: 96px; height: 96px; }
.drop h3 { margin: 0; font: 800 24px var(--serif); }
.drop .btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.tabs-pill { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.tabs-pill button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--line); background: #fff; font-weight: 700; color: var(--mute); cursor: pointer; }
.tabs-pill button.on { border-color: var(--violet); background: #eee2fb; color: var(--violet-2); }
.tabs-pill button i { font-size: 15px; }
.mapchips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.mapchip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 8px; border-radius: 15px; background: #fff; border: 1px solid var(--line); font-weight: 700; color: var(--ink-2); }
.mapchip i { font-size: 15px; color: var(--violet); }
.mapchip b { color: var(--violet-2); }
.mapchip.need { border-style: dashed; color: var(--quiet); }
.mapchip.need i { color: var(--quiet); }
.algos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.algo { position: relative; display: grid; gap: 10px; justify-items: start; padding: 16px; border-radius: 20px; border: 1.5px solid rgba(255, 255, 255, .95); background: rgba(255, 255, 255, .62); cursor: pointer; text-align: left; transition: transform .2s var(--ease), border-color .2s, box-shadow .2s; }
.algo:hover { transform: translateY(-2px); }
.algo.on { border-color: var(--violet); background: #fff; box-shadow: 0 18px 40px -26px rgba(76, 29, 149, .7); }
.algo .g { width: 64px; height: 64px; }
.algo b { font: 750 14px var(--sans); }
.algo small { color: var(--mute); font-weight: 600; }
.algo .tick { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--lav-300); display: grid; place-items: center; color: #fff; font-size: 12px; }
.algo.on .tick { background: var(--violet); border-color: var(--violet); }
.est { display: flex; gap: 16px; align-items: center; margin-top: 16px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .7); font-weight: 750; color: var(--ink-2); flex-wrap: wrap; }
.est span { display: inline-flex; gap: 6px; align-items: center; }
.est i { color: var(--violet); font-size: 17px; }
.depth { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--lav-50); }
.depth button { height: 26px; min-width: 34px; border: 0; border-radius: 8px; background: transparent; font-weight: 750; color: var(--mute); cursor: pointer; }
.depth button.on { background: var(--violet); color: #fff; }
.launch { display: grid; place-items: center; gap: 14px; height: 100%; text-align: center; }
.launch .g { width: 150px; height: 150px; }
.launch h3 { margin: 0; font: 800 28px var(--serif); letter-spacing: -.02em; }

.toast { position: fixed; z-index: 90; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 14px; border-radius: 14px; background: #261d33; color: #fff; font-weight: 650; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .5); animation: rise .35s var(--ease); }
.toast i { font-size: 17px; color: var(--lav-300); }
.toast button { height: 30px; border: 0; border-radius: 9px; padding: 0 12px; background: rgba(255, 255, 255, .14); color: #fff; font-weight: 750; cursor: pointer; }
.tip { position: fixed; z-index: 95; pointer-events: none; max-width: 280px; padding: 7px 10px; border-radius: 10px; background: #261d33; color: #fff; font: 600 11.5px/1.4 var(--sans); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .4); }
.tip b { display: block; font-weight: 750; }
.tip em { font-style: normal; color: var(--lav-300); }

/* ORA at work: a spark flies from the chat, the target glows, new text writes itself in */
.spark-fx { position: fixed; z-index: 1000; top: 0; left: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff 0 22%, #f3e8ff 38%, #c084fc 58%, rgba(139, 92, 246, 0) 72%);
  box-shadow: 0 0 18px 6px rgba(192, 132, 252, .6), 0 0 44px 14px rgba(236, 72, 153, .22); }
.glow { animation: glow 1.9s ease-out; z-index: 4; }
@keyframes glow {
  14% { box-shadow: 0 0 0 3px rgba(216, 180, 254, .95), 0 0 30px 8px rgba(139, 92, 246, .55); filter: brightness(1.12); }
  42% { box-shadow: 0 0 0 2px rgba(216, 180, 254, .7), 0 0 16px 3px rgba(139, 92, 246, .35); }
  64% { box-shadow: 0 0 0 3px rgba(216, 180, 254, .85), 0 0 24px 6px rgba(139, 92, 246, .45); }
}
.ink { display: inline-block; border-radius: 4px; background-image: linear-gradient(100deg, transparent 0 38%, rgba(233, 213, 255, .85) 50%, transparent 62% 100%); background-size: 300% 100%; animation: write .9s cubic-bezier(.3, .7, .2, 1) both, inklight 1.4s ease-out both; }
@keyframes write { from { clip-path: inset(0 100% 0 0); filter: blur(3px); } }
@keyframes inklight { from { background-position: 100% 0; } to { background-position: 0 0; } }
.shake { animation: shake .5s cubic-bezier(.36, .07, .19, .97); }
@keyframes shake { 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-5px); } 40%, 60% { transform: translateX(5px); } }
.sweep::after { content: ""; position: fixed; inset: 0; z-index: 250; pointer-events: none; background: linear-gradient(105deg, transparent 32%, rgba(216, 180, 254, .3) 44%, rgba(255, 255, 255, .5) 50%, rgba(216, 180, 254, .3) 56%, transparent 68%); background-size: 260% 100%; animation: sweepfx 1.05s cubic-bezier(.3, .6, .2, 1) both; }
@keyframes sweepfx { from { background-position: 100% 0; } to { background-position: -60% 0; } }
.enter { animation: enter .52s var(--ease) both; }
@keyframes enter { from { opacity: 0; transform: translateY(16px) scale(.97); filter: blur(4px); } }

/* ---- glyphs: still frame is the finished picture; they move only while live ------------------------------------ */
.g { display: block; overflow: visible; }
.g * { transform-box: fill-box; transform-origin: center; }
.g.live * { animation-duration: 3.6s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(.45, .05, .25, 1); }
.g.live .h-d1 { animation-name: h-d1; } .g.live .h-d2 { animation-name: h-d2; } .g.live .h-d3 { animation-name: h-d3; } .g.live .h-d4 { animation-name: h-d4; }
.g.live .h-ring { animation-name: h-ring; } .g.live .h-core { animation-name: h-core; }
@keyframes h-d1 { 0%, 10% { transform: translate(-14px, -12px); } 45%, 100% { transform: none; } }
@keyframes h-d2 { 0%, 16% { transform: translate(15px, -10px); } 50%, 100% { transform: none; } }
@keyframes h-d3 { 0%, 22% { transform: translate(-13px, 13px); } 55%, 100% { transform: none; } }
@keyframes h-d4 { 0%, 28% { transform: translate(14px, 12px); } 60%, 100% { transform: none; } }
@keyframes h-ring { 0%, 55% { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.12); } 85%, 100% { opacity: 1; transform: none; } }
@keyframes h-core { 0%, 58% { transform: scale(.4); } 72% { transform: scale(1.3); } 85%, 100% { transform: none; } }
.g.live .c-drop1 { animation-name: c-drop1; } .g.live .c-drop2 { animation-name: c-drop2; } .g.live .c-drop3 { animation-name: c-drop3; }
.g.live .c-root { animation-name: c-root; }
@keyframes c-drop1 { 0% { transform: translate(14px, -22px); opacity: 0; } 12% { opacity: 1; transform: translate(14px, -22px); } 38%, 100% { transform: none; opacity: 1; } }
@keyframes c-drop2 { 0%, 18% { transform: translate(0, -22px); opacity: 0; } 30% { opacity: 1; transform: translate(0, -22px); } 56%, 100% { transform: none; opacity: 1; } }
@keyframes c-drop3 { 0%, 36% { transform: translate(-14px, -22px); opacity: 0; } 48% { opacity: 1; transform: translate(-14px, -22px); } 74%, 100% { transform: none; opacity: 1; } }
@keyframes c-root { 0%, 76% { transform: none; } 84% { transform: scale(1.18); } 92%, 100% { transform: none; } }
.g.live .r-scan { animation-name: r-scan; animation-timing-function: linear; } .g.live .r-row1 { animation-name: r-row; } .g.live .r-row2 { animation-name: r-row; animation-delay: .25s; } .g.live .r-row3 { animation-name: r-row; animation-delay: .5s; }
@keyframes r-scan { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; transform: translateY(30px); } 90%, 100% { opacity: 0; transform: translateY(30px); } }
@keyframes r-row { 0%, 20% { fill: #e2d8f3; } 35%, 70% { fill: #a78bfa; } 90%, 100% { fill: #e2d8f3; } }
.g.live .m-a { animation-name: m-a; } .g.live .m-b { animation-name: m-b; } .g.live .m-c { animation-name: m-c; }
@keyframes m-a { 0%, 10% { transform: translate(-10px, 8px) rotate(-20deg); } 45%, 100% { transform: none; } }
@keyframes m-b { 0%, 20% { transform: translate(10px, 10px) rotate(25deg); } 55%, 100% { transform: none; } }
@keyframes m-c { 0%, 30% { transform: translate(0, -12px) rotate(-12deg); } 65%, 100% { transform: none; } }
.g.live .t-a { animation-name: t-a; } .g.live .t-b { animation-name: t-b; }
@keyframes t-a { 0%, 20% { opacity: 1; } 45%, 70% { opacity: 0; } 95%, 100% { opacity: 1; } }
@keyframes t-b { 0%, 20% { opacity: 0; } 45%, 70% { opacity: 1; } 95%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}

/* ---- narrow windows -------------------------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .land { grid-template-columns: 1fr; grid-template-rows: auto minmax(420px, 1fr) auto; height: auto; }
  .lens { max-height: 520px; }
  .pulse { grid-template-columns: auto 1fr; }
  .pulse .marks { grid-column: 1 / -1; justify-content: flex-start; }
  body.ask-open .stage { right: 0; }
  .ask { width: min(410px, calc(100vw - 20px)); }
  body.ask-open .focus { right: 10px; width: min(940px, calc(100vw - 20px)); }
  .pcard.live { grid-column: span 1; grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hdr { gap: 8px; }
  .proj small, .runs-status, .people { display: none; }
  .ask-trigger span { display: none; }
  .ask-trigger { padding: 0 11px; }
  .rail { top: auto; bottom: max(10px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: auto; height: 54px; flex-direction: row; padding: 0 8px; }
  .rail a.on::before { left: 10px; right: 10px; top: auto; bottom: -6px; width: auto; height: 3px; }
  .rail-gap, .rail-key { display: none; }
  body.has-rail .stage { padding-left: max(16px, env(safe-area-inset-left)); padding-bottom: 90px; }
  .pulse { grid-template-columns: 1fr; gap: 14px; }
  .legend { grid-template-columns: repeat(2, auto); }
  .vs { grid-template-columns: 1fr; }
  .vs .or { transform: rotate(90deg); }
  .focus { inset: 6px; width: auto; }
  .f-dock { flex-wrap: wrap; }
  .wiz-steps .ws span { display: none; }
  .stack { height: 600px; }
}

/* fixes after the first look */
.qempty .g { width: 88px; height: 88px; }
.qcard { background: rgba(255, 255, 255, .97); }
.qcard.back1, .qcard.back2 { background: rgba(255, 255, 255, .7); }
.qcard.back1 .qbody, .qcard.back2 .qbody, .qcard.back1 .qacts, .qcard.back2 .qacts { visibility: hidden; }
.chip .g { width: 22px; height: 22px; }
.mapchip .g { width: 18px; height: 18px; }
@media (max-width: 1100px) { .map { height: 440px; } }
@media (max-width: 640px) { .map { height: auto; min-height: 300px; } .map > .panel { height: auto !important; max-height: 70vh; } }

/* ---- check: a day of validation in four steps ------------------------------------------------------------------ */
.vd { display: flex; flex-direction: column; gap: 12px; height: calc(100dvh - 58px - 40px); min-height: 520px; }
.vd-top { display: flex; align-items: center; gap: 10px; padding: 8px 10px; flex-wrap: wrap; }
.vd-steps { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; flex-wrap: wrap; }
.vd-steps .sep { color: var(--lav-300); font-size: 13px; }
.vd-step { position: relative; display: flex; align-items: center; gap: 9px; padding: 7px 12px 9px 8px; border: 0; border-radius: 14px; background: transparent; cursor: pointer; text-align: left; color: var(--ink-2); transition: background .15s; }
.vd-step:hover { background: rgba(255, 255, 255, .7); }
.vd-step.on { background: #fff; box-shadow: 0 8px 20px -14px rgba(76, 29, 149, .55); }
.vd-step .n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 800 12px var(--sans); background: var(--lav-100); color: var(--violet-2); flex: none; }
.vd-step.on .n { background: var(--grad); color: #fff; }
.vd-step.done .n { background: var(--s-val); color: #fff; }
.vd-step .t { display: grid; line-height: 1.15; }
.vd-step .t b { display: inline-flex; align-items: center; gap: 5px; font: 750 13px var(--sans); white-space: nowrap; }
.vd-step .t b i { color: var(--violet); font-size: 15px; }
.vd-step .t small { color: var(--mute); font-weight: 650; font-size: 11px; white-space: nowrap; }
.vd-step.done .t small { color: var(--s-val); }
.vd-step .hair { position: absolute; left: 44px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--lav-100); overflow: hidden; }
.vd-step .hair i { display: block; height: 100%; width: calc(var(--p) * 100%); background: var(--s-val); transition: width .5s var(--ease); }
.vd-opts { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.vd-opt { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 11px; border-radius: 11px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .7); font: 700 12px var(--sans); color: var(--ink-2); cursor: pointer; }
.vd-opt i { color: var(--violet); font-size: 15px; }
.vd-next { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--grad); color: #fff; font: 750 13px var(--sans); cursor: pointer; box-shadow: 0 10px 22px -12px rgba(109, 40, 217, .8); max-width: 300px; }
.vd-next span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vd-next em { font-style: normal; opacity: .85; font-weight: 650; }
.vd-next:hover { transform: translateY(-1px); }
.vd-two { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 12px; }
.vd-one { flex: 1; min-height: 0; display: grid; }
.vd-list { display: flex; flex-direction: column; min-height: 0; padding: 10px 0 6px; }
.vd-kind { margin: 0 10px 8px; display: flex; }
.vd-kind button { flex: 1; }
.vd-kind em, .vd .seg em { font-style: normal; color: var(--quiet); font-weight: 700; margin-left: 2px; }
.vd-list .search { margin: 0 10px 8px; }
.vd-li-wrap { flex: 1; overflow: auto; padding: 0 6px; }
.vd-li { width: 100%; display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 8px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; text-align: left; color: var(--ink); position: relative; }
.vd-li:hover { background: rgba(255, 255, 255, .75); }
.vd-li.on { background: #fff; box-shadow: 0 6px 16px -12px rgba(76, 29, 149, .6); }
.vd-li.on::before { content: ""; position: absolute; left: -3px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--grad); }
.vd-li .tk { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #cdbfe0; display: grid; place-items: center; flex: none; color: #fff; font-size: 10px; background: #fff; }
.vd-li.ok .tk { background: var(--s-val); border-color: var(--s-val); }
.vd-li .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 650 12.5px var(--sans); }
.vd-li.ok .nm { color: var(--mute); }
.vd-li .v { font: 700 11.5px var(--sans); color: var(--ink-2); }
.vd-li .ic { color: var(--violet); font-size: 16px; }
.nn { display: inline-flex; align-items: center; gap: 2px; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--lav-100); color: var(--violet-2); font: 750 10.5px var(--sans); margin-left: 6px; flex: none; }
.vd-li .nn { margin-left: 0; }
.kx { color: var(--pain); font-size: 14px; margin-left: 4px; }
.vd-li.l1 { flex-wrap: wrap; row-gap: 3px; padding-bottom: 7px; }
.vd-li .pb { flex-basis: 100%; height: 3px; border-radius: 3px; background: rgba(216, 208, 228, .6); overflow: hidden; margin-left: 26px; }
.vd-li .pb i { display: block; height: 100%; background: var(--s-val); transition: width .5s var(--ease); }
.vd-li .own { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 800 9.5px var(--sans); flex: none; }
.vd-line { display: flex; align-items: center; gap: 8px; margin: 6px 8px; color: var(--violet-2); font: 750 11px var(--sans); }
.vd-line::before, .vd-line::after { content: ""; flex: 1; border-top: 1.5px dashed var(--lav-400); }
.vd-line span { display: inline-flex; align-items: center; gap: 4px; }
.vd-main { display: flex; flex-direction: column; min-height: 0; padding: 12px 14px; gap: 8px; }
.vd-gh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vd-gname { flex: 1 1 320px; min-width: 240px; border: 1px solid transparent; border-radius: 10px; background: transparent; font: 800 22px var(--serif); color: var(--ink); padding: 2px 8px; letter-spacing: -.01em; }
.vd-gname:hover { border-color: var(--line); background: rgba(255, 255, 255, .6); }
.vd-gname:focus { outline: 0; border-color: var(--lav-400); background: #fff; }
.vd-gv { font: 800 18px var(--serif); color: var(--ink-2); }
.act.go.is { background: rgba(29, 141, 99, .12); color: var(--s-val); box-shadow: none; }
.act em { font-style: normal; font-weight: 650; opacity: .8; margin-left: 4px; }
.act[disabled] { opacity: .45; cursor: default; transform: none; box-shadow: none; }
.vd-sec { display: flex; align-items: center; gap: 8px; color: var(--violet); min-height: 38px; }
.vd-sec > i { font-size: 18px; }
.vd-sec b { color: var(--ink); font: 750 13px var(--sans); }
.vd-sec.add { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 2px; }
.vd-acts { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.vd-hint { font: 650 12px var(--sans); }
.vd-q { flex: 1; max-width: 420px; margin: 0; height: 38px; }
.vd-q input { font-size: 14px; font-weight: 700; }
.xt-wrap { overflow: auto; min-height: 0; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
#gMem { flex: none; max-height: 34%; }
#gRes, #cRows, #rRows { flex: 1; }
.xt { width: 100%; border-collapse: separate; border-spacing: 0; font: 600 12.5px var(--sans); color: var(--ink); }
.xt th { position: sticky; top: 0; z-index: 1; background: #faf8fe; text-align: left; font: 700 11px var(--sans); color: var(--mute); padding: 0 10px; height: 30px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.xt th i { color: var(--violet); }
.xt td { padding: 0 10px; height: 36px; border-bottom: 1px solid #f1ecf7; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.xt .r { text-align: right; }
.xt td.num { font-weight: 700; color: var(--ink-2); }
.xt tbody tr { cursor: pointer; transition: background .12s; }
.xt tbody tr:hover { background: #fbf9ff; }
.xt tr.sel { background: var(--lav-50); }
.xt tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--violet); }
.xt tr.cur { background: #f6f2ff; }
.xt tr.cur td { border-bottom-color: var(--lav-200); }
.xt tr.cur td:first-child { box-shadow: inset 3px 0 0 var(--lav-500); }
.xt tr.in { cursor: default; color: var(--quiet); }
.xt tr.done td { color: var(--mute); }
.xt tr.just { animation: rowdone .5s var(--ease); }
@keyframes rowdone { 0% { background: rgba(29, 141, 99, .16); } 100% { background: transparent; } }
.xt .cb { width: 34px; padding-right: 0; }
.box { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid #cdbfe0; display: grid; place-items: center; color: transparent; font-size: 11px; background: #fff; }
.xt tr.sel .box, .xt tr.in .box { background: var(--violet); border-color: var(--violet); color: #fff; }
.xt tr.in .box { background: var(--lav-300); border-color: var(--lav-300); }
.xt mark { background: rgba(250, 204, 21, .35); color: inherit; border-radius: 3px; padding: 0 1px; }
.xt .nmc { font-weight: 700; }
.xt .catc i { color: var(--violet); margin-right: 5px; }
.pill { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; border: 0; background: var(--lav-50); color: var(--ink-2); font: 650 11.5px var(--sans); max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: default; }
button.pill { cursor: pointer; }
button.pill:hover { background: var(--lav-100); color: var(--violet-2); }
.pill i { color: var(--violet); font-size: 12px; flex: none; }
.pill.here { background: var(--violet); color: #fff; }
.pill.here i { color: #fff; }
.pill.diff { background: rgba(194, 79, 126, .1); color: var(--pain); }
.pill.diff i { color: var(--pain); }
.pill.same { background: rgba(29, 141, 99, .1); color: var(--s-val); }
.pill.same i { color: var(--s-val); }
.ed { color: var(--violet); margin-left: 4px; font-size: 13px; }
.lnk { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.lnk:hover { color: var(--violet-2); text-decoration: underline; text-underline-offset: 3px; }
.cat { display: inline-flex; align-items: center; gap: 7px; border: 1px solid transparent; border-radius: 9px; background: transparent; padding: 2px 8px 2px 4px; cursor: pointer; text-align: left; max-width: 280px; }
.cat:hover { border-color: var(--lav-300); background: #fff; }
.cat > i { color: var(--violet); font-size: 16px; flex: none; }
.cat span { display: grid; min-width: 0; line-height: 1.15; }
.cat b { font: 700 12.5px var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.cat small { font: 600 10.5px var(--sans); color: var(--quiet); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 999px; border: 0; font: 650 11.5px var(--sans); max-width: 210px; white-space: nowrap; overflow: hidden; }
.ev span { overflow: hidden; text-overflow: ellipsis; }
.ev i { font-size: 13px; flex: none; }
.ev.ok { background: rgba(29, 141, 99, .1); color: var(--s-val); }
.ev.no { background: rgba(194, 79, 126, .1); color: var(--pain); }
button.ev.no { cursor: pointer; }
button.ev.no:hover { background: rgba(194, 79, 126, .18); }
.ev.na { background: rgba(216, 208, 228, .35); color: var(--quiet); }
.xt tr.agree td:first-child { box-shadow: inset 3px 0 0 rgba(29, 141, 99, .55); }
.xt tr.agree.sel td:first-child { box-shadow: inset 3px 0 0 var(--violet); }
.tkc { width: 46px; text-align: center; }
.tick { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #cdbfe0; background: #fff; color: transparent; display: inline-grid; place-items: center; cursor: pointer; font-size: 13px; transition: background .2s, border-color .2s, transform .15s; }
.tick:hover { border-color: var(--s-val); color: var(--s-val); transform: scale(1.06); }
.tick.on { background: var(--s-val); border-color: var(--s-val); color: #fff; }
.vd-ch { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vd-title { font: 800 20px var(--serif); letter-spacing: -.01em; margin-right: 6px; }
.act.agree { border: 1.5px solid rgba(29, 141, 99, .45); color: var(--s-val); background: rgba(29, 141, 99, .06); }
.act.agree i { color: var(--s-val); }
.vd-selsum { font: 650 12.5px var(--sans); color: var(--mute); }
.vd-selsum b { color: var(--ink); }
.vd-foot { display: flex; align-items: center; gap: 14px; color: var(--quiet); font: 650 11.5px var(--sans); flex-wrap: wrap; }
.vd-foot span { display: inline-flex; align-items: center; gap: 5px; }
.vd-empty { display: grid; place-items: center; gap: 8px; padding: 40px 10px; color: var(--lav-400); text-align: center; }
.vd-empty i { font-size: 34px; }
.vd-empty b { color: var(--mute); font: 650 13px var(--sans); }
.vd-empty.sm { padding: 18px; }
.vd-rest { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.vd-big { display: grid; line-height: 1; }
.vd-big .num { font: 800 34px var(--serif); letter-spacing: -.02em; }
.vd-big small { display: inline-flex; align-items: center; gap: 5px; font: 700 13px var(--sans); color: var(--mute); margin-top: 4px; }
.vd-dots { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.vd-dots i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid #cdbfe0; background: #fff; }
.vd-dots i.ok { background: var(--s-val); border-color: var(--s-val); }
.vd-dots i.no { background: var(--pain); border-color: var(--pain); }
.vd-dots b { margin-left: 6px; font: 750 12.5px var(--sans); color: var(--ink-2); }
.vd-outp { gap: 10px; padding: 22px; max-width: 640px; width: 100%; margin: 0 auto; align-self: start; }
.vd-sum { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.vd-sum .tk { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #cdbfe0; display: grid; place-items: center; color: #fff; font-size: 12px; }
.vd-sum.ok .tk { background: var(--s-val); border-color: var(--s-val); }
.vd-sum .ic { color: var(--violet); font-size: 18px; }
.vd-sum b { font: 750 14px var(--sans); }
.vd-sum small { margin-left: auto; color: var(--mute); font-weight: 650; }
.vd-outa { display: flex; gap: 10px; margin-top: 8px; }
.rail a .rl { display: block; font: 700 9px var(--sans); margin-top: 1px; letter-spacing: .01em; }
.rail a:has(.rl) { height: 48px; align-content: center; gap: 0; }
@media (max-width: 900px) {
  .vd { height: auto; }
  .vd-two { grid-template-columns: 1fr; }
  .vd-list { max-height: 240px; }
  .vd-main { min-height: 70dvh; }
  .vd-opts { width: 100%; }
  .vd-next { margin-left: auto; }
  .xt td, .xt th { padding: 0 7px; }
}
@media (max-width: 640px) {
  .vd-step .t small { display: none; }
  .vd-step { padding: 6px 8px 8px 6px; }
  .vd-steps .sep { display: none; }
  .vd-gname { font-size: 18px; }
}
.tw { color: var(--violet); font-size: 14px; margin-left: 5px; }
.pop-item.pin { background: rgba(247, 245, 255, .9); }
#gMem, #gRes, #cRows, #rRows { width: 100%; }
.vd-kind { flex-wrap: nowrap; }
.vd-kind button { min-width: 0; white-space: nowrap; }
.vd-tailnote { display: flex; align-items: center; gap: 6px; color: var(--mute); font: 650 12px var(--sans); }
.vd-dots { max-width: 520px; gap: 4px; }
.vd-dots i { width: 10px; height: 10px; }
.vd-li.auto .tk { background: var(--lav-100); border-color: var(--lav-300); color: var(--lav-500); }
.vd-li.auto .nm { color: var(--mute); }
.sus { color: var(--pain); font-size: 14px; margin-right: 6px; vertical-align: -2px; }
.vd-auto { display: flex; align-items: center; gap: 6px; color: var(--violet-2); font: 650 12px var(--sans); background: var(--lav-50); border-radius: 10px; padding: 6px 10px; }
.vd-next[hidden] { display: none; }
.xt { min-width: 100%; }
.xt.cats td:nth-child(4) { min-width: 250px; max-width: 320px; }
.xt.cats .cat { max-width: 310px; }
.xt.cats td:nth-child(5), .xt.cats td:nth-child(6) { max-width: 220px; }
.vd-two > *, .vd-one > *, .vd-top > * { min-width: 0; }
@media (max-width: 640px) {
  .vd-top { padding: 8px; }
  .vd-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; width: 100%; }
  .vd-steps .sep { display: none; }
  .vd-step { flex-direction: column; gap: 3px; padding: 6px 2px 10px; align-items: center; text-align: center; min-width: 0; }
  .vd-step .t { min-width: 0; }
  .vd-step .t b { font-size: 11px; justify-content: center; }
  .vd-step .t b i { display: none; }
  .vd-step .hair { left: 12px; right: 12px; }
  .vd-opts { width: 100%; }
  .vd-next { flex: 1; min-width: 0; justify-content: center; max-width: none; }
  .vd-ch { gap: 6px; }
  .vd-title { font-size: 17px; }
  .vd-main { padding: 10px; }
  .vd-sec.add { flex-wrap: wrap; }
  .vd-foot { display: none; }
}
@media (max-width: 900px) { .vd-two { grid-template-columns: minmax(0, 1fr); } .vd { min-width: 0; max-width: 100%; } }
.vd-kind button.grp i { color: var(--violet); }
.vd-kind button.grp.on { background: var(--lav-100); color: var(--violet-2); box-shadow: inset 0 0 0 1.5px var(--lav-300); }
.vd-kind button.grp em { color: var(--violet); }
.odd { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px; margin-left: 8px; border-radius: 999px; background: rgba(194, 79, 126, .1); color: var(--pain); font: 750 10.5px var(--sans); white-space: nowrap; vertical-align: 1px; }
.odd i { font-size: 11px; }
.vd-li .odd { margin-left: 0; }
.vd-gn { color: var(--mute); font: 650 13px var(--sans); white-space: nowrap; }
.vd-gh .vd-acts { margin-left: 0; }
.vd-findrow { display: flex; align-items: center; gap: 6px; margin: 0 10px 8px; }
.vd-findrow .search { margin: 0; flex: 1; min-width: 0; }
#gMem td.nmc { max-width: 520px; }
.xt td.addc { width: 70px; text-align: right; padding-right: 8px; }
.add1 { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--lav-300); background: #fff; color: var(--violet-2); font: 750 11.5px var(--sans); cursor: pointer; }
.add1:hover { background: var(--violet-2); color: #fff; border-color: var(--violet-2); }
.add1 i { font-size: 11px; }
.vd-rename { display: inline-flex; align-items: center; gap: 5px; height: 28px; max-width: 260px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--lav-200); background: var(--lav-50); color: var(--violet-2); font: 700 12px var(--sans); cursor: pointer; white-space: nowrap; }
.vd-rename span { overflow: hidden; text-overflow: ellipsis; }
.vd-near { display: flex; align-items: center; gap: 6px; padding: 8px 12px; color: var(--mute); font: 650 12px var(--sans); }
.vd-near i { color: var(--violet); }
.vd-rename:hover { border-style: solid; background: #fff; }
.vd-rename i { color: var(--violet); }
@media (max-width: 1280px) {
  .vd-steps { flex-wrap: nowrap; }
  .vd-step { padding: 6px 8px 9px 6px; gap: 7px; }
  .vd-step .t b i { display: none; }
  .vd-steps .sep { display: none; }
  .vd-next { max-width: 220px; }
  .vd-two { grid-template-columns: 260px minmax(0, 1fr); }
}
.vd-mode { margin: 0 10px 8px; display: flex; }
.vd-mode button { flex: 1; }
.vd-src { display: flex; align-items: center; gap: 6px; margin: -2px 12px 8px; color: var(--mute); font: 650 11.5px var(--sans); }
.vd-src i { color: var(--violet); font-size: 14px; }
.vd-src b { margin-left: auto; color: var(--ink-2); font-weight: 700; }
.gl { display: inline-grid; place-items: center; height: 18px; padding: 0 5px; border-radius: 5px; background: rgba(216, 208, 228, .5); color: var(--mute); font: 800 9.5px var(--sans); letter-spacing: .04em; }
#mMem { flex: none; max-height: 38%; width: 100%; }
#mRes { flex: 1; width: 100%; }
#mMem td.nmc { max-width: 520px; }
.vd-glchip { display: flex; align-items: center; gap: 6px; margin: 0 10px 8px; height: 30px; padding: 0 10px; border-radius: 10px; border: 1px dashed var(--line); background: rgba(255, 255, 255, .5); color: var(--mute); font: 650 11.5px var(--sans); cursor: pointer; }
.vd-glchip:hover { border-color: var(--lav-300); color: var(--violet-2); }
.vd-glchip.on { border-style: solid; color: var(--violet-2); }
.vd-basis { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--mute); font: 600 12px var(--sans); }
.vd-basis b { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 6px; background: #faf8fe; border: 1px solid var(--line); color: var(--ink-2); font: 700 11.5px var(--sans); }
.vd-basis b i { color: var(--violet); }
.vd-src { align-items: flex-start; line-height: 1.35; }
.vd-src i { margin-top: 1px; }
.xt tr.usual td { background: #faf8fe; color: var(--violet-2); font-weight: 700; height: 32px; border-bottom: 1px dashed var(--lav-300); cursor: default; }
.xt tr.usual td i { margin-right: 5px; }
.pdiff { color: var(--pain); font-weight: 750; }
.pdiff em { font-style: normal; margin-left: 5px; padding: 1px 5px; border-radius: 5px; background: rgba(194, 79, 126, .1); font-size: 10.5px; }
.xt td.cdiff { color: var(--pain); font-weight: 700; }
.vd-signhead { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.vd-sign-t { display: grid; gap: 3px; flex: 1 1 380px; min-width: 0; }
.vd-sign-t b { font: 800 19px var(--serif); }
.vd-sign-t span { color: var(--mute); font: 600 12.5px/1.45 var(--sans); max-width: 620px; }
.vd-sign-p { display: grid; gap: 6px; min-width: 240px; }
.vd-sign-p span { font: 600 12.5px var(--sans); color: var(--mute); }
.vd-sign-p b { color: var(--ink); }
.vd-bar { height: 8px; border-radius: 8px; background: var(--lav-100); overflow: hidden; }
.vd-bar i { display: block; height: 100%; background: var(--s-val); border-radius: 8px; transition: width .5s var(--ease); }
.vd-link { margin-left: auto; border: 0; background: none; color: var(--violet-2); font: 700 12px var(--sans); cursor: pointer; }
.vd-link:hover { text-decoration: underline; }
.vd-mode.three button { font-size: 11px; padding: 0 6px; min-width: 0; white-space: nowrap; }
.vd-mode.three button i { font-size: 14px; }
.xt.mc td:nth-child(5) { min-width: 200px; }
.vd-mode.three button { font-size: 11.5px; padding: 0 7px; }
.xt.mc td { max-width: 230px; }
.xt.mc td:nth-child(5) { min-width: 0; }
.xt.mc .cat { max-width: 220px; }
button.ev.na { cursor: pointer; border: 0; }
button.ev.na:hover { color: var(--violet-2); background: var(--lav-100); }
.xt.mc { table-layout: fixed; }
.xt.mc td, .xt.mc th { max-width: none; overflow: hidden; text-overflow: ellipsis; }
.xt.mc .cat { max-width: 100%; }
.xt.mc .ev { max-width: 100%; }

/* a clash mark sits before a long description, so it is never cut off */
.xt td.nmc > .odd:first-child { margin: 0 8px 0 0; }

/* ---- modules: a small toggle row inside the screen each one belongs to; off = the screen as it was -------------- */
.vd-mods { display: flex; gap: 6px; margin: 0 10px 8px; flex-wrap: wrap; }
.vd-mods .mod { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 8px; border: 1px dashed var(--lav-300); background: transparent; color: var(--quiet); font: 700 11.5px var(--sans); cursor: pointer; }
.vd-mods .mod i { font-size: 14px; }
.vd-mods .mod.on { border: 1px solid transparent; background: var(--lav-100); color: var(--violet-2); }
.vd-mods .mod.on i { color: var(--s-ai); }
.vd-mods .mod.na { opacity: .55; cursor: default; text-decoration: line-through; }
.vd-mods .mod.sc { margin-left: auto; border: 1px solid var(--line); background: #fff; color: var(--violet-2); }
.vd-mods .mod.sc i { font-size: 15px; }
/* Second opinion: GenAI output, so the violet accent */
.so { display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 6px; border-radius: 999px; background: rgba(139, 92, 246, .12); color: var(--violet-2); font: 750 10.5px var(--sans); flex: none; }
.so i { font-size: 11px; color: var(--s-ai); }
.odd.so { background: rgba(139, 92, 246, .12); color: var(--violet-2); }
.odd.so i { color: var(--s-ai); }
.vd-sec.so { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 2px; color: var(--s-ai); }
.vd-sec.so > span:first-of-type { font: 700 12.5px var(--sans); color: var(--ink-2); }
.via { display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 6px; margin-left: 8px; border-radius: 6px; background: var(--lav-50); color: var(--mute); font: 650 10.5px var(--sans); white-space: nowrap; vertical-align: 1px; }
.via i { color: var(--s-ai); }
.no1 { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-left: 4px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--mute); cursor: pointer; vertical-align: middle; }
.no1:hover { background: var(--pain); color: #fff; border-color: var(--pain); }
/* scoreboard */
.sbp { padding: 12px 14px; display: grid; gap: 10px; }
.sbh { display: flex; align-items: center; gap: 6px; font: 750 13px var(--sans); color: var(--ink); }
.sbh i { color: var(--violet); font-size: 16px; }
.sb { width: 100%; border-collapse: collapse; font: 650 12px var(--sans); }
.sb th { text-align: left; font: 700 11px var(--sans); color: var(--mute); padding: 4px 6px; border-bottom: 1px solid var(--line); }
.sb th small { margin-left: 6px; color: var(--quiet); font-weight: 600; }
.sb td { padding: 6px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.sb td > i { color: var(--violet); margin-right: 6px; }
.sb .r { text-align: right; }
.sbv { display: inline-block; width: 46px; height: 5px; border-radius: 3px; background: var(--lav-100); margin-right: 6px; vertical-align: middle; overflow: hidden; }
.sbv i { display: block; height: 100%; background: var(--s-ai); }
.sbn { font: 600 11.5px var(--sans); color: var(--ink-2); display: flex; gap: 6px; align-items: baseline; line-height: 1.4; }
.sbn i { color: var(--violet); }
/* Spec: the specs a group's descriptions carry, and a split where two values can't both be true */
.vd-spec { display: flex; flex-wrap: wrap; gap: 6px; }
.spk { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border-radius: 9px; background: #fff; border: 1px solid var(--line); font: 650 11.5px var(--sans); color: var(--ink-2); }
.spk > i { color: var(--violet); font-size: 14px; }
.spk b { font-weight: 750; }
.spk em { font-style: normal; display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 6px; border-radius: 6px; background: var(--lav-50); white-space: nowrap; }
.spk em small { color: var(--quiet); font-weight: 700; }
.spk.clash { border-color: rgba(194, 79, 126, .35); background: rgba(194, 79, 126, .04); padding-right: 3px; }
.spk.clash em { background: rgba(194, 79, 126, .1); color: var(--pain); }
.spk .split { display: inline-grid; place-items: center; width: 24px; height: 22px; border-radius: 7px; border: 0; background: var(--pain); color: #fff; cursor: pointer; margin-left: 2px; }
.spk .split:hover { background: #a63d68; }
.xt th.spc, .xt td.spc { white-space: nowrap; }
.xt td.spc .pill { max-width: 140px; }
/* the answer key */
.vd-ak { margin-top: 14px; padding: 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); display: grid; gap: 8px; }
.ak-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ak-h > i { color: var(--violet); font-size: 18px; }
.ak-h b { font: 750 14px var(--sans); }
.ak-h .muted { font: 600 12px var(--sans); margin-left: auto; }
.ak-r { display: flex; align-items: center; gap: 8px; min-height: 30px; flex-wrap: wrap; }
.ak-r .ic { color: var(--violet); font-size: 17px; width: 22px; }
.ak-r small { margin-left: auto; color: var(--quiet); font-weight: 700; }
.ak-p { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--s-val); color: #fff; font: 750 12px var(--sans); }
.ak-s { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--lav-50); color: var(--ink-2); font: 700 11.5px var(--sans); }
.ak-s i { font-size: 12px; color: var(--violet); }
.ak-s.changed i, .ak-s.kept i { color: var(--s-val); }
.ak-s.sift_auto i { color: var(--s-ai); }
.ak-s.file { color: var(--mute); }
.ak-s.file i { color: var(--quiet); }
a.act { text-decoration: none; }
.xt td.nmc > .via:first-child { margin: 0 6px 0 0; padding: 0 5px; }
.sb tr.sub td { color: var(--mute); font-weight: 600; }
.sb tr.sub td:first-child { padding-left: 18px; }

/* add a client: Spend Pro's copied column mapper, every column kept */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { display: inline-block; animation: spin 1s linear infinite; }
.drop.small { display: flex; flex-wrap: wrap; align-items: center; min-height: 0; height: auto; padding: 14px 18px; text-align: left; gap: 8px 16px; }
.drop.small .btns { margin-left: auto; }
.drop.small .g { width: 56px; height: 56px; }
.drop.small h3 { font-size: 18px; }
.ing-files { display: grid; gap: 8px; margin-top: 14px; }
.ing-file { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 8px 6px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); font-weight: 650; flex-wrap: wrap; }
.ing-file > i { font-size: 20px; color: var(--violet); }
.ing-file b { font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.ing-file > span:not(.spacer) { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); }
.ing-file .spacer, .ing-map .spacer { flex: 1; }
.ing-file .icon { width: 30px; height: 30px; }
.ing-file .act { min-height: 30px; padding: 0 10px 0 8px; border-radius: 10px; }
.ing-up { flex: 1 1 100%; display: flex; align-items: center; gap: 10px; margin: 0 6px 2px 0; }
.ing-bar { flex: 1; height: 4px; border-radius: 2px; background: var(--lav-100); overflow: hidden; }
.ing-bar i { display: block; height: 100%; border-radius: 2px; background: var(--violet); transition: width .3s var(--ease); }
.ing-up.stall .ing-bar i { background: var(--pain); }
.ing-upn { color: var(--mute); font: 700 11.5px var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ing-kind, .ing-rec, .ing-src { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 12px; background: var(--lav-50); color: var(--mute); font: 700 11.5px var(--sans); }
.ing-kind.on { background: #e8f6ef; color: var(--s-val); }
.ing-rec { background: #eee2fb; color: var(--violet-2); }
.ing-src { background: transparent; border: 1px solid var(--line); margin-right: 6px; }
.ing-err { color: var(--pain); font-weight: 700; }
.ing-need { display: inline-flex; align-items: center; gap: 5px; margin-right: 12px; color: var(--quiet); font-weight: 750; }
.ing-need.ok { color: var(--s-val); }
.ing-step { width: 22px; height: 22px; border: 0; border-radius: 7px; background: var(--lav-50); color: var(--violet); cursor: pointer; display: inline-grid; place-items: center; padding: 0; }
.ing-step i { font-size: 12px !important; }
.ing-cands { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.ing-cand { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px 0 10px; border-radius: 15px; border: 1px solid var(--line); background: #fff; font-weight: 700; color: var(--mute); cursor: pointer; }
.ing-cand b { display: inline-grid; place-items: center; min-width: 26px; height: 20px; border-radius: 10px; background: var(--lav-50); color: var(--violet-2); font-size: 11px; }
.ing-cand.on { border-color: var(--violet); background: #eee2fb; color: var(--violet-2); }
.ing-map { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr); gap: 16px; align-items: start; }
.ing-fields h4, .ing-kept h4 { display: flex; align-items: center; gap: 7px; margin: 14px 0 6px; font: 800 12px var(--sans); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.ing-fields h4:first-child, .ing-kept h4 { margin-top: 0; }
.ing-fields h4 i, .ing-kept h4 i { color: var(--violet); font-size: 15px; }
.ing-fields h4 .muted { text-transform: none; letter-spacing: 0; font-weight: 650; }
.ing-row { display: grid; grid-template-columns: minmax(130px, 190px) minmax(0, 1fr) 124px 64px; gap: 8px; align-items: center; min-height: 38px; padding: 2px 6px; border-radius: 10px; }
.ing-row.set { background: rgba(255, 255, 255, .7); }
.ing-f { font-weight: 700; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ing-row.set .ing-f { color: var(--ink); }
.ing-row select { height: 32px; min-width: 0; border-radius: 9px; border: 1px solid var(--line); background: #fff; padding: 0 8px; font: 650 12.5px var(--sans); color: var(--ink); }
.ing-row:not(.set) select { color: var(--quiet); }
.ing-sug { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; border-radius: 13px; font: 700 11.5px var(--sans); white-space: nowrap; max-width: 100%; overflow: hidden; justify-self: start; }
.ing-sug.on { width: 26px; padding: 0; justify-content: center; }
.ing-sug.on { background: #e8f6ef; color: var(--s-val); }
.ing-sug.ghost { border: 1.5px dashed var(--lav-400); background: rgba(247, 245, 255, .7); color: var(--violet-2); cursor: pointer; }
.ing-sug.ghost:hover { border-color: var(--violet); }
.ing-sug em { font-style: normal; font-weight: 800; color: var(--quiet); }
.ing-q { display: inline-flex; align-items: center; gap: 5px; color: var(--mute); }
.ing-q .bar { display: inline-block; width: 34px; height: 5px; border-radius: 3px; background: var(--lav-100); overflow: hidden; }
.ing-q .bar i { display: block; height: 100%; background: var(--lav-400); }
.ing-fields details { margin-top: 12px; }
.ing-fields summary { display: flex; align-items: center; gap: 7px; cursor: pointer; font: 800 12px var(--sans); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); padding: 6px 0; }
.ing-fields summary .muted { text-transform: none; letter-spacing: 0; font-weight: 650; }
.ing-kept { position: sticky; top: 0; display: flex; flex-wrap: wrap; gap: 6px; align-content: start; padding: 14px; border-radius: 18px; background: rgba(255, 255, 255, .6); border: 1px solid var(--line); }
.ing-kept h4 { width: 100%; }
.ing-kept h4 b { margin-left: auto; color: var(--violet-2); }
.ing-col { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 8px; border-radius: 14px; background: #fff; border: 1px solid var(--line); font-weight: 650; color: var(--ink-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ing-col .bar { display: none; }
.ing-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; max-width: 760px; }
.ing-in { display: grid; gap: 6px; font-weight: 750; color: var(--ink-2); }
.ing-in.wide { grid-column: 1 / -1; }
.ing-in input { height: 40px; border-radius: 11px; border: 1px solid var(--line); background: #fff; padding: 0 12px; font: 650 14px var(--sans); color: var(--ink); }
.ing-in input:focus, .ing-row select:focus { outline: 2px solid var(--lav-300); outline-offset: 1px; }
.ing-big { font-size: 64px; color: var(--s-val); line-height: 1; }
.ing-big.err { color: var(--pain); }
@media (max-width: 760px) {
  .ing-map, .ing-form { grid-template-columns: minmax(0, 1fr); }
  .ing-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; }
  .ing-row .ing-q { display: none; }
  .ing-kept { position: static; }
}

/* sign-in */
.me { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--grad); color: #fff; font: 800 12px var(--sans); }
.refused { display: grid; justify-items: center; gap: 12px; margin: 12vh auto 0; max-width: 520px; text-align: center; }
.refused > i { font-size: 56px; color: var(--violet); }
.refused h1 { margin: 0; font: 800 28px var(--serif); }

/* Categories · Excel's tools: search on the left, Filter and Export at the right of the header, sortable headers */
.vd-find { margin: 0 10px 8px; }
.vd-tools { display: flex; align-items: center; gap: 6px; }
.vd-acts:empty + .vd-tools { margin-left: auto; }
.gbtn { position: relative; }
.gbtn.on { color: var(--violet); border-color: var(--lav-200); background: #fff; }
.gbtn.open { background: var(--lav-100); }
.gbtn em { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--violet); color: #fff; font: 800 9.5px/16px var(--sans); font-style: normal; text-align: center; }
.icon[disabled] { opacity: .45; cursor: progress; transform: none; }
.xt th.srt { cursor: pointer; user-select: none; }
.xt th.srt:hover { color: var(--ink-2); }
.xt th .si { font-size: 11px; margin-left: 4px; opacity: 0; transition: opacity .12s; vertical-align: -1px; }
.xt th.srt:hover .si { opacity: .55; }
.xt th.srt.on { color: var(--violet-2); }
.xt th.srt.on .si { opacity: 1; }
.xt th sup { font: 800 8.5px var(--sans); color: var(--violet); margin-left: 1px; }
.gf { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--lav-200); border-radius: 12px; background: linear-gradient(180deg, #fbf9ff, #fff); }
.gf-sec { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 600 12px var(--sans); color: var(--mute); min-height: 26px; }
.gf-sec b { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font: 750 12.5px var(--sans); }
.gf-sec b i { color: var(--violet); font-size: 15px; }
.gf-sec + .gf-sec, .gf-add + .gf-sec { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); }
.seg.sm button { height: 22px; font-size: 11px; padding: 0 9px; }
.gf-n { margin-left: auto; font: 650 12px var(--sans); color: var(--mute); }
.gf-n b { color: var(--ink); }
.gf-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gf-row select, .gf-v input, .gf-pick { height: 30px; border: 1px solid var(--line); border-radius: 9px; background: #fff; font: 650 12.5px var(--sans); color: var(--ink); padding: 0 8px; outline: 0; }
.gf-row select { padding-right: 4px; cursor: pointer; max-width: 230px; }
.gf-row select:focus, .gf-v input:focus, .gf-pick:focus { border-color: var(--lav-400); box-shadow: 0 0 0 3px rgba(139, 92, 246, .12); }
.gf-v { flex: 1 1 200px; display: flex; gap: 6px; min-width: 160px; }
.gf-v input { flex: 1; min-width: 0; }
.gf-v input.bad { border-color: var(--pain); }
.gf-v.two input { max-width: 140px; }
.gf-pick { flex: 1; display: flex; align-items: center; gap: 6px; cursor: pointer; text-align: left; min-width: 0; }
.gf-pick span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gf-pick em { font-style: normal; color: var(--violet); font-weight: 750; }
.gf-pick i { color: var(--quiet); }
.gf-lv { width: 34px; color: var(--quiet); font: 650 11.5px var(--sans); text-align: right; }
.gf-x { display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 8px; background: transparent; color: var(--quiet); cursor: pointer; }
.gf-x:hover { background: var(--lav-100); color: var(--pain); }
.gf-add { justify-self: start; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; border: 1px dashed var(--lav-200); border-radius: 8px; background: transparent; color: var(--violet-2); font: 700 11.5px var(--sans); cursor: pointer; }
.gf-add:hover { background: var(--lav-100); border-style: solid; }
.gf-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }
.gf-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gchip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 4px 0 9px; border-radius: 999px; background: var(--lav-100); color: var(--ink-2); font: 650 12px var(--sans); cursor: pointer; max-width: 420px; }
.gchip b { color: var(--violet-2); font-weight: 750; }
.gchip small { color: var(--mute); font-weight: 650; }
.gchip i.ph-sort-ascending { color: var(--violet); }
.gchip button { display: grid; place-items: center; width: 18px; height: 18px; border: 0; border-radius: 50%; background: #fff; color: var(--violet); cursor: pointer; font-size: 10px; flex: none; }
.gchip button:hover { color: var(--pain); }
.gand { color: var(--quiet); font: 700 11px var(--sans); }
.gclr { border: 0; background: transparent; color: var(--violet-2); font: 700 12px var(--sans); cursor: pointer; padding: 0 4px; }
.gclr:hover { text-decoration: underline; }
.gf-chips .gf-n { margin-left: auto; }
.gf-more { display: flex; align-items: center; gap: 6px; padding: 10px 12px; color: var(--mute); font: 650 12px var(--sans); border-top: 1px solid var(--line); background: #fcfbfe; }
.gf-more i { color: var(--violet); }
.vd-empty .act { margin-top: 4px; }
.gp-acts { display: flex; gap: 6px; margin: 0 0 6px; }
.gp-acts button { border: 0; background: transparent; color: var(--violet-2); font: 700 11.5px var(--sans); cursor: pointer; padding: 2px 4px; }
.gp-acts button:hover { text-decoration: underline; }
.pop-item.gp i { color: var(--violet); }
.pop-item.gp.on { background: rgba(112, 57, 183, .06); }
.gp-more { padding: 8px 9px; font: 650 11.5px var(--sans); }

/* sharing: who is on the project, adding people, handing out work */
button.people { border: 0; background: transparent; cursor: pointer; align-items: center; padding: 0 0 0 4px; }
button.people:hover .people-add { background: #fff; color: var(--violet); }
.people .av-more { background: var(--lav-100); color: var(--violet-2); }
.people-add { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-left: 4px; border-radius: 50%; border: 1px dashed var(--lav-400); color: var(--violet-2); background: rgba(255, 255, 255, .6); font-size: 14px; transition: background .15s; }
.sh { display: grid; gap: 10px; }
.sh-h { display: grid; gap: 2px; padding: 2px 4px 4px; }
.sh-h b { font: 800 18px/1.2 var(--serif); letter-spacing: -.01em; }
.sh-h .muted { font-size: 12px; }
.sh-add { display: flex; gap: 6px; align-items: center; }
.sh-add select, .sh-r { height: 32px; border: 1px solid var(--line); border-radius: 9px; background: #fff; font: 650 12px var(--sans); color: var(--ink); padding: 0 6px; cursor: pointer; }
.sh-res { display: grid; gap: 2px; max-height: 260px; overflow: auto; }
.sh-res:empty { display: none; }
.sh-c { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 8px; border: 0; border-radius: 10px; background: transparent; text-align: left; cursor: pointer; }
.sh-c:hover { background: rgba(112, 57, 183, .07); }
.sh-c[disabled] { cursor: default; opacity: .6; }
.sh-c .av, .sh-m .av, .wk .av { margin: 0; width: 32px; height: 32px; font-size: 10.5px; border-width: 0; }
.sh-who { display: grid; min-width: 0; }
.sh-who b { font: 650 13px var(--sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-who small { color: var(--mute); font: 600 11px var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-wait { color: var(--violet-2) !important; display: inline-flex; align-items: center; gap: 4px; }
.sh-tag { display: inline-flex; align-items: center; gap: 4px; font: 700 11.5px var(--sans); color: var(--violet-2); }
.sh-none { padding: 8px; font-size: 12px; }
.sh-list { display: grid; gap: 2px; max-height: 300px; overflow: auto; border-top: 1px solid var(--line); padding-top: 8px; }
.sh-m { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 6px 4px; }
.sh-role { font: 700 11.5px var(--sans); color: var(--mute); padding: 0 6px; }
.sh-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.sh-f .muted { font-size: 11.5px; display: inline-flex; gap: 5px; align-items: center; }
.asg-what { display: grid; gap: 4px; }
.asg-o { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 11px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.asg-o:has(input:checked) { border-color: var(--lav-400); background: var(--lav-50); }
.asg-o input { margin-top: 3px; accent-color: var(--violet); }
.asg-o span { display: grid; gap: 1px; }
.asg-o b { font: 650 13px var(--sans); }
.asg-o small { color: var(--mute); font: 600 11.5px var(--sans); }
.asg-to { display: flex; flex-wrap: wrap; gap: 6px; }
.asg-to:empty { display: none; }
.asg-to .gchip { padding-left: 3px; }
.asg-to .av.sm { margin: 0; }
.asg-more { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.asg-more input { height: 32px; border: 1px solid var(--line); border-radius: 9px; background: #fff; font: 600 12.5px var(--sans); color: var(--ink); padding: 0 9px; min-width: 0; }
#asgErr { color: var(--pain); }
.vd-opt.work.hot { background: var(--grad); color: #fff; border-color: transparent; }
.vd-opt.work.hot i { color: #fff; }
.wk-list { display: grid; gap: 4px; max-height: 420px; overflow: auto; }
.wk { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 8px; border-radius: 12px; }
.wk.mine { background: var(--lav-50); }
.wk-b { display: grid; gap: 2px; min-width: 0; }
.wk-b b { font: 650 13px var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-b small { color: var(--mute); font: 600 11.5px var(--sans); display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.wk-note { font-style: italic; }
.wk-bar { height: 3px; border-radius: 3px; background: var(--lav-200); overflow: hidden; margin-top: 3px; }
.wk-bar i { display: block; height: 100%; background: var(--s-val); border-radius: 3px; }
.wk-a { display: flex; gap: 4px; align-items: center; }
.gasg { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-radius: 12px; background: linear-gradient(120deg, rgba(181, 157, 251, .18), rgba(255, 255, 255, .7)); border: 1px solid var(--lav-200); font: 600 12.5px var(--sans); }
.gasg .av.sm { margin: 0; }
.gasg b { color: var(--violet-2); }
.stats .hot { color: var(--violet-2); }

/* KOS GPT runs: a run the file can't feed, a failed run, and the pill while KPS GPT works (it reports states, not %) */
.algo.off { opacity: .45; cursor: not-allowed; }
.algo.off:hover { transform: none; }
.okc.bad { background: rgba(194, 79, 126, .12); color: var(--pain); }
.start-run[disabled] { opacity: .5; cursor: not-allowed; }
.runs.is-waiting .runs-bar::after { width: 35%; animation: runs-wait 1.8s ease-in-out infinite; }
@keyframes runs-wait { 0% { transform: translateX(-100%); } 100% { transform: translateX(290%); } }
@media (prefers-reduced-motion: reduce) { .runs.is-waiting .runs-bar::after { animation: none; } }