/* ════════════════════════════════════════════════════════════════════════════
   xplore · the films of Xplore (engine styles; a film's own screens live in films/<id>.css)
   1. the page around the film (deck art direction: type and hairlines, no boxes)
   2. the stage: a fixed 1280×720 frame, scaled to its container
   3. the Xplore app, as it looks today — its colours and sizes mirror the
      client's own, prefixed --x- so they never meet the deck's
   4. film devices: cursor, link splash, export sheet, conclusion
   ════════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────── 1. the page */
/* The deck kit's variables and its top bar, written here rather than linked: the
   film carries an app inside it, and the kit's generic selectors (section, p,
   .hero…) would reach into that app. */
:root {
  --bg:#faf9f7; --ink:#15151a; --ink-soft:#3b3b44; --muted:#6c6c78;
  --line:rgba(20,20,30,0.08); --line-strong:rgba(20,20,30,0.14); --card:#ffffff; --magenta:#d6225f;
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:"Hanken Grotesk", system-ui, -apple-system, sans-serif;
}
* { box-sizing:border-box; }
body { margin:0; font-family:var(--sans); color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.6; }
::selection { background:#15151a; color:#fff; }
h1, h2, h3 { text-wrap:balance; }
.topbar { position:sticky; top:0; z-index:80; backdrop-filter:saturate(140%) blur(10px); background:rgba(250,249,247,0.85); border-bottom:1px solid var(--line); }
.topbar__inner { max-width:1520px; margin:0 auto; padding:12px 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:flex; align-items:center; gap:10px; margin:0; font-size:1rem; line-height:1.6; font-weight:800; letter-spacing:-0.01em; white-space:nowrap; color:var(--ink); }
.langtoggle { display:flex; border:1px solid var(--line-strong); border-radius:999px; overflow:hidden; flex:none; }
.lang-btn { font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:0.04em; padding:6px 13px; background:transparent; border:none; color:var(--muted); cursor:pointer; }
.lang-btn.active { background:var(--ink); color:#fff; }

.brand b { font-weight:500; color:var(--ink-soft); }
.lang-btn:focus-visible, .pp:focus-visible, .seg:focus-visible, .bigplay:focus-visible, .titem:focus-visible {
  outline:2px solid var(--ink); outline-offset:3px; }

.filmpage { max-width:1520px; margin:0 auto; padding:26px 24px 64px; }
.hub { display:grid; grid-template-columns:minmax(0,1fr) 292px; gap:36px; align-items:start; }
.fp-film { min-width:0; }
.fp-note { font-size:13px; line-height:1.5; color:var(--muted); max-width:70ch; margin:22px 0 0; }

/* the sommaire: the tour leads; under it, quieter, the history release by release */
.toc { padding-top:2px; }
.titem { appearance:none; display:grid; grid-template-columns:18px 1fr; column-gap:6px; width:100%; margin:0; padding:0; text-align:left; cursor:pointer;
  background:none; border:none; font:inherit; color:var(--ink-soft); }
.titem .ic { grid-row:1 / span 2; width:11px; height:11px; margin-top:6px; fill:currentColor; stroke:currentColor; opacity:0; transition:opacity .15s ease; }
.titem .t { font-size:17px; font-weight:700; line-height:1.3; letter-spacing:-0.012em; color:var(--ink); transition:color .15s ease; }
.titem .m { font-size:13px; line-height:1.4; color:var(--muted); margin-top:3px; }
.titem:hover .ic { opacity:.35; }
.titem.on .ic { opacity:1; }
.trel { margin-top:34px; padding-top:16px; border-top:1px solid var(--line-strong); }
.trel h2 { margin:0 0 6px; font-size:12.5px; font-weight:600; letter-spacing:0; color:var(--muted); }
.trel .titem { padding:8px 0; }
.trel .titem .ic { width:9px; height:9px; margin-top:5px; }
.trel .titem .t { font-size:14px; font-weight:500; letter-spacing:0; color:var(--ink-soft); }
.trel .titem .m { font-size:12px; margin-top:1px; }
.trel .titem:hover .t { color:var(--ink); }
.trel .titem.on .t { color:var(--ink); font-weight:700; }
@media (max-width:1020px){
  .hub { grid-template-columns:minmax(0,1fr); gap:28px; }
  .trel { margin-top:24px; }
}

/* transport: one button, then the chapters as a ruled line of names */
.transport { display:flex; align-items:flex-start; gap:18px; margin-top:16px; }
.pp { flex:none; width:40px; height:40px; margin-top:2px; border-radius:50%; border:1px solid var(--line-strong); background:var(--card);
  color:var(--ink); display:grid; place-items:center; cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease; }
.pp:hover { background:var(--ink); color:#fff; border-color:var(--ink); }
.pp .ic { width:15px; height:15px; fill:currentColor; stroke:currentColor; }
.rail { flex:1; min-width:0; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:10px; }
.seg { appearance:none; background:none; border:none; padding:0; margin:0; text-align:left; cursor:pointer; font:inherit; color:var(--muted);
  display:block; min-width:0; }
.seg .trk { display:block; height:3px; background:var(--line-strong); position:relative; overflow:hidden; }
.seg .trk i { position:absolute; left:0; top:0; bottom:0; width:0; background:var(--ink); }
.seg .nm { display:block; margin-top:9px; font-size:13px; line-height:1.3; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color .15s ease; }
.seg:hover .nm { color:var(--ink); }
.seg.on .nm { color:var(--ink); font-weight:700; }
@media (max-width:760px){
  .filmpage { padding:18px 16px 56px; }
  .rail { gap:6px; } .seg .nm { display:none; } .seg.on .nm { display:block; white-space:normal; }
  .rail { grid-auto-flow:row; grid-template-columns:repeat(6,1fr); } .seg.on .nm { grid-column:1 / -1; }
}

/* page variants */
body.embed .pagechrome, body.bare .pagechrome { display:none; }
body.embed, body.bare { background:#f4f1ec; }
body.embed .hub, body.bare .hub { display:block; }
body.embed .filmpage { padding:0 0 14px; max-width:none; }
body.embed .transport { padding:0 14px; }
body.bare { margin:0; overflow:hidden; }
body.bare .filmpage { padding:0; max-width:none; }
body.bare .transport { display:none; }
body.bare .stage { border-radius:0; border:none; }
/* On the page, the app floats on the page itself: the stage has no ground, no edge and no
   corner of its own, and the caption reads as a subtitle under the window. The player alone
   (embed, bare, poster, still) keeps its frame, as the posters and stills show it. */
body.hub-page:not(.embed):not(.bare) .stage { background:transparent; border-color:transparent; border-radius:0; }

/* ──────────────────────────────────────────────────────────── 2. the stage */
.fit { position:relative; width:100%; aspect-ratio:16 / 9; }
.stage { position:absolute; left:0; top:0; width:1280px; height:720px; transform-origin:0 0; transform:scale(var(--k,1));
  background:#f4f1ec; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.stage.instant, .stage.instant * { transition:none !important; animation:none !important; }

/* the caption: Xplore speaks, under its own window */
.capline { position:absolute; left:28px; right:28px; top:646px; height:62px; display:flex; align-items:center; gap:16px; }
.capline svg { width:26px; height:26px; flex:none; }
.capline p { margin:0; max-width:none; font-family:var(--sans); font-size:21px; line-height:1.3; font-weight:500; letter-spacing:-0.012em; color:#15151a;
  text-wrap:balance; }
.capline p b { font-weight:700; }
.capline.off svg { opacity:0; }
.capline svg { transition:opacity .3s ease; }

.bigplay { position:absolute; left:50%; top:327px; transform:translate(-50%,-50%); z-index:60; display:none; align-items:center; gap:12px;
  font-family:var(--sans); font-size:17px; font-weight:700; letter-spacing:-0.01em; color:#fff; background:#15151a; border:none; border-radius:999px;
  padding:16px 26px 16px 22px; cursor:pointer; box-shadow:0 18px 40px -18px rgba(21,21,26,0.6), 0 2px 4px rgba(21,21,26,0.2); }
.bigplay .ic { width:16px; height:16px; fill:currentColor; stroke:currentColor; }
.stage.idle .bigplay, .stage.poster .bigplay { display:inline-flex; }
/* on a poster the mark sits on the message box (film.js, placeBigplay): it hides no figure,
   no country and no legend */
.stage.poster .bigplay { left:var(--bp-x, 50%); top:var(--bp-y, 327px); }
.still { animation:none !important; }
.stage.idle .appframe { filter:saturate(0.92); }
.stage.idle .appframe::after { content:""; position:absolute; inset:0; background:rgba(244,241,236,0.42); z-index:50; }

/* ────────────────────────────────────────────────────────── 3. the Xplore app */
/* The app as it looks today: DM Sans for the interface, Poppins for the word "Xplore" only,
   IBM Plex Mono for figures and identifiers, no weight above 600, no capitals set by CSS.
   The variables mirror the client's own (index.css, the DS), prefixed --x- so they never meet
   the deck's. Sizes are the app's, in CSS pixels: the window is the app at 1240×626. */
.appframe {
  --x-bg:#f9fafb; --x-surface:#ffffff; --x-s2:#f3f4f6; --x-s3:#e5e7eb; --x-border:#e5e7eb; --x-border-strong:#d1d5db;
  --x-text:#111827; --x-read:#1f2937; --x-n700:#374151; --x-n600:#4b5563; --x-muted:#6b7280; --x-muted2:#9ca3af;
  --x-brand:#e11d64; --x-brand-strong:#be1255; --x-brand-soft:#ffe4ea; --x-brand-50:#fff1f4; --x-brand-200:#fecdda; --x-brand-800:#9f124d;
  --x-indigo:#5864ed; --x-indigo-300:#a7bafa;
  --x-err:#dc2626; --x-ok:#16a34a; --x-warn-50:#fffbeb; --x-warn-100:#fef3c7; --x-warn-200:#fde68a; --x-warn-600:#d97706; --x-warn-700:#b45309; --x-warn-800:#92400e;
  --x-neg-50:#fef2f2; --x-neg-700:#b91c1c;
  --x-sans:"DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --x-brandface:"Poppins", "DM Sans", sans-serif;
  --x-mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  --x-shadow:0 1px 2px rgba(17,24,39,0.05), 0 8px 24px -12px rgba(17,24,39,0.12);
  --x-shadow-lg:0 24px 60px -28px rgba(17,24,39,0.22);
  --x-shadow-md:0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --x-shadow-xs:0 1px 2px 0 rgba(0,0,0,0.05);
  --x-ease:cubic-bezier(0.2,0,0,1); --x-out:cubic-bezier(0.16,1,0.3,1);
  --x-maxw:960px;
  position:absolute; left:20px; top:14px; width:1240px; height:626px; isolation:isolate; contain:paint;
  font-family:var(--x-sans); font-optical-sizing:auto; font-size:14px; line-height:1.45; color:var(--x-text);
  background:var(--x-bg); border:1px solid rgba(20,20,30,0.14); border-radius:12px; overflow:hidden;
  box-shadow:0 1px 2px rgba(20,20,30,0.05), 0 26px 50px -30px rgba(20,20,30,0.42);
}
.appframe p { max-width:none; }
.appframe b, .appframe strong { font-weight:600; }
.app { display:flex; height:100%; }
.ic { width:16px; height:16px; flex:none; display:block; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* the pink rail. Folded (the app's default): 52px, a 36px square per control, 20px icons,
   each page's word in a tooltip. Expanded: 224px, one 36px row per page. */
.side { width:224px; flex:none; background:var(--x-brand); color:#fff; display:flex; flex-direction:column; overflow:hidden; padding:12px;
  transition:width .24s var(--x-ease), padding .24s var(--x-ease); position:relative; }
.side-brand { display:flex; align-items:center; height:32px; flex:none; margin-bottom:16px; }
.side-brand .wm { display:flex; align-items:center; gap:8px; min-width:0; padding-left:4px; white-space:nowrap; }
.side-brand .wm svg { width:26px; height:26px; flex:none; }
.side-brand .wm b { font-family:var(--x-brandface); font-size:16px; line-height:22px; font-weight:600; letter-spacing:-0.01em; }
.side-toggle { margin-left:auto; width:32px; height:32px; border-radius:8px; display:grid; place-items:center; flex:none; color:#fff; transition:background .12s ease; }
.side-toggle.hover { background:var(--x-brand-strong); }
.side-toggle .ic { width:18px; height:18px; }
.side-toggle .tmark { display:none; width:26px; height:26px; }
.side-new { display:flex; align-items:center; justify-content:center; gap:8px; height:36px; flex:none; border-radius:8px; background:#fff; color:var(--x-brand);
  box-shadow:var(--x-shadow); font-size:14px; font-weight:500; white-space:nowrap; transition:background .12s ease, color .12s ease; }
.side-new .ic { width:18px; height:18px; }
.side-new.hover { background:var(--x-brand-50); color:var(--x-brand-strong); }
.side-sep { flex:none; height:2px; margin:8px 8px; border-radius:1px; background:rgba(255,255,255,0.3); }
.side-sep.top { visibility:hidden; }
.side-grp { margin:16px 0 4px; padding:0 12px; font-size:11px; line-height:16px; font-weight:500; color:#fff; white-space:nowrap; flex:none; }
.side-nav { display:flex; align-items:center; gap:8px; height:36px; margin:0 0 4px; padding:0 12px; border-radius:8px; font-size:14px; line-height:20px; font-weight:500;
  white-space:nowrap; flex:none; transition:background .12s ease, color .12s ease; }
.side-nav .ic { width:18px; height:18px; }
.side-nav.hover { background:var(--x-brand-strong); }
.side-nav.on, .side-nav.on.hover { background:#fff; color:var(--x-brand); }
.side-adm { margin-top:auto; display:none; flex-direction:column; }
.side.admin .side-adm { display:flex; }
.side-adm .side-sep { display:none; }
.side-foot { margin-top:auto; display:flex; align-items:center; gap:4px; height:48px; padding:0 4px; flex:none; border-top:1px solid rgba(255,255,255,0.3); padding-top:0; }
.side.admin .side-foot { margin-top:12px; }
.side-foot .av { position:relative; width:32px; height:32px; flex:none; margin-right:4px; border-radius:50%; background:#fff; color:var(--x-brand-strong); display:grid; place-items:center;
  font-size:11px; font-weight:600; line-height:1; }
.side-foot .av i { position:absolute; right:-1px; bottom:-1px; width:10px; height:10px; border-radius:50%; background:var(--x-ok); border:2px solid var(--x-brand); }
.side-foot .who { flex:1; min-width:0; display:flex; flex-direction:column; }
.side-foot .who b { font-size:13px; line-height:18px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.side-foot .who span { font-size:12px; line-height:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.side-foot .more { width:14px; height:14px; }
.side .lbl, .side .wm, .side .side-grp, .side .who, .side .more { transition:opacity .18s ease; }

/* folded: the same rail as a column of icons */
.side.folded { width:52px; padding:12px 8px 8px; }
.side.folded .wm, .side.folded .lbl, .side.folded .side-grp, .side.folded .who, .side.folded .more { opacity:0; width:0; flex:0 0 0; overflow:hidden; margin:0; padding:0; }
.side.folded .side-brand { height:36px; margin-bottom:12px; justify-content:center; }
.side.folded .side-toggle { margin:0; width:36px; height:36px; }
.side.folded .side-toggle .tmark { display:block; }
.side.folded .side-toggle .ic { display:none; width:20px; height:20px; }
.side.folded .side-toggle.hover .tmark { display:none; }
.side.folded .side-toggle.hover .ic { display:block; }
.side.folded .side-new { width:36px; border-radius:999px; gap:0; }
.side.folded .side-new .ic, .side.folded .side-nav .ic { width:20px; height:20px; }
.side.folded .side-sep.top { visibility:visible; }
.side.folded .side-nav { width:36px; padding:0; gap:0; justify-content:center; }
.side.folded .side-adm .side-sep { display:block; }
.side.folded .side-grp { height:0; margin:0; }
.side.folded .side-foot { height:36px; padding:0; gap:0; justify-content:center; border-top-color:transparent; margin-top:auto; }
.side.folded.admin .side-foot { margin-top:12px; }
.side.folded .side-foot .av { margin:0; }

/* the word of a folded rail's control, in the DS tooltip, to its right */
.railtip { position:absolute; z-index:29; left:0; top:0; padding:6px 10px; border-radius:8px; background:#1f2937; color:#fff; font-size:12px; line-height:16px; font-weight:500;
  white-space:nowrap; pointer-events:none; opacity:0; transform:translateX(-3px); transition:opacity .12s ease, transform .12s ease; }
.railtip::before { content:""; position:absolute; left:-4px; top:50%; width:8px; height:8px; margin-top:-4px; background:#1f2937; transform:rotate(45deg); border-radius:1px; }
.railtip.on { opacity:1; transform:none; }

/* the conversations panel: 248px, a title search and the button that hides it, the tabs,
   the list. Hidden, it leaves its width to the canvas and a button brings it back. */
.hist { width:248px; flex:none; background:#fff; border-right:1px solid var(--x-border); min-height:0; overflow:hidden; }
.hist-in { width:247px; height:100%; display:flex; flex-direction:column; }
.app.histhidden .hist { width:0; border-right-width:0; }
.app.histanim .hist { transition:width .24s var(--x-ease), border-width .24s step-end; }
.hist-head { display:flex; align-items:center; gap:8px; padding:12px 12px 8px; flex:none; }
.hsearch { flex:1; min-width:0; display:flex; align-items:center; gap:8px; height:32px; padding:0 10px 0 12px; border:1px solid var(--x-border); border-radius:8px; background:#fff;
  box-shadow:var(--x-shadow-xs); font-size:13px; white-space:nowrap; overflow:hidden; transition:border-color .12s ease; }
.hsearch .ph { color:var(--x-muted); }
.hsearch .typed { color:var(--x-text); }
.hsearch .ph, .hsearch .typed { flex:none; }
.hsearch .ic { margin-left:auto; width:16px; height:16px; color:var(--x-muted); }
.hsearch.has-text .ph { display:none; }
.hsearch.focus { border-color:var(--x-brand); }
.hsearch.focus .typed::after { content:""; display:inline-block; width:1.5px; height:1.05em; margin-left:1px; vertical-align:-2px; background:var(--x-text); animation:x-caret 1s steps(1) infinite; }
.hist-hide { width:32px; height:32px; flex:none; border-radius:8px; display:grid; place-items:center; color:var(--x-muted); transition:background .12s ease, color .12s ease; }
.hist-hide.hover { color:var(--x-brand); background:var(--x-brand-soft); }
.hist-hide .ic { width:16px; height:16px; }
.hist-tabs { display:grid; grid-template-columns:1fr 1fr; gap:2px; margin:2px 12px 8px; padding:2px; border-radius:10px; background:var(--x-s2); flex:none; }
.hist-tabs .tab { display:flex; align-items:center; justify-content:center; gap:8px; height:24px; border-radius:8px; font-size:12px; font-weight:500; color:var(--x-n600);
  transition:background .2s ease, color .2s ease; }
.hist-tabs .tab.on { background:#fff; color:var(--x-brand); box-shadow:var(--x-shadow-xs), 0 1px 3px rgba(0,0,0,0.06); }
.hist-tabs .tab i, .ccount { font-style:normal; font-size:10px; line-height:16px; font-weight:500; color:var(--x-brand-strong); background:var(--x-brand-soft); border-radius:999px; padding:0 8px; }
.hist-list { flex:1; min-height:0; overflow:hidden; padding:6px 12px 4px; }
.hgrp { display:flex; align-items:center; gap:8px; padding:16px 8px 4px; font-size:11px; line-height:16px; font-weight:600; color:var(--x-muted); white-space:nowrap; }
.hgrp .ic { width:11px; height:11px; }
.hrow { position:relative; display:flex; align-items:center; min-height:28px; margin-bottom:2px; padding:4px 12px; border-radius:8px; font-size:13px; line-height:20px; font-weight:500;
  color:var(--x-text); --row-bg:#fff; background:var(--row-bg); transition:background .12s ease, color .12s ease; }
.hrow > span:first-child { flex:1; min-width:0; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; overflow-wrap:anywhere; }
/* one « … » per row, over the end of the title's first line, on a fade of the row's colour */
.hrow .hmore { position:absolute; top:2px; right:2px; width:24px; height:24px; border-radius:6px; display:grid; place-items:center; color:var(--x-muted); background:var(--row-bg);
  opacity:0; transition:opacity .12s ease; }
.hrow .hmore::before { content:""; position:absolute; top:0; bottom:0; right:100%; width:12px; background:linear-gradient(to right, transparent, var(--row-bg)); }
.hrow .hmore .ic { width:16px; height:16px; }
.hrow.hover { --row-bg:var(--x-s2); }
.hrow.on, .hrow.on.hover { --row-bg:var(--x-brand-soft); color:var(--x-brand-strong); }
.hrow.on .hmore { color:var(--x-brand-strong); }
.hrow.hover .hmore { opacity:1; }
.hrow.new { animation:x-rowin .4s var(--x-out) backwards; }
@keyframes x-rowin { from { opacity:0; transform:translateY(-6px); } }
.hist-all { flex:none; margin:8px 8px 6px; padding:8px 12px; border-top:1px solid var(--x-border); font-size:12px; font-weight:500; color:var(--x-muted); transition:color .12s ease, background .12s ease; }
.hist-all.hover { color:var(--x-text); background:var(--x-s2); border-radius:0 0 8px 8px; }

/* a conversation's row menu (Rename, Delete) */
.rowmenu { position:absolute; z-index:28; width:180px; background:#fff; border:1px solid var(--x-border); border-radius:8px; padding:4px; box-shadow:var(--x-shadow-md);
  opacity:0; transform:translateY(-4px); transition:opacity .14s ease, transform .2s var(--x-out); }
.rowmenu.on { opacity:1; transform:none; }

/* the working column */
.maincol { flex:1; min-width:0; display:flex; flex-direction:column; background:var(--x-bg); position:relative; }
.chat-topbar { flex:none; display:flex; align-items:center; justify-content:flex-end; gap:8px; height:40px; padding:8px 16px 0; position:relative; z-index:3; }
.org-chip { display:inline-flex; align-items:center; gap:8px; height:28px; padding:0 8px 0 12px; border-radius:999px; font-size:12px; font-weight:500; color:var(--x-n700);
  background:var(--x-s2); border:1px solid var(--x-border); white-space:nowrap; }
.org-chip .ic { width:14px; height:14px; color:var(--x-n600); }
.tb-btn { display:none; align-items:center; gap:6px; height:32px; padding:0 12px; border-radius:8px; background:#fff; border:1px solid var(--x-border);
  box-shadow:var(--x-shadow-xs); font-size:12px; font-weight:500; color:var(--x-text); transition:background .12s ease; }
.tb-btn .ic { width:14px; height:14px; }
.tb-btn.icon { width:32px; padding:0; justify-content:center; }
.tb-btn.icon .ic { width:16px; height:16px; }
.tb-btn.hover { background:var(--x-s2); }
.maincol.saved .tb-btn { display:inline-flex; }
.hist-show { position:absolute; z-index:4; top:6px; left:16px; width:32px; height:32px; border-radius:8px; display:none; place-items:center; color:var(--x-muted);
  transition:background .12s ease, color .12s ease; }
.hist-show .ic { width:16px; height:16px; }
.hist-show.hover { color:var(--x-brand); background:var(--x-brand-soft); }
.app.histhidden .hist-show { display:grid; }
.viewport { flex:1; min-height:0; position:relative; overflow:hidden; }
.view { position:absolute; inset:0; overflow:hidden; opacity:1; transition:opacity .3s ease; }
/* one view gives way to the next without the two being read on top of each other: the old one
   fades fast, the new one comes in as it goes */
.view.out { opacity:0; transition-duration:.16s; }
.view.in { animation:x-viewin .4s var(--x-ease) .08s backwards; }
@keyframes x-viewin { from { opacity:0; transform:translateY(6px); } }
/* a page (Team, all conversations) keeps the organization at the top right, nothing else */
.maincol.page .chat-topbar .tb-btn { display:none; }
.app.nohist .hist { display:none; }

/* welcome */
.welcome { height:100%; display:flex; align-items:center; justify-content:center; padding:0 24px 40px; }
.welcome-in { width:100%; max-width:720px; text-align:center; }
.welcome .eyebrow { font-size:11px; line-height:16px; font-weight:600; color:var(--x-brand); }
.welcome h1 { font-size:34px; font-weight:500; letter-spacing:-0.02em; line-height:1.12; margin:12px 0 24px; color:var(--x-text); }
.chips { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:16px; }
.chip { display:inline-flex; align-items:center; gap:8px; padding:8px 16px; background:#fff; border:1px solid var(--x-border); border-radius:999px;
  font-size:13px; line-height:19px; font-weight:500; color:var(--x-text); white-space:nowrap; transition:border-color .12s ease, color .12s ease, background .12s ease; }
.chip .ic { width:15px; height:15px; color:var(--x-muted); }
.chip.hover { border-color:var(--x-brand); background:var(--x-s2); color:var(--x-brand); }
.chip.hover .ic { color:var(--x-brand); }

/* composer (the same box in the welcome and at the foot of a conversation): the one surface
   with both a hairline and a soft shadow */
.cbox { background:#fff; border:1px solid var(--x-border); border-radius:16px; padding:8px 12px 8px 16px; text-align:left; box-shadow:var(--x-shadow);
  transition:border-color .12s ease; }
.cbox.focus { border-color:var(--x-muted2); }
.cfield { min-height:22px; padding:8px 4px 4px; font-size:15px; line-height:1.5; }
.cfield .ph { color:var(--x-muted); }
.cfield .typed { color:var(--x-text); overflow-wrap:anywhere; }
.cbox.has-text .ph { display:none; }
.cbox.focus .typed::after { content:""; display:inline-block; width:1.5px; height:1.05em; margin-left:1px; vertical-align:-2px; background:var(--x-text); animation:x-caret 1s steps(1) infinite; }
@keyframes x-caret { 50% { opacity:0; } }
.ctools { display:flex; align-items:center; justify-content:space-between; padding-top:2px; }
.ctools .clip { width:34px; height:34px; border-radius:8px; display:grid; place-items:center; color:var(--x-muted); }
.ctools .clip .ic { width:15px; height:15px; }
.send { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--x-s2); color:var(--x-muted2); transition:background .12s ease, color .12s ease; }
.cbox.has-text .send { background:linear-gradient(135deg, var(--x-brand), var(--x-indigo)); color:#fff; }
.send .ic { width:18px; height:18px; }
/* the foot of a conversation: no rule and no band, the chat fades into the ground above it */
.composer-zone { flex:none; position:relative; background:var(--x-bg); display:none; }
.composer-zone::before { content:""; position:absolute; left:0; right:0; top:-24px; height:24px; background:linear-gradient(to bottom, rgba(249,250,251,0), var(--x-bg)); pointer-events:none; }
.maincol.chatting .composer-zone { display:block; }
.composer { max-width:var(--x-maxw); margin:0 auto; padding:12px 24px 10px; }
.composer-meta { display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:8px; min-height:20px; }
.composer-meta:empty { display:none; }
/* a long conversation: the app's line and its « Compact », no gauge and no figure (gauge() in film.js) */
.conv-long { display:inline-flex; align-items:center; font-size:11px; color:var(--x-n600); animation:x-fade .4s ease backwards; }
.conv-long .ctx-action { margin-left:8px; font-weight:600; text-decoration:underline; color:inherit; border-radius:4px; transition:color .12s ease; }
.conv-long .ctx-action.hover { color:var(--x-brand-strong); }
.disclaimer { margin:8px 0 0; text-align:center; font-size:11px; line-height:1.4; color:var(--x-muted); }
@keyframes x-fade { from { opacity:0; } }

/* conversation */
.scroll { height:100%; overflow:hidden; scroll-behavior:smooth; }
.stage.instant .scroll { scroll-behavior:auto; }
.chatwrap { max-width:var(--x-maxw); margin:0 auto; padding:16px 24px 12px; }
.turn { margin-bottom:32px; }
.turn.in { animation:x-fade .24s ease backwards; }
.role { font-size:12px; line-height:18px; font-weight:500; color:var(--x-text); margin-bottom:12px; }
.role .ts { margin-left:8px; font-weight:400; color:var(--x-muted); }
.role .ts::before { content:"·"; margin-right:8px; }
.role.you { text-align:right; }
.you-wrap { text-align:right; }
.bubble { display:inline-block; max-width:82%; text-align:left; background:var(--x-brand-50); color:var(--x-text); border:1px solid var(--x-brand-200); padding:12px 16px;
  border-radius:16px 16px 4px 16px; font-size:15px; line-height:1.5; overflow-wrap:anywhere; }
.you-acts { display:flex; justify-content:flex-end; gap:4px; margin-top:8px; color:var(--x-muted); }
.you-acts .ic { width:28px; height:28px; padding:6px; }
.agent-body { font-size:14px; line-height:1.6; color:var(--x-text); }
.agent-body > p, .agent-body > ul, .agent-body > ol { font-size:16px; line-height:1.65; margin:0 0 12px; }
.agent-body > ul, .agent-body > ol { padding-left:1.35em; }
.agent-body li { margin:4px 0; }
.agent-body > h3 { font-size:18px; line-height:1.3; font-weight:600; margin:32px 0 8px; }
.agent-body p b { font-weight:600; }
.agent-acts { display:flex; align-items:center; gap:8px; margin-top:8px; color:var(--x-muted); font-size:12px; font-weight:500; animation:x-fade .3s ease backwards; }
.agent-acts span { display:inline-flex; align-items:center; gap:8px; padding:4px 8px; }
.agent-acts > .ic { width:30px; height:22px; padding:4px 8px; }
.agent-acts.cut { opacity:0; animation:none; }   /* it would show cut in half: it stays out */
.agent-acts span .ic { width:14px; height:14px; }
.caret { display:inline-block; width:2.5px; height:1.05em; margin-left:2px; vertical-align:-0.15em; background:var(--x-brand); border-radius:4px; transform-origin:50% 85%;
  animation:x-caret-pulse 1.5s cubic-bezier(0.4,0,0.2,1) infinite; }
@keyframes x-caret-pulse { 0%, 100% { opacity:1; transform:scaleY(1); } 50% { opacity:.28; transform:scaleY(.72); } }

/* the trace: what Xplore did, in sentences, with the scope it read as chips */
.steps { margin:0 0 16px; border:1px solid var(--x-border); border-radius:12px; background:transparent; overflow:hidden; }
.steps-head { display:flex; align-items:center; gap:8px; padding:8px 12px; font-size:12px; line-height:18px; font-weight:500; color:var(--x-muted); }
.steps-head .ic { width:14px; height:14px; color:var(--x-muted); transition:transform .24s var(--x-ease); }
.steps.open .steps-head .ic { transform:rotate(90deg); }
.steps-head .count { margin-left:auto; font-size:12px; color:var(--x-muted); font-variant-numeric:tabular-nums; }
.steps-body { padding:0 12px; max-height:0; overflow:hidden; transition:max-height .34s var(--x-out), padding .34s var(--x-out); }
.steps.open .steps-body { max-height:420px; padding:2px 12px 12px; }
.step { display:flex; align-items:flex-start; gap:12px; padding:8px 0 8px 4px; position:relative; animation:x-fade .25s ease backwards; }
.step::before { content:""; position:absolute; left:13px; top:-6px; height:23px; width:1px; background:var(--x-border-strong); }
.step:first-child::before { display:none; }
.step:not(:last-child)::after { content:""; position:absolute; left:13px; top:17px; bottom:0; width:1px; background:var(--x-border-strong); }
.step .sdot { position:relative; z-index:1; width:18px; height:18px; flex:none; margin-top:1px; border-radius:50%; display:grid; place-items:center; background:#fff;
  border:1px solid var(--x-border-strong); color:#fff; }
.step .sdot .ic { width:11px; height:11px; stroke-width:3; display:none; }
.step .sdot .spin { width:12px; height:12px; display:block; color:var(--x-brand); animation:x-rot 1s linear infinite; }
.step .sdot .spin .ic { display:block; width:12px; height:12px; stroke-width:2; }
.step .sdot .spin:empty { border:2px solid var(--x-border-strong); border-top-color:var(--x-brand); border-radius:50%; width:10px; height:10px; }
.step.done .sdot { background:var(--x-brand); border-color:var(--x-brand); }
.step.done .sdot > .ic { display:block; } .step.done .sdot .spin { display:none; }
.step-main { flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; }
.step .sname { font-size:13px; line-height:20px; font-weight:500; color:var(--x-text); }
.step .stag { margin-left:auto; font-family:var(--x-mono); font-size:11px; line-height:20px; color:var(--x-muted); }
.pchip { max-width:100%; font-size:11px; line-height:16px; font-weight:500; color:var(--x-muted); background:#fff; border:1px solid var(--x-border); border-radius:999px;
  padding:1px 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:border-color .12s ease, background .12s ease; }
.pchip.link { color:var(--x-brand); border-color:var(--x-brand-200); }
.pchip.link .arr { margin-left:4px; }
.pchip.link.hover { border-color:var(--x-brand); }
@keyframes x-rot { to { transform:rotate(360deg); } }
/* while the answer is being prepared: the step in progress, in italics, and three dots */
.thinking { display:flex; align-items:center; gap:4px; color:var(--x-muted); font-size:14px; margin:0 0 12px; animation:x-fade .24s ease backwards; }
.thinking-note { font-size:12px; font-style:italic; color:var(--x-muted); margin-right:4px; }
.thinking .d { width:6px; height:6px; border-radius:999px; background:var(--x-muted2); animation:x-bob 1.1s infinite; }
.thinking .d:nth-of-type(2) { animation-delay:.15s; }
.thinking .d:nth-of-type(3) { animation-delay:.3s; }
@keyframes x-bob { 0%, 60%, 100% { transform:translateY(0); opacity:.5; } 30% { transform:translateY(-4px); opacity:1; } }

/* widgets: one frame for every visual (the DS card at 12px, a hairline, no shadow) */
.w-enter { animation:x-wenter .24s var(--x-ease) backwards; }
@keyframes x-wenter { from { opacity:0; transform:translateY(8px); } }
/* a map's tooltip comes in as the DS tooltip does: a fade, from 95 %, 8px from its side */
.xm-map .xm-tooltip:not([hidden]) { animation:x-tipin .15s ease-out; }
.xm-map .xm-tooltip[data-side="bottom"]:not([hidden]) { animation-name:x-tipdown; }
@keyframes x-tipin { from { opacity:0; transform:translateY(8px) scale(.95); } }
@keyframes x-tipdown { from { opacity:0; transform:translateY(-8px) scale(.95); } }
.agent-body > .w-block { margin:8px 0 12px; }
.viz-frame { display:flex; flex-direction:column; gap:16px; padding:16px 0; background:#fff; border:1px solid var(--x-border); border-radius:12px; min-width:0; }
.viz-head { display:flex; flex-direction:column; gap:2px; padding:0 16px; }
.viz-title, .w-title { font-size:14px; line-height:20px; font-weight:500; color:var(--x-text); }
.viz-sub { font-size:12px; line-height:16px; color:var(--x-muted); }
.viz-body { padding:0 16px; min-width:0; }
.w-note { margin:4px 2px 0; font-size:12px; line-height:16px; font-style:italic; color:var(--x-muted); }

/* key figures: one frame, the hero and its composition on top, a band of equal cells under it.
   Every figure in ink, in the interface face; the status is a dot and a word. */
.viz-kpi { gap:12px; padding-bottom:0; }
.sc-body { padding:0; }
.sc-hero { display:grid; grid-template-columns:minmax(0,1fr); padding-bottom:16px; }
.sc-hero.has-breakdown { grid-template-columns:minmax(0,1fr) minmax(0,2fr); }
.sc-hero > * { padding:0 16px; min-width:0; }
.sc-band { display:grid; grid-template-columns:repeat(auto-fit, minmax(10rem, 1fr)); }
.sc-hero + .sc-band:not(:empty) { border-top:1px solid var(--x-border); }
.sc-band > .sc-cell { padding:16px; min-width:0; }
.sc-band > .sc-cell + .sc-cell { border-left:1px solid var(--x-border); }
.viz-kpi.sc-solo { padding:0; gap:0; }
.sc-label { display:flex; flex-wrap:wrap; align-items:center; gap:2px 12px; font-size:12px; line-height:16px; font-weight:500; color:var(--x-muted); }
.sc-status { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:500; color:var(--x-n700); }
.sc-dot { width:7px; height:7px; border-radius:999px; flex:none; }
.is-critical > .sc-dot { background:var(--x-neg-700); }
.is-attention > .sc-dot { background:var(--x-warn-600); }
.is-exposure > .sc-dot { box-shadow:inset 0 0 0 1.5px var(--x-muted); }
.sc-value-row { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:4px; }
.sc-value { font-size:26px; line-height:30px; font-weight:500; letter-spacing:-0.02em; color:var(--x-text); white-space:nowrap; }
.sc-cell.is-hero .sc-value { font-size:34px; line-height:40px; }
.sc-chip { display:inline-flex; align-items:center; height:24px; padding:0 8px; border-radius:999px; background:var(--x-s2); color:#1f2937; font-size:12px; font-weight:500; white-space:nowrap; }
.sc-sub { margin-top:2px; font-size:12px; line-height:16px; color:var(--x-muted); }
.sc-breakdown { display:grid; grid-template-columns:minmax(0,7rem) minmax(0,1fr) max-content max-content; column-gap:12px; row-gap:8px; align-content:start; padding-top:2px; }
.sc-bd-row { display:contents; }
.sc-bd-label { font-size:12px; line-height:20px; color:var(--x-n700); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; align-self:center; }
.sc-bd-track { height:6px; border-radius:999px; background:var(--x-s2); overflow:hidden; align-self:center; }
.sc-bd-fill { display:block; height:100%; border-radius:999px; background:var(--x-indigo); transform-origin:left center; animation:x-grow .24s var(--x-ease) .08s backwards; }
.sc-bd-value, .sc-bd-share { font-family:var(--x-mono); font-size:12px; line-height:20px; text-align:right; white-space:nowrap; }
.sc-bd-value { font-weight:500; color:var(--x-text); }
.sc-bd-share { color:var(--x-muted); }
@keyframes x-grow { from { transform:scaleX(0); } }

/* the table: no card, the title and the CSV button above it, a conclusion as a dot and a
   word, a link back to Supervizor at the end of each row */
.w-tablehead { display:flex; align-items:flex-end; gap:8px; }
.w-tablehead .w-title { min-width:0; margin-bottom:2px; }
.w-dl { margin-left:auto; flex:none; width:26px; height:26px; margin-bottom:8px; border:1px solid var(--x-border); border-radius:8px; background:#fff; display:grid; place-items:center;
  color:var(--x-muted); transition:color .12s ease, border-color .12s ease; }
.w-dl.hover { color:var(--x-brand); border-color:var(--x-brand); }
.w-dl .ic { width:16px; height:16px; }
.w-table { width:100%; border-collapse:collapse; font-size:13px; margin:0; }
.w-table th { text-align:left; font-size:12px; line-height:16px; font-weight:500; color:var(--x-muted); padding:8px 12px; border-bottom:1px solid var(--x-border); white-space:nowrap; background:transparent; }
.w-table th.num { text-align:right; }
.w-table td { height:40px; padding:4px 12px; border-bottom:1px solid var(--x-border); background:#fff; color:var(--x-text); line-height:1.35; transition:background .12s ease; }
.w-table tr:last-child td { border-bottom:none; }
.w-table tr.hover td { background:var(--x-s2); }
.w-table td.num { text-align:right; font-family:var(--x-mono); white-space:nowrap; }
.w-table td.ref { text-align:left; font-family:var(--x-mono); color:var(--x-muted); white-space:nowrap; }
.w-table td.crit { color:var(--x-err); font-weight:500; }
.w-table td.empty, .w-table .cell-empty { color:var(--x-muted); }
.w-table .act { width:1%; padding-left:8px; text-align:right; }
.concl { display:inline-flex; align-items:center; gap:8px; white-space:nowrap; font-weight:500; color:var(--x-text); }
.concl i { width:7px; height:7px; border-radius:999px; flex:none; }
.concl.anomaly i { background:var(--x-neg-700); }
.concl.attention i { box-shadow:inset 0 0 0 1.5px var(--x-muted); }
.concl.normal i { display:none; }
.barcell { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.barcell .trk { width:60px; height:6px; border-radius:999px; background:var(--x-s3); overflow:hidden; }
.barcell .trk i { display:block; height:100%; border-radius:999px; background:var(--x-muted2); }
.barcell .trk i.hot { background:var(--x-err); }
.barcell .n { min-width:1.5ch; text-align:right; font-family:var(--x-mono); }
.splink { position:relative; display:inline-grid; place-items:center; width:26px; height:26px; border:1px solid var(--x-border); border-radius:8px; color:var(--x-muted); background:#fff;
  font-size:14px; line-height:1; transition:color .12s ease, border-color .12s ease, background .12s ease; }
.splink.menu-btn { color:var(--x-brand-strong); }
.splink.hover, .splink.open { color:var(--x-brand); border-color:var(--x-brand); background:var(--x-brand-soft); }
/* the title the browser shows on a link, drawn for the film (the app's is native) */
.splink .tip { position:absolute; right:-2px; bottom:calc(100% + 8px); white-space:nowrap; background:#fff; color:var(--x-text); border:1px solid var(--x-border-strong); font-size:11px; font-weight:400;
  padding:3px 6px; border-radius:2px; box-shadow:0 2px 6px rgba(0,0,0,0.12); opacity:0; transform:translateY(3px); transition:opacity .15s ease, transform .15s ease; pointer-events:none; }
.splink.hover .tip { opacity:1; transform:none; }
.splink.open .tip { opacity:0; }
/* the menu of a row that adds up several analyses: one item per analysis */
.amenu { position:absolute; z-index:28; width:max-content; min-width:14rem; max-width:24rem; background:#fff; border:1px solid var(--x-border); border-radius:8px; padding:4px;
  box-shadow:var(--x-shadow-md); opacity:0; transform:translateY(-4px); transition:opacity .14s ease, transform .2s var(--x-out); text-align:left; }
.amenu.on { opacity:1; transform:none; }
.amenu .am-head { display:flex; flex-direction:column; padding:6px 8px; }
.amenu .am-name { font-size:14px; line-height:20px; font-weight:500; color:var(--x-text); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.amenu .am-sub { font-size:12px; line-height:16px; color:var(--x-muted); }
.amenu .am-sep { height:1px; margin:4px -4px; background:var(--x-border); }
.amenu .am-item { display:flex; align-items:center; gap:12px; padding:6px 8px; border-radius:6px; font-size:14px; line-height:20px; color:var(--x-text); transition:background .12s ease; }
.amenu .am-item.hover { background:var(--x-s2); }
.amenu .am-words { flex:1; min-width:0; display:flex; flex-direction:column; }
.amenu .am-co { font-size:12px; line-height:16px; color:var(--x-muted); }
.amenu .am-arr { color:var(--x-muted); font-size:13px; }
.amenu .am-more { padding:6px 8px; font-size:14px; line-height:20px; color:var(--x-text); }

/* the share dialog (the DS dialog) */
.scrim { position:absolute; inset:0; z-index:30; background:rgba(0,0,0,0.5); backdrop-filter:blur(2px); display:grid; place-items:center; opacity:0; transition:opacity .2s ease; }
.scrim.on { opacity:1; }
.dialog { position:relative; width:480px; background:#fff; border:1px solid var(--x-border); border-radius:12px; padding:24px; box-shadow:var(--x-shadow-lg), 0 10px 15px -3px rgba(0,0,0,0.1);
  display:flex; flex-direction:column; gap:12px; transform:translateY(8px) scale(0.985); transition:transform .28s var(--x-out); }
.scrim.on .dialog { transform:none; }
.dialog h3 { margin:0; padding-right:32px; font-size:18px; line-height:1.3; font-weight:600; letter-spacing:-0.01em; color:var(--x-text); }
.dialog .desc { margin:0; font-size:14px; line-height:1.5; color:var(--x-muted); }
.dialog .dclose { position:absolute; top:16px; right:16px; width:28px; height:28px; border-radius:8px; display:grid; place-items:center; color:var(--x-muted); transition:background .12s ease; }
.dialog .dclose.hover { background:var(--x-s2); color:var(--x-text); }
.dialog .dclose .ic { width:16px; height:16px; }
.dbody { display:flex; flex-direction:column; }
.duty { display:flex; align-items:flex-start; gap:8px; margin:0 0 8px; font-size:14px; line-height:1.5; color:var(--x-text); }
.duty .ic { width:16px; height:16px; margin-top:3px; color:var(--x-warn-600); }
.dialog .note { margin:0 0 16px; font-size:13px; line-height:1.5; color:var(--x-muted); }
.dfoot { display:flex; justify-content:flex-end; gap:8px; }
.dsecond, .dprimary { display:inline-flex; align-items:center; justify-content:center; height:36px; padding:0 16px; border-radius:8px; font-size:14px; font-weight:500; transition:background .12s ease; }
.dsecond { background:#fff; border:1px solid var(--x-border); box-shadow:var(--x-shadow-xs); color:var(--x-text); }
.dprimary { background:var(--x-brand); color:#fff; }
.dprimary.hover { background:var(--x-brand-strong); }
.linkrow { display:flex; align-items:center; gap:8px; border:1px solid var(--x-border); border-radius:8px; padding:4px 4px 4px 12px; margin-bottom:12px; }
.linkrow .ic { width:16px; height:16px; color:var(--x-muted); }
.linkrow .url { flex:1; min-width:0; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--x-text); }
.linkrow .copy { flex:none; height:32px; padding:0 12px; display:grid; place-items:center; border:1px solid var(--x-border); border-radius:8px; background:#fff; box-shadow:var(--x-shadow-xs);
  font-size:13px; font-weight:500; }
.orgline { display:flex; align-items:flex-start; gap:8px; margin:0 0 16px; font-size:12px; line-height:1.5; color:var(--x-muted); }
.orgline .ic { width:14px; height:14px; margin-top:2px; }
.drevoke { margin-left:auto; display:flex; width:max-content; align-items:center; height:32px; padding:0 12px; border:1px solid var(--x-border); border-radius:8px; background:#fff;
  box-shadow:var(--x-shadow-xs); font-size:13px; font-weight:500; color:var(--x-err); }
.dstate { animation:x-fade .28s ease backwards; }

/* the menus: "More actions" (export) and a row's « … » */
.menu { position:absolute; z-index:28; top:44px; right:16px; min-width:14rem; width:max-content; background:#fff; border:1px solid var(--x-border); border-radius:8px; padding:4px;
  box-shadow:var(--x-shadow-md); opacity:0; transform:translateY(-4px); transition:opacity .14s ease, transform .2s var(--x-out); }
.menu.on { opacity:1; transform:none; }
.menu .mi, .rowmenu .mi { display:flex; align-items:center; gap:8px; height:32px; padding:0 8px; border-radius:6px; font-size:14px; color:var(--x-text); white-space:nowrap; transition:background .12s ease; }
.menu .mi .ic, .rowmenu .mi .ic { width:16px; height:16px; color:var(--x-muted); }
.menu .mi.hover, .rowmenu .mi.hover { background:var(--x-s2); }
.menu .mi .hint { margin-left:auto; padding-left:24px; font-size:12px; color:var(--x-muted); }
.menu .mi.off { opacity:0.55; }

/* a page: the organization stays at the top right; the page scrolls under the band */
.pagewrap { height:100%; overflow:hidden; padding:8px 24px 0; }
/* all conversations */
.convpage { max-width:860px; margin:0 auto; }
.convpage .ph-row { display:flex; align-items:center; gap:12px; min-height:36px; margin:0 0 16px; }
.convpage h2 { margin:0; font-family:inherit; font-size:20px; font-weight:600; letter-spacing:-0.01em; color:var(--x-text); max-width:none; line-height:1.3; }
.convpage .count { font-size:12px; color:var(--x-muted); }
.csearch { display:flex; align-items:center; height:36px; padding:0 12px; margin-bottom:16px; background:var(--x-s2); border:1px solid var(--x-border-strong); border-radius:8px; font-size:13px;
  transition:border-color .12s ease, background .12s ease; }
.csearch .ph { color:var(--x-n600); } .csearch.has-text .ph { display:none; }
.csearch.focus { border-color:var(--x-brand); background:#fff; }
.csearch.focus .typed::after { content:""; display:inline-block; width:1.5px; height:1.05em; margin-left:1px; vertical-align:-2px; background:var(--x-text); animation:x-caret 1s steps(1) infinite; }
.cgrp { display:flex; align-items:center; gap:8px; padding:16px 4px 4px; font-size:11px; font-weight:600; color:var(--x-muted); }
.cgrp .ic { width:11px; height:11px; color:var(--x-brand); transform:rotate(90deg); transition:transform .12s ease; }
.cgrp.folded .ic { transform:none; }
.cgrp .ccount { margin-left:2px; }
.crow { display:flex; flex-direction:column; justify-content:center; gap:2px; min-height:40px; padding:4px 12px; border-radius:8px; }
.crow b { font-size:14px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.crow span { font-size:11px; line-height:1.3; color:var(--x-muted); }
.cgrp, .crow { transition:opacity .22s ease, max-height .3s var(--x-out), padding .3s var(--x-out), min-height .3s var(--x-out); max-height:60px; overflow:hidden; }
.cgrp.gone, .crow.gone { opacity:0; max-height:0; min-height:0; padding-top:0; padding-bottom:0; }

/* the Team page */
.teampage { max-width:1200px; margin:0 auto; }
.tp-head { display:flex; align-items:center; gap:12px; min-height:36px; }
.tp-head h2 { margin:0; font-family:inherit; font-size:20px; font-weight:600; letter-spacing:-0.01em; line-height:1.3; color:var(--x-text); max-width:none; }
.tp-btn { display:inline-flex; align-items:center; height:24px; padding:0 8px; border:1px solid var(--x-border); border-radius:6px; background:#fff; box-shadow:var(--x-shadow-xs); font-size:12px; font-weight:500; }
.tp-range { margin-left:auto; display:inline-flex; gap:2px; padding:2px; border-radius:8px; background:var(--x-s2); border:1px solid var(--x-border); }
.tp-range i { font-style:normal; display:grid; place-items:center; padding:4px 12px; border-radius:8px; font-size:12px; font-weight:500; color:var(--x-n600); }
.tp-range i.on { background:#fff; color:var(--x-text); font-weight:600; box-shadow:var(--x-shadow); }
.tp-sub { margin:4px 0 16px; font-size:13px; line-height:1.5; color:var(--x-muted); }
.tp-kpis { display:grid; grid-template-columns:repeat(3, 1fr); background:#fff; border:1px solid var(--x-border); border-radius:12px; box-shadow:var(--x-shadow-xs); margin-bottom:12px; }
.tp-kpis > div { padding:16px 24px; display:flex; flex-direction:column; gap:2px; }
.tp-kpis > div + div { border-left:1px solid var(--x-border); }
.tp-kpis span { font-size:12px; color:var(--x-n600); }
.tp-kpis b { font-size:30px; line-height:36px; font-weight:500; letter-spacing:-0.01em; color:var(--x-text); }
.tp-kpis em { font-style:normal; font-size:13px; color:var(--x-n600); }
.tp-bar { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.tp-search { display:flex; align-items:center; width:260px; height:36px; padding:0 12px; background:#fff; border:1px solid var(--x-border); border-radius:8px; box-shadow:var(--x-shadow-xs);
  font-size:13px; color:var(--x-muted); }
.tp-search .ic { margin-left:auto; width:16px; height:16px; }
.tp-chips { display:flex; gap:4px; }
.tp-chip { display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 8px; border:1px solid var(--x-border); border-radius:6px; background:#fff; font-size:12px; font-weight:500; color:var(--x-text); }
.tp-chip i { font-style:normal; font-family:var(--x-mono); font-size:11px; color:var(--x-muted); }
.tp-chip.on { border-color:var(--x-brand); color:var(--x-brand-strong); background:#fff; }
.tp-chip.on i { color:var(--x-brand-strong); }
.tp-table { background:#fff; border:1px solid var(--x-border); border-radius:12px; box-shadow:var(--x-shadow-xs); overflow:hidden; }
.tp-table table { width:100%; border-collapse:collapse; font-size:13px; }
.tp-table th { text-align:left; padding:10px 12px; font-size:12px; font-weight:500; color:var(--x-n600); border-bottom:1px solid var(--x-border); white-space:nowrap; }
.tp-table th .ic { display:inline-block; width:10px; height:10px; margin-left:4px; vertical-align:-1px; color:var(--x-muted2); }
.tp-table th.sorted .ic { color:var(--x-brand-strong); }
.tp-table th.r, .tp-table td.r { text-align:right; }
.tp-table td { height:52px; padding:4px 12px; border-bottom:1px solid var(--x-border); vertical-align:middle; color:var(--x-text); transition:background .12s ease; }
.tp-table tr:last-child td { border-bottom:none; }
.tp-table tr.hover td { background:var(--x-s2); }
.tp-who { display:flex; align-items:center; gap:10px; white-space:nowrap; }
.tp-init { width:28px; height:28px; flex:none; border-radius:50%; background:var(--x-s2); color:var(--x-n600); display:grid; place-items:center; font-size:10px; font-weight:500; }
.tp-who b { font-size:13px; font-weight:500; }
.tp-badge { display:inline-flex; align-items:center; height:20px; padding:0 6px; border-radius:999px; background:var(--x-s2); color:#1f2937; font-size:11px; font-weight:500; }
.tp-badge.off { background:var(--x-neg-50); color:var(--x-neg-700); }
.tp-q { display:inline-flex; align-items:center; justify-content:flex-end; gap:12px; }
.tp-q .trk { width:64px; height:6px; border-radius:999px; background:#e1e9fe; overflow:hidden; }
.tp-q .trk i { display:block; height:100%; border-radius:999px; background:var(--x-indigo); }
.tp-q .n, .tp-table td.n { font-variant-numeric:tabular-nums; }
.tp-q .n { min-width:3ch; text-align:right; }
.tp-none { color:var(--x-muted); }
.tp-open { width:1%; color:var(--x-muted); }
.tp-open .ic { width:14px; height:14px; }
.tp-rights { white-space:nowrap; }
.tp-rights .ic { display:inline-block; width:12px; height:12px; margin-right:3px; vertical-align:-1px; color:var(--x-muted); }
.tp-rights.changed { animation:x-rightin .5s var(--x-out) backwards; }
@keyframes x-rightin { from { opacity:0.3; transform:translateY(2px); } }

/* a person's sheet, from the right, over a dimmed page */
.xsheet-scrim { position:absolute; inset:0; z-index:30; background:rgba(0,0,0,0.25); backdrop-filter:blur(3px); opacity:0; transition:opacity .24s ease; }
.xsheet-scrim.on { opacity:1; }
.xsheet { position:absolute; top:0; right:0; bottom:0; width:440px; background:#fff; border-left:1px solid var(--x-border); box-shadow:var(--x-shadow-lg); display:flex; flex-direction:column;
  transform:translateX(102%); transition:transform .4s var(--x-ease); }
.xsheet-scrim.on .xsheet { transform:none; }
.xs-head { display:flex; align-items:flex-start; gap:12px; padding:24px 24px 16px; border-bottom:1px solid var(--x-border); }
.xs-head .tp-init { width:32px; height:32px; font-size:11px; }
.xs-title { flex:1; min-width:0; }
.xs-title b { display:block; font-size:16px; line-height:22px; font-weight:500; color:var(--x-text); overflow-wrap:anywhere; }
.xs-hint { margin:4px 0 0; font-size:12px; line-height:16px; color:var(--x-muted); }
.xs-close { width:28px; height:28px; border-radius:8px; display:grid; place-items:center; color:var(--x-text); }
.xs-close .ic { width:16px; height:16px; }
.xs-body { position:relative; flex:1; min-height:0; overflow:hidden; padding:24px; display:flex; flex-direction:column; gap:24px; }
.xs-sec { display:flex; flex-direction:column; gap:12px; }
.xs-sec + .xs-sec { padding-top:24px; border-top:1px solid var(--x-border); }
.xs-sec h3 { display:flex; align-items:baseline; gap:8px; margin:0; font-size:13px; font-weight:500; color:var(--x-text); }
.xs-sec h3 span { font-size:12px; font-weight:400; color:var(--x-muted); }
.xs-facts { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px 8px; }
.xs-facts > div { display:flex; flex-direction:column; gap:4px; min-width:0; }
.xs-facts dt { font-size:12px; color:var(--x-muted); }
.xs-facts dd { margin:0; font-family:var(--x-mono); font-size:16px; font-weight:500; color:var(--x-text); }
.xs-facts dd.t { font-family:var(--x-sans); font-size:13px; font-weight:400; }
.xs-chart-cap { display:flex; justify-content:space-between; font-size:12px; color:var(--x-muted); }
.xs-chart-cap b { font-weight:500; color:var(--x-text); }
.xs-chart { position:relative; height:84px; margin-left:16px; border-bottom:1px solid var(--x-border-strong); display:flex; align-items:flex-end; gap:3px; }
.xs-chart i { flex:1; background:var(--x-indigo); border-radius:2px 2px 0 0; transform-origin:bottom; animation:x-rise .4s var(--x-ease) backwards; }
.xs-chart i.zero { height:0 !important; }
.xs-chart .tops { position:absolute; left:-16px; top:-14px; font-family:var(--x-mono); font-size:11px; color:var(--x-muted); }
.xs-chart .zero-l { position:absolute; left:-16px; bottom:-4px; font-family:var(--x-mono); font-size:11px; color:var(--x-muted); }
.xs-ticks { display:flex; justify-content:space-between; margin-left:16px; font-size:10px; color:var(--x-muted); }
@keyframes x-rise { from { transform:scaleY(0); } }
.xs-roles { display:flex; flex-direction:column; gap:8px; }
.xs-role { display:flex; align-items:flex-start; gap:8px; padding:8px 12px; border:1px solid var(--x-border); border-radius:12px; font-size:12px; line-height:16px; color:var(--x-muted); }
.xs-role .rd { flex:none; width:14px; height:14px; margin-top:1px; border-radius:50%; border:1.5px solid var(--x-muted); }
.xs-role b { margin-right:4px; font-size:13px; font-weight:500; color:var(--x-text); }
.xs-role.on { border-color:var(--x-brand); background:#fef6f8; color:var(--x-n600); }
.xs-role.on .rd { border-color:var(--x-brand); box-shadow:inset 0 0 0 3px #fff; background:var(--x-brand); }
.xs-right { display:flex; align-items:flex-start; gap:12px; }
.xs-right > div { flex:1; min-width:0; }
.xs-right label { display:block; font-size:13px; font-weight:500; color:var(--x-text); }
.xs-right p { margin:2px 0 0; font-size:12px; line-height:16px; color:var(--x-muted); }
.tgl { flex:none; position:relative; width:36px; height:20px; margin-top:1px; border-radius:999px; background:var(--x-s3); transition:background .2s ease; }
.tgl::after { content:""; position:absolute; left:2px; top:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,0.15); transition:transform .2s var(--x-ease); }
.tgl.on { background:var(--x-indigo); }
.tgl.on::after { transform:translateX(16px); }
.tgl.hover { box-shadow:0 0 0 4px var(--x-s2); }
.xs-off { align-self:flex-start; display:inline-flex; align-items:center; height:32px; padding:0 12px; border:1px solid var(--x-border); border-radius:8px; background:#fff; box-shadow:var(--x-shadow-xs);
  font-size:13px; font-weight:500; color:var(--x-neg-700); }

/* ──────────────────────────────────────────────────────── 4. film devices */
.cursor { position:absolute; z-index:70; left:0; top:0; width:22px; height:22px; pointer-events:none; opacity:0;
  transition:transform .72s cubic-bezier(0.5,0,0.15,1), opacity .25s ease; filter:drop-shadow(0 2px 3px rgba(0,0,0,0.3)); }
.cursor.fast { transition-duration:.44s, .25s; }
.cursor.on { opacity:1; }
.cursor svg { width:22px; height:22px; display:block; }
.cursor.click::after { content:""; position:absolute; left:-13px; top:-13px; width:34px; height:34px; border-radius:50%; border:2px solid #15151a; opacity:0; animation:x-click .5s var(--x-out); }
@keyframes x-click { from { transform:scale(0.3); opacity:0.9; } to { transform:scale(1.25); opacity:0; } }

/* a row's link opens its source in Supervizor */
.svsplash { position:absolute; inset:-1px; z-index:45; background:#fff; display:grid; place-items:center; opacity:0; transition:opacity .4s ease; }
.svsplash.on { opacity:1; }
.svsplash .in { display:flex; align-items:center; gap:16px; transform:translateY(6px); transition:transform .6s var(--x-out); }
.svsplash.on .in { transform:none; }
.svsplash svg { width:44px; height:44px; }
.svsplash span { font-family:var(--sans); font-size:22px; font-weight:700; letter-spacing:-0.015em; color:#15151a; }

/* the exported Markdown file, as the file it is */
.mdsheet { position:absolute; z-index:26; right:26px; bottom:0; width:452px; background:#fff; border:1px solid var(--x-border-strong); border-bottom:none; border-radius:10px 10px 0 0;
  box-shadow:0 -14px 44px -26px rgba(17,24,39,0.5); transform:translateY(102%); transition:transform .5s var(--x-out); display:flex; flex-direction:column; }
.mdsheet.on { transform:none; }
.mdsheet .fn { display:flex; align-items:center; gap:9px; padding:10px 14px; border-bottom:1px solid var(--x-border); font-family:var(--x-mono); font-size:11px; color:var(--x-muted); white-space:nowrap; overflow:hidden; }
.mdsheet .fn .ic { width:14px; height:14px; }
.mdsheet pre { margin:0; padding:14px 16px 26px; overflow:hidden; font-family:var(--x-mono); font-size:11px; line-height:1.62; color:var(--x-text); white-space:pre-wrap; }
.mdsheet pre .h { font-weight:600; }
.mdsheet pre .d { color:var(--x-muted); }

/* conclusion: type on the app's own ground, no badge */
.conclusion { position:absolute; inset:-1px; z-index:48; background:#fff; display:grid; place-items:center; opacity:0; transition:opacity .5s ease; }
.conclusion.on { opacity:1; }
.conclusion .in { width:760px; font-family:var(--sans); color:#15151a; }
.conclusion svg.mark { width:40px; height:40px; display:block; margin-bottom:26px; }
.conclusion h2 { margin:0; max-width:none; font-size:44px; font-weight:800; letter-spacing:-0.035em; line-height:1.06; text-wrap:balance; }
.conclusion p { margin:18px 0 0; max-width:56ch; font-size:18px; line-height:1.5; color:#3b3b44; }
.conclusion .fine { margin-top:10px; max-width:60ch; font-size:16px; line-height:1.5; color:#6c6c78; }
.conclusion .in > * { opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .7s var(--x-out); }
.conclusion.on .in > * { opacity:1; transform:none; }
.conclusion.on .in > :nth-child(2) { transition-delay:.12s; } .conclusion.on .in > :nth-child(3) { transition-delay:.26s; } .conclusion.on .in > :nth-child(4) { transition-delay:.4s; } .conclusion.on .in > :nth-child(5) { transition-delay:.52s; }

@media (prefers-reduced-motion: reduce) {
  .stage, .stage *, .stage *::before, .stage *::after { transition:none !important; animation:none !important; }
  .stage .scroll { scroll-behavior:auto !important; }
}