/* ES3D R08: authoritative shell/procedure tokens. Engines retain their source. */
:root {
  --es3d-shell-max: 1680px;
  --es3d-shell-gutter: 16px;
  --es3d-shell-inset: max(var(--es3d-shell-gutter), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --es3d-shell-width: min(var(--es3d-shell-max), calc(var(--es3d-layout-width, 100vw) - 2 * var(--es3d-shell-inset)));
  --es3d-native-column-inset: 15px;
  --es3d-native-header-outer-width: var(--es3d-shell-width);
  --es3d-tool-header-height: 76px;
  --es3d-bf-header-height: 52px;
  --es3d-procedure-bg: #0d2018;
  --es3d-procedure-ink: #ffffff;
  --es3d-procedure-muted: #c9d9cf;
  --es3d-procedure-line: rgba(255,255,255,.22);
  /* R08.1 mobile type scale. Large headings retain their existing sizes. */
  --es3d-mobile-body: 17px;
  --es3d-mobile-secondary: 13px;
  --es3d-mobile-small: 12px;
  --es3d-mobile-lead-gap: 8px;
}
@media (min-width: 1200px) { :root { --es3d-shell-gutter: 24px; } }
@media (min-width: 1600px) { :root { --es3d-shell-gutter: 32px; } }
@media (max-width: 959px) { :root { --es3d-tool-header-height: 56px; } }
.es3d-procedure-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
  min-width: 0;
  padding: 12px 16px;
  color: var(--es3d-procedure-ink);
  background: var(--es3d-procedure-bg);
  border: 1px solid var(--es3d-procedure-line);
  border-radius: 12px;
}
.es3d-procedure-bar__steps { min-width: 0; flex: 1 1 auto; }
.es3d-procedure-bar__actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; min-width: 0; }
.es3d-procedure-bar__status { min-width: 0; color: var(--es3d-procedure-muted); overflow-wrap: anywhere; }
.es3d-procedure-bar :is(a,button) { min-height: 44px; }
.es3d-procedure-bar :is(a,button):focus-visible { outline: 3px solid #57d68b; outline-offset: 2px; }
@media (max-width: 767px) {
  .es3d-procedure-bar { padding: 10px 12px; gap: 8px; }
  .es3d-procedure-bar__steps { flex-basis: 100%; }
}