/* ============================================================
   MN APP-UI — faithful recreations of the real Mentionova app
   screens (citationpulse) for landing-page mockups.
   Uses lib.css tokens so light/dark themes + palettes work.
   Load AFTER /lib.css and /site.css.
   ============================================================ */

/* ---------- app window frame ---------- */
.mn-app { border:1px solid var(--border); border-radius:14px; background:var(--paper-0); box-shadow:var(--shadow-lg); overflow:hidden; font-size:13px; text-align:left; }
.mn-app-top { display:flex; align-items:center; gap:10px; padding:9px 14px; border-bottom:1px solid var(--border); background:var(--surface); }
.mn-app-top .dots { display:flex; gap:5px; }
.mn-app-top .dots i { width:8px; height:8px; border-radius:50%; background:var(--border-strong); display:block; }
.mn-app-top .crumb { font-family:var(--font-mono); font-size:10.5px; color:var(--text-subtle); letter-spacing:.04em; }
.mn-app-top .crumb b { color:var(--text); font-weight:600; }
.mn-app-top .right { margin-left:auto; display:flex; gap:6px; align-items:center; }
.mn-app-body { display:grid; grid-template-columns:172px 1fr; min-height:0; }
.mn-main { padding:16px; display:flex; flex-direction:column; gap:12px; min-width:0; }

/* ---------- sidebar ---------- */
.mn-side { border-right:1px solid var(--border); background:var(--surface); padding:12px 8px; display:flex; flex-direction:column; gap:2px; }
@media(max-width:860px){ .mn-app-body { grid-template-columns:1fr; } .mn-side { display:none; } }
.mn-side .grp { font-family:var(--font-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); padding:10px 10px 4px; }
.mn-side .it { display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:8px; font-size:12px; color:var(--text-muted); }
.mn-side .it svg, .mn-side .it .ic { width:13px; height:13px; opacity:.75; flex:none; }
.mn-side .it.on { background:color-mix(in oklab, var(--signal) 12%, transparent); color:var(--text); font-weight:600; }

/* ---------- KPI strip (Overview) ---------- */
.mn-kpis { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--border); border-radius:12px; background:var(--surface); overflow:hidden; }
.mn-kpis > div { padding:14px 16px; border-left:1px solid var(--border); min-width:0; }
.mn-kpis > div:first-child { border-left:none; }
@media(max-width:640px){ .mn-kpis { grid-template-columns:repeat(2,1fr); } .mn-kpis > div:nth-child(3) { border-left:none; } .mn-kpis > div:nth-child(n+3) { border-top:1px solid var(--border); } }
.mn-kpi-k { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-subtle); }
.mn-kpi-v { font-family:var(--font-display); font-weight:500; font-size:26px; letter-spacing:-.01em; color:var(--text); margin-top:4px; font-variant-numeric:tabular-nums; }
.mn-kpi-v small { font-size:14px; color:var(--text-muted); }
.mn-delta { display:inline-flex; align-items:center; gap:3px; font-family:var(--font-mono); font-size:9.5px; padding:2px 6px; border-radius:999px; margin-left:6px; vertical-align:3px; }
.mn-delta.up { color:var(--positive); background:color-mix(in oklab, var(--positive) 12%, transparent); }
.mn-delta.down { color:var(--negative); background:color-mix(in oklab, var(--negative) 12%, transparent); }
.mn-foot-note { font-family:var(--font-mono); font-size:9.5px; color:var(--text-faint); }

/* ---------- inner cards / section headers ---------- */
.mn-card { border:1px solid var(--border); border-radius:12px; background:var(--surface); padding:14px 16px; min-width:0; }
.mn-card-h { display:flex; align-items:baseline; gap:8px; margin-bottom:10px; }
.mn-card-h .t { font-family:var(--font-display); font-size:15.5px; font-weight:500; color:var(--text); }
.mn-card-h .t em { font-style:italic; color:var(--signal-deep); }
.mn-card-h .sub { font-family:var(--font-mono); font-size:9.5px; color:var(--text-faint); margin-left:auto; }

/* ---------- pills / chips ---------- */
.mn-pill { display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; padding:2.5px 8px; border-radius:999px; border:1px solid var(--border); color:var(--text-subtle); white-space:nowrap; }
.mn-pill.ok   { color:var(--positive); border-color:color-mix(in oklab, var(--positive) 40%, transparent); background:color-mix(in oklab, var(--positive) 9%, transparent); }
.mn-pill.bad  { color:var(--negative); border-color:color-mix(in oklab, var(--negative) 40%, transparent); background:color-mix(in oklab, var(--negative) 9%, transparent); }
.mn-pill.warn { color:#8a6d1f; border-color:color-mix(in oklab, #b07a14 45%, transparent); background:color-mix(in oklab, #b07a14 12%, transparent); }
.mn-pill.sig  { color:var(--signal-deep); border-color:color-mix(in oklab, var(--signal) 45%, transparent); background:color-mix(in oklab, var(--signal) 10%, transparent); }
.mn-live { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--signal-deep); }
.mn-live i { width:6px; height:6px; border-radius:50%; background:var(--signal); animation:mnpulse 1.8s infinite; }
@keyframes mnpulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* engine chip (small, app style) */
.mn-e { display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:10px; color:var(--text-muted); }
.mn-e i { width:7px; height:7px; border-radius:50%; display:block; }
.mn-e.chatgpt i{background:var(--engine-chatgpt)} .mn-e.perplexity i{background:var(--engine-perplexity)} .mn-e.claude i{background:var(--engine-claude)} .mn-e.gemini i{background:var(--engine-gemini)} .mn-e.google i{background:var(--engine-google)} .mn-e.reddit i{background:var(--engine-reddit)}

/* ---------- data table ---------- */
.mn-table { width:100%; border-collapse:collapse; font-size:12px; }
.mn-table th { font-family:var(--font-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); text-align:left; padding:7px 10px; border-bottom:1px solid var(--border); font-weight:500; }
.mn-table td { padding:8px 10px; border-bottom:1px solid var(--border); color:var(--text-muted); vertical-align:middle; }
.mn-table tr:last-child td { border-bottom:none; }
.mn-table td.num { font-family:var(--font-mono); font-variant-numeric:tabular-nums; text-align:right; color:var(--text); }
.mn-table tr.you td { background:color-mix(in oklab, var(--signal) 6%, transparent); color:var(--text); font-weight:600; }

/* favicon-initial box + visibility bar (leaderboard) */
.mn-fav { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:6px; background:var(--paper-2, var(--border)); color:var(--text); font-family:var(--font-mono); font-size:10px; font-weight:600; margin-right:8px; }
tr.you .mn-fav { background:var(--signal); color:#fff; }
.mn-bar { display:inline-block; width:72px; height:5px; border-radius:999px; background:color-mix(in oklab, var(--text) 10%, transparent); vertical-align:middle; overflow:hidden; }
.mn-bar i { display:block; height:100%; border-radius:999px; background:color-mix(in oklab, var(--text) 38%, transparent); }
tr.you .mn-bar i, .mn-bar.sig i { background:var(--signal); }

/* ---------- heatmap ---------- */
.mn-heat { width:100%; border-collapse:separate; border-spacing:3px; font-size:11px; }
.mn-heat th { font-family:var(--font-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); font-weight:500; padding:2px 4px; text-align:center; }
.mn-heat th.rowh { text-align:left; font-style:italic; font-family:var(--font-display); font-size:12px; text-transform:none; letter-spacing:0; color:var(--text-muted); max-width:170px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mn-heat td { text-align:center; border-radius:7px; padding:7px 2px 6px; min-width:44px; }
.mn-heat td .p { font-family:var(--font-display); font-size:14px; font-weight:500; color:var(--text); display:block; line-height:1; }
.mn-heat td .f { font-family:var(--font-mono); font-size:8.5px; color:var(--text-subtle); display:block; margin-top:2px; }
.mn-heat td.h0 { background:color-mix(in oklab, var(--text) 5%, transparent); } .mn-heat td.h0 .p { color:var(--text-faint); }
.mn-heat td.h1 { background:color-mix(in oklab, var(--signal) 12%, var(--surface)); }
.mn-heat td.h2 { background:color-mix(in oklab, var(--signal) 22%, var(--surface)); }
.mn-heat td.h3 { background:color-mix(in oklab, var(--signal) 34%, var(--surface)); }
.mn-heat td.h4 { background:color-mix(in oklab, var(--signal) 48%, var(--surface)); }
.mn-heat td.h5 { background:color-mix(in oklab, var(--signal) 62%, var(--surface)); }
.mn-heat td.h4 .p, .mn-heat td.h5 .p { color:var(--signal-ink, #14110E); }
.mn-heat-leg { display:flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:9px; color:var(--text-faint); margin-top:8px; }
.mn-heat-leg i { width:14px; height:8px; border-radius:3px; display:block; }

/* ---------- drift feed ---------- */
.mn-drift { display:flex; flex-direction:column; gap:8px; }
.mn-ev { border:1px solid var(--border); border-radius:10px; background:var(--surface); padding:10px 12px; }
.mn-ev .hd { display:flex; align-items:center; gap:8px; }
.mn-ev .bdg { font-family:var(--font-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; padding:2px 7px; border-radius:999px; }
.mn-ev .bdg.gain { color:var(--positive); background:color-mix(in oklab, var(--positive) 12%, transparent); }
.mn-ev .bdg.loss { color:var(--negative); background:color-mix(in oklab, var(--negative) 12%, transparent); }
.mn-ev .bdg.neut { color:var(--text-subtle); background:color-mix(in oklab, var(--text) 8%, transparent); }
.mn-ev .when { font-family:var(--font-mono); font-size:9px; color:var(--text-faint); margin-left:auto; }
.mn-ev .sent { font-size:12.5px; color:var(--text-muted); margin-top:6px; }
.mn-ev .sent b { color:var(--text); font-weight:600; }
.mn-ev .sent .pos { font-family:var(--font-mono); }
.mn-ev blockquote { margin:8px 0 0; padding:7px 10px; font-size:11.5px; font-style:italic; color:var(--text-muted); border-left:2.5px solid var(--positive); background:color-mix(in oklab, var(--positive) 5%, transparent); border-radius:0 7px 7px 0; }
.mn-ev blockquote.loss { border-left-color:var(--negative); background:color-mix(in oklab, var(--negative) 5%, transparent); }
.mn-ev mark { background:color-mix(in oklab, var(--positive) 18%, transparent); color:var(--text); border-radius:3px; padding:0 2px; }
.mn-ev del { background:color-mix(in oklab, var(--negative) 14%, transparent); color:var(--negative); border-radius:3px; padding:0 2px; text-decoration:line-through; }

/* ---------- compare LLMs ---------- */
.mn-cmp { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
@media(max-width:900px){ .mn-cmp { grid-template-columns:repeat(2,1fr); } }
.mn-cmp .col { border:1px solid var(--border); border-radius:10px; background:var(--surface); padding:10px 11px; min-width:0; }
.mn-cmp .ch { display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-subtle); }
.mn-cmp .st { margin:7px 0; }
.mn-cmp .txt { font-size:11.5px; line-height:1.5; color:var(--text-muted); }
.mn-cmp .txt mark { background:var(--mark-bg); color:var(--mark-text); border-radius:3px; padding:0 3px; font-weight:600; }
.mn-cmp .cites { border-top:1px dashed var(--border); margin-top:8px; padding-top:7px; display:flex; flex-direction:column; gap:3px; }
.mn-cmp .cites span { font-family:var(--font-mono); font-size:9.5px; color:var(--text-subtle); display:flex; gap:6px; align-items:center; }
.mn-cmp .cites .rk { color:var(--signal-deep); }

/* ---------- reddit thread card ---------- */
.mn-thread { border:1px solid var(--border); border-top:3px solid #b07a14; border-radius:10px; background:var(--surface); padding:11px 13px; }
.mn-thread.approved { border-top-color:var(--positive); }
.mn-thread.posted { border-top-color:var(--engine-gemini); }
.mn-thread .tt { font-size:12.5px; font-weight:600; color:var(--text); }
.mn-thread .tt .sr { font-family:var(--font-mono); font-weight:500; color:var(--engine-reddit); margin-right:6px; font-size:11px; }
.mn-thread .meta { font-family:var(--font-mono); font-size:9.5px; color:var(--text-faint); margin-top:4px; display:flex; gap:10px; flex-wrap:wrap; }
.mn-thread .cbox { margin-top:8px; border:1px dashed var(--border-strong); border-radius:8px; padding:8px 10px; font-size:11.5px; font-style:italic; color:var(--text-muted); background:color-mix(in oklab, var(--text) 3%, transparent); }
.mn-thread .cbox .lab { font-family:var(--font-mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); font-style:normal; display:block; margin-bottom:3px; }
.mn-thread .acts { display:flex; gap:6px; margin-top:9px; }
.mn-thread .acts span { font-family:var(--font-mono); font-size:9.5px; padding:3.5px 10px; border:1px solid var(--border); border-radius:999px; color:var(--text-muted); }
.mn-thread .acts span.pri { background:var(--signal); border-color:var(--signal); color:#fff; }

/* ---------- opportunities row ---------- */
.mn-opps { display:flex; flex-direction:column; }
.mn-opp { display:flex; align-items:center; gap:10px; padding:9px 4px; border-bottom:1px solid var(--border); min-width:0; }
.mn-opp:last-child { border-bottom:none; }
.mn-opp .sc { flex:none; font-family:var(--font-mono); font-size:10px; font-weight:600; padding:3px 8px; border-radius:999px; }
.mn-opp .sc.hi  { color:#fff; background:var(--signal); }
.mn-opp .sc.mid { color:var(--engine-gemini); background:color-mix(in oklab, var(--engine-gemini) 14%, transparent); }
.mn-opp .sc.low { color:#8a6d1f; background:color-mix(in oklab, #b07a14 16%, transparent); }
.mn-opp .pt { font-family:var(--font-display); font-style:italic; font-size:13px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mn-opp .win { font-size:10.5px; color:var(--text-faint); white-space:nowrap; }
.mn-opp .rec { margin-left:auto; flex:none; }

/* ---------- rings ---------- */
.mn-ring { --p:64; --ring:var(--signal); width:84px; height:84px; border-radius:50%; position:relative; background:conic-gradient(var(--ring) calc(var(--p)*1%), color-mix(in oklab, var(--text) 9%, transparent) 0); display:flex; align-items:center; justify-content:center; flex:none; }
.mn-ring::before { content:''; position:absolute; inset:9px; border-radius:50%; background:var(--surface); }
.mn-ring .v { position:relative; font-family:var(--font-display); font-size:21px; font-weight:500; color:var(--text); }
.mn-ring .v small { font-size:9px; color:var(--text-subtle); }
.mn-ring.sm { width:60px; height:60px; } .mn-ring.sm::before { inset:7px; } .mn-ring.sm .v { font-size:15px; }

/* ---------- white-label report frame ---------- */
.mn-report-hd { display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--border); background:var(--surface); }
.mn-report-hd .logo { background:var(--ink-0, #14110E); color:var(--paper-0, #FAF7F2); font-family:var(--font-display); font-size:11px; padding:4px 10px; border-radius:7px; }
.mn-report-hd .ro { margin-left:auto; font-family:var(--font-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); }

/* ---------- generic helpers ---------- */
.mn-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.mn-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(max-width:760px){ .mn-grid2 { grid-template-columns:1fr; } }
.mn-quote { border-left:2.5px solid var(--positive); background:color-mix(in oklab, var(--positive) 5%, transparent); border-radius:0 8px 8px 0; padding:8px 11px; font-size:11.5px; font-style:italic; color:var(--text-muted); }
.mn-quote .lab { display:block; font-family:var(--font-mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); font-style:normal; margin-bottom:3px; }
.mn-quote.neg { border-left-color:var(--negative); background:color-mix(in oklab, var(--negative) 5%, transparent); }