/* The /try page: the loading screen in the site's look (IBM Plex, ink and steel, hairlines, teal for meaning), the
   phone note, and the sandbox banner and toast over the running app. Tokens as in site.css. */
@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/plex-sans-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/plex-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/plex-sans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
:root {
  --sbx-paper: #FFFFFF; --sbx-fog: #F4F5F7; --sbx-hair: #E2E5E9; --sbx-hair-2: #CDD2D8;
  --sbx-ink: #0B1015; --sbx-graphite: #2C333C; --sbx-steel: #5A636E; --sbx-steel-2: #8A929C;
  --sbx-teal: #0A7C8C; --sbx-teal-2: #12A0B3; --sbx-red: #B4403A;
  --sbx-night: #0B0F14; --sbx-night-2: #141A21; --sbx-night-hair: #252D36; --sbx-night-ink: #E6EAEE; --sbx-night-steel: #96A0AB;
  --sbx-sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --sbx-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

/* ---------- loading screen ---------- */
.sbx-screen { position: fixed; inset: 0; z-index: 200; overflow-y: auto; background: var(--sbx-night); color: var(--sbx-night-ink); font-family: var(--sbx-sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; transition: opacity .4s ease; }
.sbx-running .sbx-screen { opacity: 0; pointer-events: none; }
.sbx-screen[hidden] { display: none; }
.sbx-in { min-height: 100%; max-width: 760px; margin: 0 auto; padding: 56px 32px 40px; display: flex; flex-direction: column; }
.sbx-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--sbx-night-ink); text-decoration: none; font-weight: 500; font-size: 17px; letter-spacing: -.005em; }
.sbx-brand .mark { color: #fff; }
.sbx-kicker { margin: 56px 0 14px; font-family: var(--sbx-mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--sbx-teal-2); }
.sbx-screen h1 { margin: 0; font-weight: 300; font-size: clamp(32px, 4.4vw, 48px); line-height: 1.08; letter-spacing: -.022em; color: #fff; }
.sbx-lede { margin: 16px 0 0; max-width: 54ch; color: var(--sbx-night-steel); font-weight: 300; font-size: 17.5px; }
.sbx-meter { margin: 40px 0 0; border-top: 1px solid var(--sbx-night-hair); padding-top: 18px; }
.sbx-meter-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 14.5px; }
.sbx-now { color: #fff; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbx-nums { display: flex; gap: 18px; flex: none; font-family: var(--sbx-mono); font-size: 13px; color: var(--sbx-night-steel); font-variant-numeric: tabular-nums; }
.sbx-nums b { color: #fff; font-weight: 400; }
.sbx-track { position: relative; height: 3px; margin-top: 12px; background: var(--sbx-night-hair); overflow: hidden; }
.sbx-bar { position: absolute; inset: 0; background: linear-gradient(90deg, var(--sbx-teal), var(--sbx-teal-2)); transform-origin: 0 50%; transform: scaleX(0); transition: transform .12s linear; }
.sbx-steps { list-style: none; margin: 22px 0 0; padding: 0; font-size: 14px; }
.sbx-steps li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--sbx-night-hair); color: #5D6873; transition: color .2s; }
.sbx-steps li .lb { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbx-steps li .ms { font-family: var(--sbx-mono); font-size: 12px; color: var(--sbx-night-steel); font-variant-numeric: tabular-nums; }
.sbx-steps .st { width: 9px; height: 9px; border: 1px solid #3A4550; border-radius: 50%; justify-self: center; }
.sbx-steps li.now { color: #fff; }
.sbx-steps li.now .st { border-color: var(--sbx-teal-2); background: var(--sbx-teal-2); animation: sbx-pulse 1s ease-in-out infinite alternate; }
.sbx-steps li.done { color: var(--sbx-night-steel); }
.sbx-steps li.done .st { border: 0; width: 12px; height: 12px; background: no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3l2.6 2.5L10 3.4' fill='none' stroke='%2312A0B3' stroke-width='1.6'/%3E%3C/svg%3E"); }
@keyframes sbx-pulse { from { opacity: .35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sbx-steps li.now .st { animation: none; } .sbx-bar { transition: none; } }
.sbx-foot { margin-top: auto; padding-top: 36px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13.5px; color: var(--sbx-night-steel); }
.sbx-foot a { color: var(--sbx-night-ink); text-decoration: underline; text-decoration-color: #3A4550; text-underline-offset: 4px; }
.sbx-foot a:hover { text-decoration-color: var(--sbx-night-ink); }
.sbx-slow { margin: 16px 0 0; font-size: 14px; color: var(--sbx-night-steel); }
.sbx-error { margin: 24px 0 0; padding: 16px 18px; border: 1px solid #5A2D2A; background: #1A1212; font-size: 15px; }
.sbx-error p { margin: 0 0 10px; max-width: none; }
.sbx-error code { font-family: var(--sbx-mono); font-size: 12.5px; color: #E8B4AE; word-break: break-word; }
.sbx-failed .sbx-bar { background: var(--sbx-red); }
.sbx-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border-radius: 2px; border: 1px solid #fff; background: #fff; color: var(--sbx-ink); font: inherit; font-size: 15.5px; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; }
.sbx-btn:hover { background: var(--sbx-fog); }
.sbx-btn.line { background: transparent; color: #fff; border-color: #3A4550; }
.sbx-btn.line:hover { border-color: #fff; background: transparent; }
.sbx-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.sbx-screen :focus-visible { outline: 2px solid var(--sbx-teal-2); outline-offset: 3px; }

/* ---------- phone note ---------- */
.sbx-gate .sbx-in { padding-top: 32px; }
.sbx-gate .sbx-kicker { margin-top: 44px; }
.sbx-gate ul { margin: 22px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--sbx-night-steel); }
.sbx-gate li { padding: 8px 0; border-bottom: 1px solid var(--sbx-night-hair); }
.sbx-gate li:first-child { border-top: 1px solid var(--sbx-night-hair); }

@media (max-width: 759px) {
  .sbx-in { padding: 28px 20px 28px; }
  .sbx-kicker { margin-top: 36px; }
  .sbx-nums { gap: 10px; }
  .sbx-nums .sbx-mb { display: none; }
  .sbx-ctas .sbx-btn { flex: 1 1 100%; }
}

/* ---------- banner, along the bottom of the window ----------
   At the bottom so the app's sticky header, area bar and panels (top: 48px, 89px) stay where the app puts them. */
.sbx-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; min-height: 36px; padding: 6px 10px 6px 16px; padding-bottom: max(6px, env(safe-area-inset-bottom)); background: #0B0F14; color: #E6EAEE; border-top: 1px solid #252D36; font-family: var(--sbx-sans); font-size: 13px; line-height: 1.35; }
.sbx-banner-on body { padding-bottom: 36px; }
.sbx-banner .sbx-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sbx-teal-2); flex: none; }
.sbx-banner .sbx-text { flex: 1 1 320px; min-width: 0; }
.sbx-banner b { font-weight: 500; color: #fff; }
.sbx-banner .sbx-links { display: flex; align-items: center; gap: 16px; flex: none; }
.sbx-banner a { color: #E6EAEE; text-decoration: underline; text-decoration-color: #3A4550; text-underline-offset: 3px; }
.sbx-banner a:hover { text-decoration-color: #E6EAEE; }
.sbx-banner .sbx-cta { padding: 3px 12px; border: 1px solid #fff; border-radius: 2px; background: #fff; color: #0B1015; text-decoration: none; font-weight: 500; }
.sbx-banner .sbx-cta:hover { background: #F4F5F7; }
.sbx-banner .sbx-x { display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 2px; background: transparent; color: #96A0AB; cursor: pointer; flex: none; }
.sbx-banner .sbx-x:hover { color: #fff; background: #1D252E; }
.sbx-banner :focus-visible { outline: 2px solid var(--sbx-teal-2); outline-offset: 2px; }
/* On narrow screens the app has its own bottom navigation: the banner sits on top of the window instead. */
@media (max-width: 900px) {
  .sbx-banner { position: sticky; top: 0; bottom: auto; z-index: 46; border-top: 0; border-bottom: 1px solid #252D36; padding-bottom: 6px; }
  .sbx-banner-on body { padding-bottom: 0; }
  .sbx-banner .sbx-text { flex-basis: calc(100% - 40px); }
}

/* ---------- toast (links to Business Central) ---------- */
.sbx-toast { position: fixed; left: 50%; bottom: 52px; z-index: 300; max-width: min(560px, calc(100vw - 32px)); padding: 12px 16px; background: #0B0F14; color: #E6EAEE; border-left: 3px solid #4C9BF0; font-family: var(--sbx-sans); font-size: 14px; line-height: 1.45; box-shadow: 0 8px 28px rgba(0, 0, 0, .28); transform: translate(-50%, 16px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.sbx-toast.on { opacity: 1; transform: translate(-50%, 0); }