/* Self-hosted Ubuntu — the platform default font, loaded on every page via this
   shared stylesheet (url() is relative to this file at the repo root). */
@font-face{font-family:'Ubuntu';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/ubuntu-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Ubuntu';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/ubuntu-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Ubuntu';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/ubuntu-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Ubuntu';font-style:italic;font-weight:400;font-display:swap;src:url('assets/fonts/ubuntu-latin-400-italic.woff2') format('woff2')}
@font-face{font-family:'Ubuntu';font-style:italic;font-weight:700;font-display:swap;src:url('assets/fonts/ubuntu-latin-700-italic.woff2') format('woff2')}
@font-face{font-family:'Ubuntu Mono';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/ubuntu-mono-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Ubuntu Mono';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/ubuntu-mono-latin-700-normal.woff2') format('woff2')}
/* ───────────────────────────────────────────────────────────────
   π² centralized top menu bar — single source of truth for every page.
   All selectors are prefixed `xpi-` and scoped under #xpi-topbar so they
   never collide with the host page's own .brand/.nav/.navt/.iconbtn etc.
   Rendered by xpi-menu.js into <div id="xpi-topbar"></div>.
   ─────────────────────────────────────────────────────────────── */
#xpi-topbar{
  --xpi-bg:#f2f3f5;            /* cool off-white, matches the platform shell */
  --xpi-paper:#ffffff;
  --xpi-line:#c9ced6;
  --xpi-txt:#15181d;
  --xpi-muted:#4b5563;
  --xpi-earth:#e2571f;
  --xpi-mono:'SFMono-Regular',ui-monospace,'JetBrains Mono',Menlo,monospace;
  --xpi-ui:'Ubuntu',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  position:sticky;top:0;z-index:1000;display:block;
  background:var(--xpi-bg);border-bottom:1px solid var(--xpi-line);
  box-shadow:0 8px 26px -20px rgba(21,24,29,.55);
  font-family:var(--xpi-ui);
}
#xpi-topbar *{box-sizing:border-box}
.xpi-bar{display:flex;align-items:center;gap:16px;max-width:1180px;margin:0 auto;padding:9px 24px}
.xpi-brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.xpi-brand img{height:54px;width:auto;display:block}
.xpi-slogan{font-family:var(--xpi-mono);font-size:10px;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--xpi-muted);line-height:1.2;max-width:120px}
.xpi-slogan b{color:var(--xpi-earth);font-weight:600}
.xpi-nav{display:flex;align-items:center;gap:16px;margin-left:6px;flex:1 1 auto;min-width:0;
  overflow-x:auto;overflow-y:hidden;white-space:nowrap;scrollbar-width:none;-ms-overflow-style:none}
.xpi-nav::-webkit-scrollbar{display:none}
.xpi-nav a{font-family:'Ubuntu',var(--xpi-ui);font-size:12.5px;letter-spacing:.2px;text-transform:none;font-weight:500;
  color:var(--xpi-txt);text-decoration:none;padding:6px 3px;white-space:nowrap;transition:color .16s;
  display:inline-flex;align-items:center;gap:5px}
.xpi-nav a svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.xpi-nav a:hover{color:var(--xpi-earth)}
.xpi-nav a.on{color:var(--xpi-earth)}
.xpi-nav a.xpi-home{padding:6px 3px;flex:none}
.xpi-nav a.xpi-home svg{width:16px;height:16px;display:block}
.xpi-auth{display:flex;align-items:center;gap:8px;flex:none;padding-left:6px}
.xpi-ico{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;
  border:1px solid var(--xpi-line);background:transparent;color:var(--xpi-txt);cursor:pointer;text-decoration:none;transition:.16s}
.xpi-ico:hover{border-color:var(--xpi-earth);color:var(--xpi-earth);background:var(--xpi-paper)}
.xpi-ico svg{width:18px;height:18px;display:block}
.xpi-ico.solid{background:var(--xpi-earth);border-color:var(--xpi-earth);color:#fff}
.xpi-ico.solid:hover{filter:brightness(1.06);color:#fff;background:var(--xpi-earth)}
.xpi-chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--xpi-mono);font-size:11.5px;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;cursor:pointer;border:1px solid var(--xpi-line);background:var(--xpi-paper);
  color:var(--xpi-txt);border-radius:999px;padding:7px 13px;text-decoration:none;transition:.16s}
.xpi-chip:hover{border-color:var(--xpi-earth);color:var(--xpi-earth)}
.xpi-chip .xpi-at{font-size:9px;background:var(--xpi-earth);color:#fff;border-radius:4px;padding:2px 5px}

/* hide slogan when space is tight; tighten nav on small screens */
@media(max-width:1080px){ .xpi-slogan{display:none} }
@media(max-width:820px){ .xpi-nav{gap:12px} .xpi-bar{gap:10px;padding:9px 16px} }
@media(max-width:620px){ .xpi-nav a{letter-spacing:.6px} }

/* ── generic sub-menu bar helper (apps may use it for their app nav) ── */
.xpi-subbar{position:sticky;top:0;z-index:900;background:var(--xpi-paper,#ffffff);
  border-bottom:1px solid var(--xpi-line,#c9ced6)}

/* ── page-visibility: "locked" items. Menu/tab links stay CLICKABLE (they open
   the page) but carry a lock badge; the opened page is shown view-only via the
   #xpi-freeze overlay. Locked non-interactive sections are frozen in place. ── */
.xpi-locked:not(a):not(button){pointer-events:none;opacity:.85}
a.xpi-locked,button.xpi-locked{opacity:.85;cursor:pointer;position:relative}
a.xpi-locked::after,button.xpi-locked::after{
  content:"";display:inline-block;width:.78em;height:.78em;margin-left:5px;vertical-align:-0.08em;
  background:currentColor;opacity:.85;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5zm-3 8V7a3 3 0 0 1 6 0v3H9z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5zm-3 8V7a3 3 0 0 1 6 0v3H9z'/%3E%3C/svg%3E") center/contain no-repeat}

/* ── "frozen" view-only overlay for a locked page (top menu bar stays above it) ── */
/* above the app's own chrome but below the top menu bar (z1000) */
#xpi-freeze{position:fixed;inset:0;z-index:990;background:rgba(20,15,10,.05);cursor:not-allowed}
.xpi-freeze-card{position:fixed;top:66px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;
  background:var(--xpi-paper,#ffffff);border:1px solid var(--xpi-line,#c9ced6);border-radius:12px;padding:10px 16px;
  box-shadow:0 12px 34px rgba(20,15,10,.22);max-width:92vw}
.xpi-freeze-lock{width:22px;height:22px;flex:none;background:#b15a1e;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5zm-3 8V7a3 3 0 0 1 6 0v3H9z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5zm-3 8V7a3 3 0 0 1 6 0v3H9z'/%3E%3C/svg%3E") center/contain no-repeat}
.xpi-freeze-txt{display:flex;flex-direction:column;line-height:1.3}
.xpi-freeze-txt b{font-size:13px;color:#15181d}
.xpi-freeze-sub{font-size:11.5px;color:#4b5563}
.xpi-freeze-btn{margin-left:6px;background:#e2571f;color:#fff;text-decoration:none;font-size:12px;font-weight:700;
  letter-spacing:.4px;padding:9px 15px;border-radius:8px;white-space:nowrap}
.xpi-freeze-btn:hover{filter:brightness(1.06)}