/* One opening surface spans font readiness and application readiness. */
html { --kairos-opening-color: #bbd8e3; }
html[data-kairos-app="os"] { --kairos-opening-color: #22c3f5; }
html[data-kairos-app="pos"] { --kairos-opening-color: #0fa80f; }
html[data-kairos-app="fieldnotes"] { --kairos-opening-color: #cc6104; }
html[data-kairos-app="blueprint"] { --kairos-opening-color: #1140c4; }
html[data-kairos-app="devices"] { --kairos-opening-color: #9612be; }
html[data-kairos-font], html[data-shell-loading] { background: #f7f9fa !important; }
html[data-kairos-font] body, html[data-kairos-font] body *,
html[data-shell-loading] body, html[data-shell-loading] body * { visibility: hidden !important; }
html[data-kairos-font]::before, html[data-shell-loading]::before {
  content: ''; position: fixed; z-index: 2147483646;
  top: calc(50% - 34px); left: calc(50% - 17px);
  width: 34px; height: 34px; border: 1px solid color-mix(in srgb, var(--kairos-opening-color) 48%, #d8e1e5);
  border-radius: 50%; background: radial-gradient(circle at 30% 25%, #fff, var(--kairos-opening-color));
  box-shadow: inset -2px -3px 6px #00000006;
}
html[data-kairos-font]::after, html[data-shell-loading]::after {
  content: 'Opening your app…'; position: fixed; z-index: 2147483646;
  top: calc(50% + 16px); left: 0; width: 100%; text-align: center;
  color: #536471; font: 700 13px/1.6 'Jura', sans-serif;
}
/* Never render the label in a fallback face while Jura downloads. */
html[data-kairos-font]::after { visibility: hidden; }
html[data-kairos-font="error"]::before, html[data-kairos-font="error"]::after,
html[data-shell-error]::after { display: none; }
#shell-loading { display: none; }
html[data-shell-error] #shell-loading,
html[data-shell-error] #shell-loading * { visibility: visible !important; }
html[data-shell-error] #shell-loading {
  position: fixed; top: calc(50% + 16px); left: 0; width: 100%; z-index: 2147483647;
  display: grid; justify-items: center; gap: 16px; color: #536471; text-align: center; font: 700 13px/1.6 'Jura', sans-serif;
}
#shell-retry { padding: 8px 16px; border: 1px solid #b3c5ce; border-radius: 6px; background: white; color: inherit; font: inherit; cursor: pointer; }
#shell-retry[hidden] { display: none; }
html[data-kairos-font] #kairos-font-error,
html[data-kairos-font] #kairos-font-error * { visibility: visible !important; }
#kairos-font-error {
  position: fixed; inset: 0; z-index: 2147483647; display: grid;
  place-content: center; gap: 16px; padding: 24px; text-align: center;
  background: #f7f9fa; color: #536471; font: 13px/1.6 sans-serif;
}
#kairos-font-error button { padding: 8px 16px; font: inherit; cursor: pointer; }