/* Product shots on the public landing page.
   Class names are prefixed lx- so remnant rules (.tile, .row, .btn, .dot, …)
   do not apply inside the shot. Colours are the app's theme tokens, so paper
   and carbon both work; the ground behind the window is not a token.
   Linked only from the landing page. Unlayered, like unscaffold.css. */

.lx-stage {
  --lx-bg: rgb(var(--surface));
  --lx-stage: rgb(238 240 242);
  --lx-win: rgb(var(--elevated));
  --lx-win-2: rgb(var(--elevated-2));
  --lx-ink: rgb(var(--ink));
  --lx-ink2: rgb(var(--ink2));
  --lx-ink3: rgb(var(--ink3));
  --lx-line: rgb(var(--hairline));
  --lx-line-2: rgb(var(--hairline-strong));
  --lx-accent: rgb(var(--accent));
  --lx-accent-ink: rgb(var(--accent-ink));
  --lx-accent-soft: rgb(var(--accent) / .09);
  --lx-ok: rgb(var(--ok));
  --lx-ok-soft: rgb(var(--ok) / .11);
  --lx-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 18px 48px -18px rgb(20 30 45 / .22);
  --lx-ease: cubic-bezier(.25, 1, .5, 1);
  font-family: var(--fam-sans);
  color: var(--lx-ink);
}
.lx-win, .lx-example { position: relative; z-index: 1; }
html[data-theme="carbon"] .lx-stage,
html[data-theme="mono"] .lx-stage {
  --lx-stage: rgb(16 17 18);
  --lx-accent-soft: rgb(var(--accent) / .14);
  --lx-ok-soft: rgb(var(--ok) / .14);
  --lx-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 18px 48px -18px rgb(0 0 0 / .7);
}

/* ── the product stage — the app's real chrome (captures in scratchpad/real/NOTES.lx-md) ── */
.lx-stage { min-width: 0; position: relative; }
.lx-stage::before { content: ""; position: absolute; inset: -28px; background: var(--lx-stage); border-radius: 18px; z-index: 0; }
.lx-example { position: absolute; right: 4px; bottom: -22px; font-family: var(--fam-mono); font-size: 10.5px; color: var(--lx-ink3); }
.lx-win { background: var(--lx-bg); border: 1px solid var(--lx-line); border-radius: 10px; box-shadow: var(--lx-shadow); overflow: hidden;
       display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: clamp(440px, 64vh, 580px); font-size: 12px; line-height: 1.5; }
.lx-mono { font-family: var(--fam-mono); }
.lx-rail { border-right: 1px solid var(--lx-line); min-height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 0; }
/* The app's .oly-mark at rail size: lx() renames the class, so .oly-mark never applies here. */
.lx-rail .lx-mark { width: 24px; height: 24px; flex: 0 0 24px; margin-bottom: 12px; border-radius: var(--radius); display: grid; place-items: center;
                    background: var(--lx-accent); color: var(--lx-accent-ink); }
.lx-rail .lx-mark svg { width: 10.5px; height: 14.4px; }
.lx-ri { width: 30px; height: 28px; border-radius: 3px; display: grid; place-items: center; color: var(--lx-ink2); border: 1px solid transparent; }
.lx-ri.lx-on { background: color-mix(in srgb, var(--lx-ink) 7%, transparent); border-color: var(--lx-line); color: var(--lx-ink); }
.lx-ri svg { width: 15px; height: 15px; }
.lx-rail .lx-gap { height: 8px; }
.lx-rail .lx-me { margin-top: auto; width: 22px; height: 22px; }
.lx-app { display: grid; grid-template-rows: 40px auto minmax(0, 1fr); min-width: 0; }
.lx-bar { display: flex; align-items: center; gap: 10px; padding: 0 12px; border-bottom: 1px solid var(--lx-line); color: var(--lx-ink2); min-width: 0; font-family: var(--fam-mono); font-size: 11.5px; }
.lx-bar svg { width: 13px; height: 13px; color: var(--lx-ink3); flex: 0 0 13px; }
.lx-bar b { color: var(--lx-ink); font-weight: 400; }
.lx-bar .lx-r { margin-left: auto; display: flex; align-items: center; gap: 6px; font-family: var(--fam-sans); }
.lx-focused { border: 1px solid color-mix(in srgb, var(--lx-accent) 70%, transparent); color: var(--lx-accent); border-radius: 3px; padding: 0 5px; font-size: 10.5px; }
.lx-search { display: flex; align-items: center; gap: 6px; border: 1px solid var(--lx-line); border-radius: 3px; padding: 3px 7px; color: var(--lx-ink3); background: var(--lx-win); white-space: nowrap; }
.lx-kbd { font-family: var(--fam-mono); font-size: 9.5px; font-weight: 500; border: 1px solid var(--lx-line); background: var(--lx-win-2); border-radius: 1px; padding: 0 4px; color: var(--lx-ink2); }
.lx-sbtn { font-size: 11.5px; border: 1px solid var(--lx-line); background: var(--lx-win); border-radius: 3px; padding: 3px 9px; color: var(--lx-ink); white-space: nowrap; cursor: default; }
.lx-sbtn.lx-primary { background: var(--lx-accent); border-color: var(--lx-accent); color: var(--lx-accent-ink); font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
.lx-sbtn.lx-primary .lx-kbd { background: transparent; color: var(--lx-accent-ink); border-color: color-mix(in srgb, var(--lx-accent-ink) 40%, transparent); }
.lx-head { display: flex; align-items: baseline; gap: 6px; padding: 9px 12px 8px; border-bottom: 1px solid var(--lx-line); }
.lx-head h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.lx-head sup { color: var(--lx-ink3); font-family: var(--fam-mono); font-size: 10px; }
.lx-head .lx-r { margin-left: auto; align-self: center; }
.lx-app.lx-nohead { grid-template-rows: 40px minmax(0, 1fr); }
.lx-body { min-height: 0; padding: 6px; display: grid; gap: 5px; grid-template-rows: minmax(0, 1fr); background: color-mix(in srgb, var(--lx-win) 50%, transparent); }
.lx-body.lx-two { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
.lx-body.lx-pad { padding: 12px; gap: 12px; }

/* session tile */
.lx-tile { background: var(--lx-bg); border: 1px solid var(--lx-line); border-radius: 6px; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; overflow: hidden; }
.lx-tile.lx-focus { border-color: color-mix(in srgb, var(--lx-accent) 60%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--lx-accent) 35%, transparent); }
.lx-th { display: flex; align-items: center; gap: 7px; padding: 6px 8px 6px 10px; border-bottom: 1px solid var(--lx-line); min-width: 0; }
.lx-tile.lx-focus .lx-th { background: color-mix(in srgb, var(--lx-accent) 10%, transparent); }
.lx-th .lx-name { font-family: var(--fam-mono); font-weight: 500; white-space: nowrap; }
.lx-th .lx-num { font-family: var(--fam-mono); font-size: 10px; color: var(--lx-ink3); }
.lx-th .lx-r { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; color: var(--lx-ink3); }
.lx-th .lx-r svg { width: 11px; height: 11px; }
.lx-topic { display: flex; gap: 7px; align-items: baseline; padding: 3px 10px; border-bottom: 1px solid var(--lx-line); min-width: 0; white-space: nowrap; overflow: hidden; }
.lx-topic .lx-lbl { font-size: 10px; font-weight: 500; color: var(--lx-ink3); }
.lx-topic .lx-t { font-family: var(--fam-mono); font-size: 10.5px; color: var(--lx-ink2); overflow: hidden; text-overflow: ellipsis; }
.lx-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lx-ok); flex: 0 0 7px; }
.lx-dot.lx-idle { background: var(--lx-ink3); }
.lx-dot.lx-live { background: var(--lx-ok); box-shadow: 0 0 0 3px var(--lx-ok-soft); }
.lx-god { width: 17px; height: 17px; border-radius: 50%; border: 1px solid var(--lx-line); background: var(--lx-win-2); font-family: var(--fam-mono); font-size: 8.5px; font-weight: 600; color: var(--lx-ink2); display: grid; place-items: center; flex: 0 0 17px; }
.lx-chipav { min-width: 21px; height: 19px; padding: 0 3px; border-radius: 3px; border: 1px solid var(--lx-line); background: var(--lx-win-2); font-family: var(--fam-mono); font-size: 9.5px; font-weight: 600; color: var(--lx-ink2); display: grid; place-items: center; }
.lx-av { width: 20px; height: 20px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--lx-line); object-fit: cover; display: block; background: var(--lx-win-2); }
.lx-mh .lx-av { width: 16px; height: 16px; }
.lx-chipav.lx-pop, .lx-av.lx-pop { animation: lx-pop .45s var(--lx-ease) both; }
.lx-presence { display: flex; gap: 4px; align-items: center; }
@keyframes lx-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.lx-feed { padding: 10px; display: flex; flex-direction: column; gap: 9px; overflow: hidden; min-height: 0; justify-content: flex-end; }
.lx-msg { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lx-mh { font-family: var(--fam-mono); font-size: 10px; color: var(--lx-ink3); display: flex; gap: 6px; align-items: center; }.lx-mh b { color: var(--lx-ink2); font-weight: 600; }
.lx-msg.lx-user { align-items: flex-end; }
.lx-msg.lx-user .lx-b { background: var(--lx-accent); color: var(--lx-accent-ink); border-radius: 4px; padding: 7px 10px; max-width: 88%; }
.lx-msg.lx-mate { align-items: flex-end; }
.lx-msg.lx-mate .lx-b { background: var(--lx-win-2); border: 1px solid var(--lx-line-2); border-radius: 4px; padding: 7px 10px; max-width: 88%; }
.lx-msg .lx-txt { color: var(--lx-ink); max-width: 62ch; }
.lx-msg .lx-txt strong { font-weight: 600; }
.lx-run { background: var(--lx-win); border: 1px solid var(--lx-line); border-radius: 3px; font-family: var(--fam-mono); font-size: 10.5px; color: var(--lx-ink3); }
.lx-fold { display: flex; align-items: center; gap: 7px; padding: 5px 9px; }
.lx-fold b { color: var(--lx-ink); font-weight: 500; }
.lx-last5 { border-top: 1px solid var(--lx-line); padding: 5px 9px 6px; display: flex; flex-direction: column; gap: 3px; }
.lx-cap { font-size: 9.5px; }
.lx-trow { display: grid; grid-template-columns: 7px 74px minmax(0, 1fr); gap: 8px; align-items: center; }
.lx-trow .lx-tn { color: var(--lx-ink); }
.lx-trow .lx-ta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-trow .lx-dot { width: 6px; height: 6px; }
.lx-trow .lx-dot.lx-run { background: none; border: 1.5px solid var(--lx-line-2); border-top-color: var(--lx-accent); width: 8px; height: 8px; animation: lx-spin .9s linear infinite; }
.lx-trow.lx-mem .lx-tn { color: var(--lx-accent); }
@keyframes lx-spin { to { transform: rotate(360deg); } }
.lx-art { display: flex; align-items: center; gap: 8px; border: 1px solid var(--lx-line); border-radius: 4px; padding: 5px 5px 5px 9px; background: var(--lx-win); max-width: 300px; }
.lx-art .lx-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-art .lx-n small { color: var(--lx-ink3); font-family: var(--fam-mono); font-size: 9.5px; display: block; }
.lx-art .lx-sbtn { margin-left: auto; padding: 2px 9px; }
.lx-clar { border: 1px solid var(--lx-line); background: var(--lx-win); border-radius: 4px; padding: 8px 9px; display: flex; flex-direction: column; gap: 7px; }
.lx-clar .lx-q { font-weight: 600; }
.lx-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.lx-chip { font-size: 11px; border: 1px solid var(--lx-line-2); background: var(--lx-win-2); border-radius: 3px; padding: 3px 9px; cursor: pointer; color: var(--lx-ink); }
.lx-chip.lx-on { border-color: var(--lx-accent); background: var(--lx-accent); color: var(--lx-accent-ink); }
.lx-chip:hover:not(.lx-on) { border-color: var(--lx-ink3); }
.lx-foot { padding: 6px 8px; display: flex; gap: 6px; align-items: center; border-top: 1px solid var(--lx-line); }
.lx-foot .lx-ta { flex: 1; min-width: 0; border: 1px solid var(--lx-line); background: var(--lx-win); border-radius: 4px; padding: 5px 8px; color: var(--lx-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-foot .lx-mic { width: 26px; height: 26px; border: 1px solid var(--lx-line); border-radius: 3px; display: grid; place-items: center; color: var(--lx-ink2); background: var(--lx-win); flex: 0 0 26px; }
.lx-foot .lx-mic svg { width: 12px; height: 12px; }

/* focus: chat + canvas */
.lx-focusv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); grid-template-rows: minmax(0, 1fr); min-height: 0; }
.lx-focusv .lx-chat { border-right: 1px solid var(--lx-line); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
.lx-focusv .lx-chathead { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-bottom: 1px solid var(--lx-line); }
.lx-focusv .lx-chathead .lx-s { font-family: var(--fam-mono); font-size: 10px; color: var(--lx-ink3); }
.lx-composer { margin: 8px; border: 1px solid var(--lx-line); border-radius: 6px; background: var(--lx-win); padding: 7px 9px; color: var(--lx-ink3); display: grid; gap: 10px; }
.lx-composer .lx-tools { display: flex; justify-content: space-between; color: var(--lx-ink3); }
.lx-composer svg { width: 12px; height: 12px; }
.lx-canvas { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); padding: 8px; gap: 8px; }
.lx-tabs { display: inline-flex; border: 1px solid var(--lx-line); border-radius: 3px; overflow: hidden; font-family: var(--fam-mono); font-size: 10.5px; justify-self: start; }
.lx-tabs span { padding: 3px 9px; color: var(--lx-ink3); display: flex; gap: 5px; align-items: center; }
.lx-tabs span + span { border-left: 1px solid var(--lx-line); }
.lx-tabs span.lx-on { background: var(--lx-win-2); color: var(--lx-ink); }
.lx-tabs svg { width: 11px; height: 11px; }
.lx-frame { border: 1px solid var(--lx-line); border-radius: 6px; background: var(--lx-win-2); display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; overflow: hidden; }
.lx-frame .lx-chrome { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--lx-line); }
.lx-frame .lx-chrome i { width: 6px; height: 6px; border-radius: 50%; background: var(--lx-line-2); }
.lx-frame .lx-url { flex: 1; margin-left: 4px; border: 1px solid var(--lx-line); border-radius: 99px; padding: 1px 9px; font-family: var(--fam-mono); font-size: 10px; color: var(--lx-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-page { padding: 14px 16px; overflow: hidden; color: #171717; background: #fff; font-size: 11.5px; }
.lx-page h5 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.lx-page .lx-sub { color: #5a5a5a; margin-top: 3px; }
.lx-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.lx-kpis div { border: 1px solid #e0e0e0; border-radius: 4px; padding: 6px 8px; }
.lx-kpis small { display: block; color: #717171; font-size: 9.5px; font-family: var(--fam-mono); }
.lx-kpis b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.lx-kpis em { font-style: normal; color: #2f7a4a; font-size: 10px; margin-left: 3px; }
.lx-chart { margin-top: 12px; height: 92px; display: flex; align-items: flex-end; gap: 6px; border-bottom: 1px solid #e0e0e0; padding: 0 2px; }
.lx-chart b { flex: 1; background: #b9cde0; border-radius: 2px 2px 0 0; }
.lx-chart b.lx-hi { background: #1666aa; }
.lx-chartx { display: flex; gap: 6px; padding: 3px 2px 0; font-family: var(--fam-mono); font-size: 9px; color: #717171; }
.lx-chartx span { flex: 1; text-align: center; }
.lx-tbl { width: 100%; border-collapse: collapse; margin-top: 10px; font-variant-numeric: tabular-nums; }
.lx-tbl th { text-align: left; font-weight: 500; font-family: var(--fam-mono); font-size: 9.5px; color: #717171; border-bottom: 1px solid #e0e0e0; padding: 4px 6px; }
.lx-tbl td { border-bottom: 1px solid #eee; padding: 5px 6px; vertical-align: top; }
.lx-tag { font-family: var(--fam-mono); font-size: 9.5px; border-radius: 2px; padding: 0 5px; white-space: nowrap; }
.lx-tag.lx-ok { background: #e3efe6; color: #2f6b45; }
.lx-tag.lx-you { background: #f6ecd9; color: #7a5a1e; }
.lx-tag.lx-bad { background: #f6e1df; color: #8f3b33; }
.lx-brief li { padding: 6px 0; border-bottom: 1px solid #eee; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 8px; }
.lx-brief { list-style: none; margin: 10px 0 0; padding: 0; }
.lx-brief span { font-family: var(--fam-mono); font-size: 10px; color: #717171; }

/* settings · connections */
.lx-tabsline { display: flex; gap: 14px; padding: 0 14px; border-bottom: 1px solid var(--lx-line); font-size: 11.5px; color: var(--lx-ink2); }
.lx-tabsline span { padding: 7px 0; }
.lx-tabsline span.lx-on { color: var(--lx-ink); box-shadow: inset 0 -2px 0 var(--lx-ink); }
.lx-panel { border: 1px solid var(--lx-line); border-radius: 6px; background: var(--lx-win); overflow: hidden; min-height: 0; }
.lx-panel header { padding: 6px 10px; background: var(--lx-win-2); border-bottom: 1px solid var(--lx-line); display: flex; align-items: center; gap: 8px; }
.lx-panel header h4 { margin: 0; font-size: 11.5px; font-weight: 600; }
.lx-badge { margin-left: auto; font-family: var(--fam-mono); font-size: 9.5px; border: 1px solid var(--lx-line); border-radius: 1px; padding: 0 5px; color: var(--lx-ink2); background: var(--lx-win-2); white-space: nowrap; }
.lx-badge.lx-ok { color: var(--lx-ok); border-color: color-mix(in srgb, var(--lx-ok) 35%, transparent); background: var(--lx-ok-soft); }
.lx-row { display: flex; align-items: center; gap: 9px; padding: 6px 10px; border-bottom: 1px solid var(--lx-line); min-width: 0; transition: background .4s; }
.lx-row:last-child { border-bottom: 0; }
.lx-row.lx-flash { background: var(--lx-ok-soft); }
.lx-row .lx-ic { width: 18px; height: 18px; border-radius: 4px; display: grid; place-items: center; font-size: 9px; font-weight: 600; color: #fff; flex: 0 0 18px; }
.lx-row .lx-main { min-width: 0; }
.lx-row .lx-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-row .lx-sub2 { color: var(--lx-ink3); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-row .lx-act { margin-left: auto; flex-shrink: 0; }
.lx-panels { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow: hidden; }
.lx-knows { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.lx-knows li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 7px; align-items: start; animation: lx-enter .45s var(--lx-ease) both; }
@keyframes lx-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.lx-knows .lx-sq { width: 14px; height: 14px; border-radius: 3px; display: grid; place-items: center; font-size: 8px; font-weight: 600; color: #fff; margin-top: 2px; }
.lx-empty { color: var(--lx-ink3); }


/* connections: the settings column keeps its width; the agent answers in the dock (#pip) */
.lx-cx { position: relative; height: 100%; min-height: 0; }
.lx-cx .lx-panels { width: 54%; height: 100%; gap: 8px; }
.lx-cx .lx-panel header { padding: 6px 12px !important; }
.lx-cx .lx-row { padding: 5px 12px; gap: 10px; }
.lx-cx .lx-panel { flex-shrink: 0; }
.lx-cx .lx-row .lx-sub2 { display: inline; font-size: 11px; }
.lx-cx .lx-panel header { padding: 8px 12px; }
.lx-tile.lx-pip { position: absolute; right: 0; top: 0; bottom: 0; width: 43%; box-shadow: 0 12px 32px -12px rgb(20 30 45 / .28); }

/* crons ledger */
.lx-ledger .lx-row { display: grid; grid-template-columns: 7px minmax(0, 1fr) auto; gap: 3px 10px; padding: 8px 12px; }
.lx-ledger .lx-row .lx-title { font-family: var(--fam-mono); font-weight: 500; }
.lx-ledger .lx-row .lx-when { font-family: var(--fam-mono); font-size: 10.5px; color: var(--lx-ink2); text-align: right; }
.lx-ledger .lx-row .lx-sub2 { grid-column: 2 / -1; white-space: normal; }
.lx-ledger .lx-row.lx-new { background: var(--lx-accent-soft); }
.lx-ledger .lx-dot { align-self: center; }
.lx-done { color: var(--lx-ok); }


@media (max-width: 920px) {
  .lx-stage::before { inset: -16px -12px; }
  .lx-win { height: 460px; }
}
@media (max-width: 600px) {
  .lx-body.lx-two { grid-template-columns: minmax(0, 1fr); }
  .lx-body.lx-two > :first-child { display: none; }
  .lx-focusv { grid-template-columns: minmax(0, 1fr); }
  .lx-cx .lx-panels { width: 100%; }
  .lx-tile.lx-pip { display: none; }
  .lx-focusv .lx-canvas { display: none; }
  .lx-bar .lx-search { display: none; }
  .lx-win { grid-template-columns: minmax(0, 1fr); height: 440px; }
  .lx-rail { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lx-stage, .lx-stage *, .lx-stage *::before, .lx-stage *::after { animation: none !important; transition: none !important; }
}